Chartjs-Display multiple data into chart.js

by

0👍

The only solution I found is with sync which apparently is not good, but if anyone find another solution feel free to post it

$(function () {
  $('#go').click(function(){

    var checkbox_value = [];
    $(":checkbox").each(function () {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            checkbox_value.push($(this).val());
        }
    });

    var background = ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)",
                      "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)",
                      "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)"];

    var border = ["rgba(255,99,132,1)", "rgba(54, 162, 235, 1)",
                  "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)",
                  "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"];

    var ddm = 0;
    data = {
      labels:[],
      datasets:[]
    };
    for (var m = 0; m < checkbox_value.length; m++) {
      var mid = checkbox_value[m];
      var backid = background[m];
      var bordid = border[m];

      var ajaxResponse = $.ajax({
        url: "output.php",
        data: { MOD_CODE: mid },
        dataType: 'json',
        async: false,
        success: function(d){

          data.labels = [];
          data.datasets[ddm] = {data:[]};
          for (var i = 0; i < d.length; i++) {
            data.labels.push(d[i][0]);
            data.datasets[ddm].data.push(parseFloat(d[i][1]));
            data.datasets[ddm].label = mid;
            data.datasets[ddm].backgroundColor = backid;
            data.datasets[ddm].borderColor = bordid;
          }//.for
          ddm++;

          if (ddm == checkbox_value.length) {
            console.log(data);
            // Create the chart with the data collected
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
              type: 'radar',
              data: data,
              options:{
                responsive:false,
                scale:{ticks: {beginAtZero: true}}}
            });//.new Chart
          }//.if

        }//.success
      }); //.ajax
    }//.for

  })//.click
});//.function

Leave a comment