Load javascript array into Chartist.js as serie

Question

I decided it would be a fun project to see if i could take data from Google Analytics and display that in a custom dashboard, and hopefully learn a thing or two about using json, and javascript.

after a lot of debugging i now managed to pull the data from the Google Analytics server with their php api, and save the output into data.json on the server.

below the data.json, it's valid as per JSONLint.com:

{
"0": {
    "date": "20160113",
    "pageviews": "46",
    "sessions": "21"
},
"1": {
    "date": "20160114",
    "pageviews": "66",
    "sessions": "18"
},
"2": {
    "date": "20160112",
    "pageviews": "50",
    "sessions": "14"
},
"3": {
    "date": "20160116",
    "pageviews": "19",
    "sessions": "14"
},
"4": {
    "date": "20160117",
    "pageviews": "23",
    "sessions": "14"
},
"5": {
    "date": "20160115",
    "pageviews": "38",
    "sessions": "11"
},
"6": {
    "date": "20160118",
    "pageviews": "35",
    "sessions": "9"
},
"7": {
    "date": "20160119",
    "pageviews": "15",
    "sessions": "7"
    }
}

Now i've tried to use the data from data.json and feed it into chartist's labels/series in order to draw a graph.

var labelArray = [];
            var seriesArray = [];
            var labelOutput = [];

            $.getJSON("data.json", function(json) {

                //var jsonObj = JSON.parse(json);

                for (var i in json){
                    labelArray.push(json[i].date);
                };

                for (var i in json){
                    seriesArray.push(json[i].sessions);
                };

               // var myData = {
               //     labels: 
               // }

               // labelOutput = labelArray.join(',')
               // seriesOutput = serieArray.join(',')

                console.log(labelArray); 
                console.log(seriesArray); 
                // this will show the info it in firebug console
            });

                new Chartist.Line('.ct-chart', {
                    labels: [labelArray],
                    series: [[seriesArray]]
                }); 

However I'm currently out of ideas why this would not work, the labels on X and Y axis are correctly shown, but no graph shows up.

I've tried using .join to see if that makes a difference, but using labelOutput instead of labelArray also doesn't change anything.

In the console the array that is being fed into chartist seems all right to me, if I copy paste it from the console into the script everything works.

Current output for labelArray and seriesArray:

labelArray

Array [ "20160113", "20160114", "20160112", "20160116", "20160117", "20160115", "20160118", "20160119" ]

seriesArray

 Array [ "21", "18", "14", "14", "14", "11", "9", "7" ]

Anyone knows why chartist.js does manage to add the correct labels along the axes but fails to read the same data and draw the chart?

Answer 1

Although the answer by @mnutsch works, there is an easier way to add dynamic content into the chart.

You can simply add the arrays directly as parameters, which I think is what the OP was trying to do.

response object would be the ajax data

var seriesVals = [];
var labelsVals = [];
for (var i = 0; i < response.length; i++) {
 seriesVals.push(response[i].total);
 labelsVals.push(response[i].response_code);
}

var pieData = {
series: seriesVals,
labels: labelsVals
};

Answer 2

In case anyone comes across this later, you can also do it like this:

//Create javascript arrays with the values and labels, replace this with code to read from the database/API/etc.
var array_1_values = [100, 120, 180, 200, 90]; //these are the values of the first line
var array_2_values = [20, 35, 65, 125, 245]; //these are the values of the second line
var array_labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; //these are the labels that will appear at the bottom of the chart

//create a prototype multi-dimensional array
  var data_chart1 = {
    labels: [],
    series: [
        [],
        []
    ]
  };

//populate the multi-dimensional array
  for (var i = 0; i < array_1_values.length; i += 1)
  {
    data_chart1.series[0].push(array_1_values[i])
    data_chart1.series[1].push(array_2_values[i])
    data_chart1.labels.push(array_labels[i])
  }

  //set the size of chart 1
  var options_chart1 = {
    width: '300px',
    height: '200px'
  };

  //create chart 1
  new Chartist.Line('#chart1', data_chart1, options_chart1);

Answer 3

In case anyone else stumbles upon the problem, below is what I came up with to get it to work.

After another day of trail and error i managed to pinpoint the problem.

The problem was:

In the original situation I tried to use a plain array as input for both labels and series. However, Chartist requires objects to render the labels/series as well as the graph.

The below works for me pulling the data from the data.json, adding it to an object and provide it to chartist.

var labelArray = {};
            var seriesArray = {};
            var labelOutput = [];
            var Output

            // $.getJSON("data.json", function(json) {

            $.ajax({
                  url: 'data.json',
                  async: false,
                  dataType: 'text',
                  success: function(json) {

                labelArray = JSON.parse(json);

               data = {
                labels: 

                [   
                    labelArray[0].date,
                    labelArray[1].date,
                    labelArray[2].date,
                    labelArray[3].date,
                    labelArray[4].date,
                    labelArray[5].date,
                    labelArray[6].date
                                        ],
                series: [[
                    labelArray[0].sessions,
                    labelArray[1].sessions,
                    labelArray[2].sessions,
                    labelArray[3].sessions,
                    labelArray[4].sessions,
                    labelArray[5].sessions,
                    labelArray[6].sessions
                                        ]]
               }

              }
            });

                new Chartist.Line('.ct-chart', data);

Decided to go with $.ajax to get the json file rather than getJSON as this allows me to disable asynchronous loading, ensuring the data is available when the graph is drawn.

Also, it is possible to set the dataType to Json rather than text, but this gives error in the JSON.parse line. Assuming that is because it tries to parse json as json, and fails to do so. But this is the only way i managed to get it to work, and add the json to an object.

Most likely the whole labelArray[0].date, labelArray[1].date is rather inefficient and should be improved but it works for now.