Google Line Chart JSON Format

Question

I am trying to follow the Creating Material Line Charts example in the Google Docs but I am unable to determine the format of the JSON used by the Line Chart. How can I display the JSON of the DataTable object?

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

  data.addRows([
    [1,  37.8, 80.8, 41.8],
    [2,  30.9, 69.5, 32.4],
    [3,  25.4,   57, 25.7],
    [4,  11.7, 18.8, 10.5],
    [5,  11.9, 17.6, 10.4],
    [6,   8.8, 13.6,  7.7],
    [7,   7.6, 12.3,  9.6],
    [8,  12.3, 29.2, 10.6],
    [9,  16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11,  5.3,  7.9,  4.7],
    [12,  6.6,  8.4,  5.2],
    [13,  4.8,  6.3,  3.6],
    [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
    chart: {
      title: 'Box Office Earnings in First Two Weeks of Opening',
      subtitle: 'in millions of dollars (USD)'
    },
    width: 900,
    height: 500
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, google.charts.Line.convertOptions(options));
}

Answer 1

I was able to figure out the correct format of the JSON for the line chart for the example.

{
"cols":[
    {"label":"Day","type":"number"},
    {"label":"Guardians","type":"number"},
    {"label":"Avengers","type":"number"},
    {"label":"Transformers","type":"number"}
],
"rows":[
    {"c":[{"v":1},{"v":37.8},{"v":80.8},{"v":41.8}]},
    {"c":[{"v":2},{"v":30.9},{"v":69.5},{"v":32.4}]},
    {"c":[{"v":3},{"v":25.4},{"v":57.0},{"v":25.7}]},
    {"c":[{"v":4},{"v":11.7},{"v":18.8},{"v":10.5}]},
    {"c":[{"v":5},{"v":11.9},{"v":17.6},{"v":10.4}]},
    {"c":[{"v":6},{"v":8.8},{"v":13.6},{"v":7.7}]},
    {"c":[{"v":7},{"v":7.6},{"v":12.3},{"v":9.6}]},
    {"c":[{"v":8},{"v":12.3},{"v":29.2},{"v":10.6}]},
    {"c":[{"v":9},{"v":16.9},{"v":42.9},{"v":14.8}]},
    {"c":[{"v":10},{"v":12.8},{"v":30.9},{"v":11.6}]},
    {"c":[{"v":11},{"v":5.3},{"v":7.9},{"v":4.7}]},
    {"c":[{"v":12},{"v":6.6},{"v":8.4},{"v":5.2}]},
    {"c":[{"v":13},{"v":4.8},{"v":6.3},{"v":3.6}]},
    {"c":[{"v":14},{"v":4.2},{"v":6.2},{"v":3.4}]}
]}