Friday, 15 January 2010

How to change the format in the DataTable's Google Chart API with Javascript -



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