-1
function _cargargraficamatriculas(anio, sector, calendario, subregion, municipio) {
      var url = "grafica_matriculas" + "/" + anio + "/" + sector + "/" + calendario + "/" + subregion + "/" + municipio + "";
      $.get(url, function(resul) {
        var datos = jQuery.parseJSON(resul);
        var numerom = datos.totalmat;
        var cant = datos.cantidad;
        var i = 0;
        var labels = [];
        var data = [];
        for (i = 0; i < cant; i++) {
          //labels.push(mes[i]);
          data.push(numerom[i]);
        }
        var buyerData = {
          /*switchi se quiere traer los meses de la base de datos, se agrega la variable labels*/

          labels: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
          datasets: [{
            label: anioselect,
            backgroundColor: ["rgba(151,187,205,1)", "rgba(0, 150, 38, 0.78)", "rgba(36, 133, 2, 0.78)", "rgba(37, 0, 98, 0.78)", "rgba(101, 7, 112, 0.78)"],
            borderColor: ["rgba(151,187,205,1)", "rgba(0, 150, 38, 0.78)", "rgba(36, 133, 2, 0.78)", "rgba(37, 0, 98, 0.78)", "rgba(101, 7, 112, 0.78)"],
            pointBorderColor: "rgba(12, 95, 142, 0.78)",
            pointBackgroundColor: "rgba(38, 185, 154, 1)",
            pointHoverBackgroundColor: "rgba(#0b357e, 0.85)",
            pointHoverBorderColor: "rgba(8, 171, 171, 1)",
            borderWidth: 5,
            lineTension: 0,
            fill: false,
            data: data
          }]
        };
        var ctx = document.getElementById("myChartma").getContext('2d');
        if (window.grafica) {
          window.grafica.clear();
          window.grafica.destroy();
        }
        window.grafica = new Chart(ctx, {
          type: 'line',
          data: buyerData,
          options: {
            responsive: true,
            title: {
              display: true,
              text: _titulografica1
            },
            tooltips: {
              mode: 'index',
              intersect: false
            },
            hover: {
              mode: 'nearest',
              intersect: true
            },
            scales: {
              xAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: 'Mes'
                }
              }],
              yAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: 'Numero de Matriculas'
                },
                ticks: {
                  min: 0

                }
              }]`introducir el código aquí`

            }
          }

        });
      })
    }
5
  • Buenas, no se si entiendo bien tu pregunta, podrías ahondar un poco en lo que necesitas implementar? que tipo de chart es? cuál es la dificultad que tienes con los datos de la base de datos?
    – TppShaka77
    Commented el 6 jun. 2018 a las 20:09
  • SI mira el tipo de Chart es tipo Line, pues no tengo problemas al traer los datos, sino que como puedo iterar los dataset es como hacer un foreach con php para agregar nuevos elementos en html, pero en este caso es en JavaScript con los dataset. Commented el 6 jun. 2018 a las 20:12
  • Este seria un ejemplo de los datos: var objeto={ "2018":[100000,10000,0,0,0,5000,0,0,0,0,0,0],"2017":[10000,5000,0,0,0,0,0,0,0,0,0,0] }; Commented el 6 jun. 2018 a las 20:13
  • Si entiendo bien, lo que necesitas es ciclo para hacer el llenado de multiples datasets para agregar los valores de cada año divido por mes en la gráfica, es correcto?
    – TppShaka77
    Commented el 6 jun. 2018 a las 20:16
  • Exacto, no lo pudiste decir mejor, eso es lo busco, pero tengo todavía tengo ese inconveniente Commented el 6 jun. 2018 a las 20:20

1 respuesta 1

1

Para implementar varios datasets en un chart basta con armar el arreglo que compone la variable datasets en el data general del gráfico.

Trataré de ejemplificar con tu código lo que se requiere implementar:

var arrayDataSets = [];
var dataSetAux = {};
jQuery.each(data, function(index, value){
   dataSetAux = {
      label: value.anioTtile, //Dependiendo de como este tu objeto de datos, aquí iría el nombre del año.
      backgroundColor: ["rgba(151,187,205,1)", "rgba(0, 150, 38, 0.78)", "rgba(36, 133, 2, 0.78)", "rgba(37, 0, 98, 0.78)", "rgba(101, 7, 112, 0.78)"],
      borderColor: ["rgba(151,187,205,1)", "rgba(0, 150, 38, 0.78)", "rgba(36, 133, 2, 0.78)", "rgba(37, 0, 98, 0.78)", "rgba(101, 7, 112, 0.78)"],
      pointBorderColor: "rgba(12, 95, 142, 0.78)",
      pointBackgroundColor: "rgba(38, 185, 154, 1)",
      pointHoverBackgroundColor: "rgba(#0b357e, 0.85)",
      pointHoverBorderColor: "rgba(8, 171, 171, 1)",
      borderWidth: 5,
      lineTension: 0,
      fill: false,
      data: value.anioData//Dependiendo de como este tu objeto de datos, aquí iría el arreglo de los datos de ese año.
   }
   arrayDataSets.push(dataSetAux);
}

var buyerData = {
      labels: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
      datasets: arrayDataSets
    };

Estoy omitiendo parte del código que no tiene tanto que ver con lo que requieres solucionar.

Partes importantes:

value.anioTitle

Nombre del año que viene en el objeto, este dato podrías revisarlo antes con una validación del index en el arreglo si no quieres rehacer el objeto data para agrear un titulo que identifique el año.

value.anioData

Aquí se agregaría cada uno de los datos especificos de cada año para el dataset.

datasets: arrayDataSets

El atributo datasets, esta esperando recibir un arreglo de todos los datasets, por eso lo armamos en el ciclo anterior para entregarlo en este punto.

Adicionalmente, si deseas cambiar los colores o demás variables dentro del ciclo, puedes revisar el index dentro del foreach para saber en cual estas y que valor deben tener esos atributos para cambiarlo o definir ese o más atributos del dataset.

3
  • Hermano Muchas gracias es Justo lo que necesitaba, voy a implementar entonces el código, por lo que veo y analizo creo que funcionará. Commented el 6 jun. 2018 a las 20:39
  • Pues antes como solo me traía un solo año, era asi: {totalmat: ["174738", "10344", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"], cantidad: 12,…} Commented el 6 jun. 2018 a las 20:41
  • Claro, ya que vas a procesar varios años, en el objeto de los datos puedes armar un objeto que tenga como atributos, un label y el arreglo de datos de los meses del año, así puedes mostrar cada uno. Me alegra que te sirviera :)
    – TppShaka77
    Commented el 6 jun. 2018 a las 20:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.