How to change the format in the DataTable's Google Chart API with Javascript -
i alter format of info in datatable in order create more flexible , chart still same first one.
default:
['year', 'sales', 'expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] it must be:
['year', '2004', '2005', '2006', '2007'], ['sales', 1000, 1170, 660, 1030], ['expenses', 400 ,460, 1120, 540] demo
html:
<div id="chart_div" style="width: 450px; height: 300px;"></div> javascript:
google.load("visualization", "1", {packages:["corechart"]}); google.setonloadcallback(drawchart); function drawchart() { var info = google.visualization.arraytodatatable([ ['year', 'sales', 'expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'company performance' }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data, options); }
you must transpose array like: http://jsfiddle.net/krzysztof_safjanowski/mw398/1/
var info = google.visualization.arraytodatatable(transposearray([ ['year', '2004', '2005', '2006', '2007'], ['sales', 1000, 1170, 660, 1030], ['expenses', 400, 460, 1120, 540] ])); function transposearray(array) { homecoming array[0].map(function (col, i) { homecoming array.map(function (row) { homecoming row[i]; }); }); } before pass info arraytodatatable mast prepare in format google charts understand.
transpose – http://en.wikipedia.org/wiki/transpose
method map – https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/map
javascript charts google-visualization
No comments:
Post a Comment