AmandaRJ AmandaRJ -4 years ago 72
Javascript Question

Put two array in googlechart

I have two arrays:


Sales [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0]


and


Dates [01/03/2017, 02/03/2017, 03/03/2017, 04/03/2017, 05/03/2017,
06/03/2017, 07/03/2017, 08/03/2017, 09/03/2017, 10/03/2017,
11/03/2017, 12/03/2017, 13/03/2017, 14/03/2017, 15/03/2017,
16/03/2017, 17/03/2017, 18/03/2017, 19/03/2017, 20/03/2017,
21/03/2017, 22/03/2017, 23/03/2017, 24/03/2017, 25/03/2017,
26/03/2017, 27/03/2017, 28/03/2017, 29/03/2017, 30/03/2017,
31/03/2017]


I do not know if it's the right way, but I'm playing in a variable:

var dates= [
<c:forEach var="a" items="${getDates}" varStatus="s">
['${a}'],
</c:forEach>
];


and:

var sales= [
<c:forEach var="b" items="${getSales}" varStatus="s">
[${b}],
</c:forEach>
];


I wanted to put this code and I can not:

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Dates', 'Sales'],
for (var i = 0; i <= dates.length; i++) {
[dates[i], sales[i]],
}
]);

var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
}
</script>


Was that the logic? I have no idea how to fix it. can you help me?

Answer Source

cannot place a for statement within a method call to arrayToDataTable

instead, create the DataTable first, then add the rows,

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var sales = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  var dates = ['01/03/2017', '02/03/2017', '03/03/2017', '04/03/2017', '05/03/2017', '06/03/2017', '07/03/2017', '08/03/2017', '09/03/2017', '10/03/2017', '11/03/2017', '12/03/2017', '13/03/2017', '14/03/2017', '15/03/2017', '16/03/2017', '17/03/2017', '18/03/2017', '19/03/2017', '20/03/2017', '21/03/2017', '22/03/2017', '23/03/2017', '24/03/2017', '25/03/2017', '26/03/2017', '27/03/2017', '28/03/2017', '29/03/2017', '30/03/2017', '31/03/2017'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');

  for (var i = 0; i < dates.length; i++) {
    data.addRow([dates[i], sales[i]]);
  }

  var options = {
    chartArea: {
      bottom: 60
    },
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>


note: the Dates array as posted in the question looks a little suspect

it should look more like the one in the above snippet

and if you want an actual 'date' and not a 'string',

you'll need to build something like this...

var dates = [new Date('01/03/2017'), new Date('02/03/2017'), new Date('03/03/2017'), ...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download