How to edit this chart to work with more lines

Question

I’m using the Google API to generate charts :

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

function drawBarColors() {
  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],
    [15,  4.0, 6.1, 3.2],
    [16, 3.8, 6.0, 3.0],
  ]);

  var options = {
    chart: {
      title: 'Preço dos Commodities',
      subtitle: 'in dollars (USD)'
    },
    width: 600,
    height: 300,
    axes: {
      x: {
        0: {side: 'top'}
      }
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Doubt

• How can I have one more line of data on this graph?

Answer 1

Just add one more column to represent the data and then fill in the new information on DataTable

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

function drawBarColors() {
  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.addColumn('number', 'Stackoverflow PT'); //Adicionando mais um dado
  
  data.addRows([//Em cada linha dessa, adicionei mais um valor no fim de cada vetor.
    [1,  37.8, 80.8, 41.8, 55],
    [2,  30.9, 69.5, 32.4, 66],
    [3,  25.4,   57, 25.7, 77],
    [4,  11.7, 18.8, 10.5, 88],
    [5,  11.9, 17.6, 10.4, 99],
    [6,   8.8, 13.6,  7.7, 11],
    [7,   7.6, 12.3,  9.6, 22],
    [8,  12.3, 29.2, 10.6, 33],
    [9,  16.9, 42.9, 14.8, 44],
    [10, 12.8, 30.9, 11.6, 55],
    [11,  5.3,  7.9,  4.7, 12],
    [12,  6.6,  8.4,  5.2, 31],
    [13,  4.8,  6.3,  3.6, 41],
    [14,  4.2,  6.2,  3.4, 51],
    [15,  4.0, 6.1, 3.2, 98],
    [16, 3.8, 6.0, 3.0, 44],
  ]);

  var options = {
    chart: {
      title: 'Preço dos Commodities',
      subtitle: 'in dollars (USD)'
    },
    width: 600,
    height: 300,
    axes: {
      x: {
        0: {side: 'top'}
      }
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

• First it would be interesting to try to understand the API you are using, just read the documentation.

Solution

To add a new column is quite simple just use the addColumn:

data.addColumn('number', 'Star Wars V');

This command is used to specify how many columns will have your chart, the columns on the chart Line are converted to lines.
The first parameter is the data type (string,number,Boolean,date,datetime,timeofday) and the second name of the column.

After that you must inform this column together with us Rows, each column is a new data which must if informed in Row, otherwise will generate an error.

data.addRows([
  [coluna1,  coluna2, coluna3, coluna4, coluna5]
]);

At this point the values of the columns should follow the type you entered above. I am case are all numbers.