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

Question

I would like to change the format of the data in the DataTable in order to make it more flexible and the Chart is still the same with the 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 data = 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);
  }

Krzysztof Safjanowski · Accepted Answer · 2014-06-18 09:43:49Z

2

You must transpose array like: http://jsfiddle.net/krzysztof_safjanowski/Mw398/1/

var data = google.visualization.arrayToDataTable(transposeArray([
    ['Year', '2004', '2005', '2006', '2007'],
    ['Sales', 1000, 1170, 660, 1030],
    ['Expenses', 400, 460, 1120, 540]
]));

function transposeArray(array) {
  return array[0].map(function (col, i) {
    return array.map(function (row) {
      return row[i];
    });
  });
}

Before pass data to arrayToDataTable you mast prepare it in format that google charts will understand.

Transpose – http://en.wikipedia.org/wiki/Transpose

Method map – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

edited Jun 18, 2014 at 9:43

answered Jun 18, 2014 at 9:30

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PMay 1903 Over a year ago

Thank you very much. I got it now :-)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related