How to edit this graphic to work with more lines

Question

How to edit this graphic to work with more lines

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm using the Google API to generate graphics:

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><divid="chart_div"></div>

Doubt

How can I have another row of data in this chart?

javascript html google-charts

asked by anonymous 06.04.2016 / 18:42

2 answers

Jquery datatable appears with the result of previous searches while filtering Wait for servlet to complete action, and refresh screen with js

score 0 · Answer 1

Just add one more column to represent the data, and then populate the new information in 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><divid="chart_div"></div>

score 0 · Answer 2

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

Solution

To add a new column is very simple just use addColumn :

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

This command is used to tell how many columns your chart will have, the columns in the Line chart are converted to rows. The first parameter is the data type , number , boolean , date , datetime , timeofday ) and the second column name.

Then you should enter this column together in the Rows , each column is a new one given row , otherwise rage generates an error.

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

At this time the column values should follow the type you entered above. I'm not the case, it's all numbers.