javascript - Google Charts with 3 columns -
i want create google chart has 3 columns. want add 2 sets data it. please refer js code understanding.
also can check https://jsfiddle.net/dt6syt2w/2/
i'm looking forward getting solution user : asgallant
google.load('visualization', '1', {packages: ['corechart', 'line']}); google.setonloadcallback(drawtrendlines); function drawtrendlines() { var data1 = new google.visualization.datatable(); data1.addcolumn('number', 'x'); data1.addcolumn('number', 'normal value 1'); data1.addcolumn('number', 'peak value 1'); data1.addrows([ [0, 0, 0], [1, 10, 15], [2, 23, 25], [3, 17, 26], [4, 18, 30], [5, 9, 20], [6, 11, 25], [7, 27, 30] ]); var data2 = new google.visualization.datatable(); data2.addcolumn('number', 'x'); data2.addcolumn('number', 'normal value 2'); data2.addcolumn('number', 'peak value 2'); data2.addrows([ [1, 1, 1], [2, 20, 25], [3, 25, 30], [4, 23, 35], [5, 28, 36], [6, 19, 40], [7, 80, 100] ]); var joineddata = google.visualization.data.join(data1, data2, 'full', [[0, 0, 0]], [1], [1], [1]); var options = { haxis: { title: 'time' }, vaxis: { title: 'popularity' } }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(joineddata, options); }
just have fix join()
call:
var joineddata = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1, 2], [1, 2]);
the [[0, 0]]
compares keys @ column position 0 each datatable passed in. [1, 2]
supplied next arguments join columns @ position 1 , 2 in each data table. since columns named normal value 1
, peak value 1
, normal value 2
, , peak value 2
@ positions, data comes there.
google.load('visualization', '1', { packages: ['corechart', 'line'] }); google.setonloadcallback(drawtrendlines); function drawtrendlines() { var data1 = new google.visualization.datatable(); data1.addcolumn('number', 'x'); data1.addcolumn('number', 'normal value 1'); data1.addcolumn('number', 'normal value 2'); data1.addrows([ [0, 0, 0], [1, 10, 15], [2, 23, 25], [3, 17, 26], [4, 18, 30], [5, 9, 20], [6, 11, 25], [7, 27, 30] ]); var data2 = new google.visualization.datatable(); data2.addcolumn('number', 'x'); data2.addcolumn('number', 'peak value 1'); data2.addcolumn('number', 'peak value 2'); data2.addrows([ [1, 1, 1], [2, 20, 25], [3, 25, 30], [4, 23, 35], [5, 28, 36], [6, 19, 40], [7, 80, 100] ]); var joineddata = google.visualization.data.join(data1, data2, 'full', [ [0, 0] ], [1, 2], [1, 2]); var options = { haxis: { title: 'time' }, vaxis: { title: 'popularity' } }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(joineddata, options); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"> <div>
Comments
Post a Comment