[Chartjs]-ChartJS AJAX Javascript

1๐Ÿ‘

โœ…

Ok. So I had to move your code upside down.

The JSON format and json type was wrong

As per ChartJs this example correct format for generating chart is this

var config = {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'dataset - big points',
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                fill: false,
                borderDash: [5, 5],
                pointRadius: 15,
                pointHoverRadius: 10,
            }, {
                label: 'dataset - individual point sizes',
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.blue,
                fill: false,
                borderDash: [5, 5],
                pointRadius: [2, 4, 6, 18, 0, 12, 20],
            },]
        }

    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
    };

issue 1: What you were trying is this

var config = {
      type: 'line',
      labels: XXdates,
      datasets: []
    }

Notice the missing data attr

issue 2: Data format has to be in Array of Number

eg: [  1,2,3,4,5]

but your data returns like this

"[ "1", "2" ,"0" ]"

Solution : Working Code after resolving above points

function drawChart() {

  var jsonData = $.ajax({
    url: 'https://api.myjson.com/bins/11poyc',
    dataType: 'json',
  }).done(function(results) {

    var label = [];
    var output = [];

    results.forEach(function(data) {
      label.push(data.Labels);
      output.push(data.Array);
    });

    var XXnames = label.slice(0, -1);
    var XXdata = output.slice(0, -1);

    var XXdates = JSON.parse(output.reverse(output)[0]);


        var data = {
            labels: XXdates,
        datasets: []
    }

    XXnames.forEach(function(XXa, i) {

        console.log(JSON.parse(XXdata[i]).map(Number));

      data.datasets.push({
        label: XXa,
        fillColor: 'rgba(220,220,220,0.2)',
        strokeColor: 'rgba(220,220,220,1)',
        pointColor: 'rgba(220,220,220,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(220,220,220,1)',
        data: JSON.parse(XXdata[i]).map(Number)
      });
    });

        var config = {
      type: 'line',
      data : data
    }

    var ctx = document.getElementById("chart").getContext("2d");
    var chart = new Chart(ctx, config);
  });
}

drawChart();

Working Fiddle

Leave a comment