谷歌图表时间序列中的多个折线图

Question

How do I make a google charts that has multiple line charts. I know how to do it in chartsjs but it confuses me in google charts. My attempt:

   <script>

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

function drawCurveTypes() {
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'X');
      data.addColumn('number', 'Person 1');
      data.addColumn('number', 'Person 2');

        data.addRows(9);

        data.setValue(0, 0, new Date(2010, 1, 1));
        data.setValue(0, 1, 215);
        data.setValue(0, 2, 215);

        data.setValue(1, 0, new Date(2010, 2, 1));
        data.setValue(1, 2, 213);

        data.setValue(2, 0, new Date(2010, 2, 4));
        data.setValue(2, 2, 213);

        data.setValue(3, 0, new Date(2010, 2, 8));
        data.setValue(3, 2, 213);


        data.setValue(4, 0, new Date(2010, 3, 1));
        data.setValue(4, 2, 220);

        data.setValue(5, 0, new Date(2010, 4, 1));
        data.setValue(5, 2, 190);

      var options = {
        {#chartArea:{ width:"100%", height:"100%"},#}
        title: "Persons Performance over Time",
        height: 500,
        width: 1300,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Scores'
        },
        series: {
          1: {curveType: 'function'}
        },

      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }


    </script>

But it seems to only make one line chart. I have scores for person 1 and person 2 over time, so its a timeseries data. This is my output goal:

Answer 1

looks like you have the right idea, you just need to add values for the first series.

here, you've added values for both series.

data.setValue(0, 0, new Date(2010, 1, 1));
data.setValue(0, 1, 215);  // series 1
data.setValue(0, 2, 215);  // series 2

but since they are both on the same y-axis value, only one is visible.
and no more values for line 1 are ever added, so only a single point is drawn.

data.setValue(1, 0, new Date(2010, 2, 1));
data.setValue(1, 2, 213);  // series 2

data.setValue(2, 0, new Date(2010, 2, 4));
data.setValue(2, 2, 213);  // series 2

data.setValue(3, 0, new Date(2010, 2, 8));
data.setValue(3, 2, 213);  // series 2

data.setValue(4, 0, new Date(2010, 3, 1));
data.setValue(4, 2, 220);  // series 2

data.setValue(5, 0, new Date(2010, 4, 1));
data.setValue(5, 2, 190);  // series 2

to display series 1, you need to add values for data table column 1.
so it would need to be similar to the following...

data.setValue(1, 0, new Date(2010, 2, 1));
data.setValue(1, 1, 200);  // series 1
data.setValue(1, 2, 213);  // series 2

data.setValue(2, 0, new Date(2010, 2, 4));
data.setValue(2, 1, 200);  // series 1
data.setValue(2, 2, 213);  // series 2

data.setValue(3, 0, new Date(2010, 2, 8));
data.setValue(3, 1, 210);  // series 1
data.setValue(3, 2, 213);  // series 2

data.setValue(4, 0, new Date(2010, 3, 1));
data.setValue(4, 1, 207);  // series 1
data.setValue(4, 2, 220);  // series 2

data.setValue(5, 0, new Date(2010, 4, 1));
data.setValue(5, 1, 177);  // series 1
data.setValue(5, 2, 190);  // series 2

EDIT

the setValue method takes the following arguments...

setValue(rowIndex, columnIndex, value);

the first argument is the row index in the data table to update.
the second argument is the column index in the data table to update.

here, you are adding 9 blank rows...

        data.addRows(9);

which then requires you to go back and update each row and column individually.

    data.setValue(0, 0, new Date(2010, 1, 1));
    data.setValue(0, 1, 215);
    data.setValue(0, 2, 215);

but if you already have the values for the row,
you can use the addRow method.

so, instead of adding the 9 blank rows, just add the row values one at a time...

data.addRow([new Date(2010, 1, 1), 215, 215]);

or if all of your data is in the form of an array,
you can add all the rows at the same time using the addRows method,
without setting the number of rows...

data.addRows([
  [new Date(2010, 1, 1), 215, 215],
  [new Date(2010, 2, 1), 215, 215],
  [new Date(2010, 3, 1), 215, 215]
]);