Help with a Javascript function to add several dataset to a chartjs from the database?

Question

Help with a Javascript function to add several dataset to a chartjs from the database?

Navigation

#1 by (0 votes)

-2

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í'

            }
          }

        });
      })
    }

javascript laravel chart.js

asked by Andrés Cantillo 06.06.2018 в 22:02

source

1 answer

Exchange of icons and text SQL query to show customer and total products and costs

score 0 · Accepted Answer

To implement several datasets in a chart it is enough to assemble the array that composes the variable datasets in the general data of the graph.

I will try to exemplify with your code what is required to implement:

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
    };

I am omitting part of the code that does not have as much to do with what you need to solve.

Important parts:

value.anioTitle

Name of the year that comes in the object, this data could be checked beforehand with a validation of the index in the array if you do not want to redo the object data to add a title that identifies the year.

value.anioData

Here you would add each of the specific data for each year for the dataset.

datasets: arrayDataSets

The datasets attribute is waiting to receive an array of all datasets, so we assembled it in the previous cycle to deliver it at this point.

Additionally, if you want to change the colors or other variables within the cycle, you can check the index within the foreach to know which ones you are in and what value those attributes must have to change it or define that or more attributes of the dataset.