Google chart draw() options are ignored

I am learning Google Charts, and i am trying to use options to add a title to my chart , but i don't know why it doesn't work. Here is my code :

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
  packages: ['line']
}).then(function () {
  // create data table
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Hour');
  data.addColumn('string','Connection');
  data.addColumn('number', 'CPU');
  data.addRows([
    ['10', 'BATCH', 500],
    ['10', 'CICS', 2000],
    ['10', 'UTILITY', 100],
    ['10', 'DIST', 700],
    ['11', 'BATCH', 800],
    ['11', 'CICS', 2500],
    ['11', 'UTILITY', 200],
    ['11', 'DIST', 900],
    ['12', 'BATCH', 300],
    ['12', 'CICS', 2100],
    ['12', 'UTILITY', 250],
    ['12', 'DIST', 600],
  ]);

  // group data table
  var groupData = google.visualization.data.group(
    data,
    [0, 1],
    [{
      column: 2,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]
  );

  // create data view
  var view = new google.visualization.DataView(groupData);

  // sum column array
  var aggColumns = [];

  // use hour as first view column
  var viewColumns = [0];

  // build view & agg columns for each Connection
  groupData.getDistinctValues(1).forEach(function (Connection, index) {
    // add view column for each Connection
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === Connection) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: Connection,
      type: 'number'
    });

    // add sum column for each Connection
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: Connection,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  // sum view by Hour
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var options = {
    title: 'Consommation CPU par workload',
    curveType: 'none',
    legend: { position: 'bottom' },
    vAxis: { title:'CPU Secondes' }
   };

   
  // draw chart
  var lineChart = new google.charts.Line(document.getElementById('LineChart'));
  lineChart.draw(aggData, options);


});

</script>
</head>
<body>
   <div id="LineChart" style="width:700px;height:500px"></div>
</body>
</html>

However i don't have the expected result as my chart doesn't have a title and the Y axis legend as expected. Get only this result

Can you please tell me what is wrong ? Thank you very much for your help.

Duc

Google chart draw() options are ignored

0 Answers