0

I am creating a Chart.js (http://www.chartjs.org/docs/#radar-chart-introduction) from a JSON file.

But I am doing it so with a "checkbox", the idea is click on the element desire and it will display a different data inside de same canvas.

I think I almost have but I have a problem when I want to save the data. As you can see here, with console.log I can see the data through the loop, and its fine but when its trying to keep it into data object, its wrong.

chart.js:25 CSN08101
chart.js:26 rgba(255, 99, 132, 0.2)
chart.js:27 rgba(255,99,132,1)

chart.js:25 CSN08112
chart.js:26 rgba(54, 162, 235, 0.2)
chart.js:27 rgba(54, 162, 235, 1)

chart.js:47 
  Object
    datasets: 
      Array[1] 
        0:Object
          backgroundColor: "rgba(54, 162, 235, 0.2)"
          borderColor: "rgba(54, 162, 235, 1)"
          data: Array[19]
          label: "CSN08112 module"
          __proto__: Object
          length: 1
          __proto__: Array[0]
          labels: Array[19]
          __proto__: Object

chart.js:47 
  Object
    datasets: Array[1]
      0: Object
        backgroundColor: "rgba(54, 162, 235, 0.2)"
        borderColor: "rgba(54, 162, 235, 1)"
        data: Array[19]
        label: "CSN08112 module"
        __proto__: Object
        length: 1
        __proto__: Array[0]
        labels: Array[19]
        __proto__: Object

This is my code:

$(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 data = [];
    for (var m = 0; m < checkbox_value.length; m++) {
      var mid = checkbox_value[m];
      var backid = background[m];
      var bordid = border[m];
      console.log(mid);
      console.log(backid);
      console.log(bordid);
      $.ajax({
        url: "output.php",
        data: { MOD_CODE: mid },
        dataType: 'json',
        success: function(d){
          data[m] = {
            labels:[],
            datasets:[{
              label: mid + ' module',
              backgroundColor: backid,
              borderColor: bordid,
              data:[],
            }]
          };

          for (var i = 0; i < d.length; i++) {
            data[m].labels.push(d[i][0]);
            data[m].datasets[0].data.push(parseFloat(d[i][1]));
          }//.for
        console.log(data[m]);
        }//.success
      }); //.ajax
    } //.for


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

  })//.click
});//.function
Adrian Vazquez
  • 327
  • 1
  • 6
  • 20
  • accessing outside variables inside success callback of ajax is not possible from your code – Roljhon Mar 30 '17 at 22:24
  • any idea how to solve it? @Roljhon – Adrian Vazquez Mar 30 '17 at 22:45
  • refer from the last answer [here](http://stackoverflow.com/questions/36596173/access-a-variable-from-inside-ajax-call-success). That would fit your needs, It's simply processing everything outside of the ajax call. – Roljhon Mar 30 '17 at 22:50
  • I have taken a stab at this (I have done something similar in chart.js) but I realized that you are misunderstanding an important concept. Each chart only has 1 `data` object and within that single object only 1 `labels` array (but can have multiple `datasets`). Take a look at the example [dataset structure](http://www.chartjs.org/docs/#radar-chart-chart-options) (what I am referring to is right above where my link takes you). In your code, you are creating an array of `data` objects (see right inside your `ajax` `success` callback, which will not work. – jordanwillis Mar 31 '17 at 14:32
  • I'm assuming you have not yet actually rendered a chart, but long story short it will not work. I can provide an alternate solution but I need to know if there is a common set of `labels` across all your datasets? If there isn't then you will be forced to create multiple charts. – jordanwillis Mar 31 '17 at 14:34
  • I found a solution with async: false, give a sec @jordanwillis – Adrian Vazquez Apr 01 '17 at 11:33
  • Thanks for the link @Roljhon was very helpful – Adrian Vazquez Apr 01 '17 at 11:35

1 Answers1

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
Adrian Vazquez
  • 327
  • 1
  • 6
  • 20