CODEWITHSUNDEEP
javascriptfor-loopgoogle-visualization
Airikr
Airikr

Reputation: 6436

Add an for loop to the line chart in Google Charts

I want to add an for loop in order to loop the data to my Google Chart. The code below shows how far I've got.

var line_div = '2016-08-04,4|2016-08-05,7|2016-08-06,9|2016-08-07,2';
var line = line_div.split(/[,|]/);
var array_dt = line.filter((x,i) => (i%2!==0));
var array_s = line.filter((x,i) => (i%2===0));

var line_data = google.visualization.arrayToDataTable([
    ['Date', 'Log'],
    ['2016-08-04', 134]
]);

Here's how I how I have tried. The dotted part is where I can't figure it out how I can manage it to work. And I know that I have done it wrong but I don't know any other solution.

var line_data = google.visualization.arrayToDataTable([
    for(var i = 0; i < line.length; i++) {
        ['Date', 'Log'],
        [...]
    }
]);

How can I accomplish this?

Upvotes: 0

Views: 1895

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

you'll need to build the array before passing to arrayToDataTable 

google.charts.load('current', {
  callback: function () {
    var line_div = '2016-08-04,4|2016-08-05,7|2016-08-06,9|2016-08-07,2';
    var line = line_div.split(/[,|]/);
    var array_dt = line.filter((x,i) => (i%2!==0));
    var array_s = line.filter((x,i) => (i%2===0));

    var dataRows = [['Date', 'Log']];
    for (var i = 0; i < array_s.length; i++) {
      dataRows.push([array_s[i], parseFloat(array_dt[i])]);
    }

    var line_data = google.visualization.arrayToDataTable(dataRows);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(line_data);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions