код анимации многострочного графика изменяет графики Google

Question

Я нашел код отсюда: при загрузке анимации Google LineChart

google.load('visualization', '1', { packages: ['corechart'], callback: function() {
    var data = new google.visualization.DataTable();
    data.addRows(5);

    data.addColumn('string', '');
    data.addColumn('number', 'Sales');
    data.addRows(5);
    data.setValue(0, 0, 'Jan');
    data.setValue(1, 0, 'Feb');
    data.setValue(2, 0, 'Mar');
    data.setValue(3, 0, 'Apr');
    data.setValue(4, 0, 'May');

    var options = {
        title: 'Sales by months for 2013 year', curveType: 'function',
        "vAxis": { "minValue": "0", "maxValue": 6 }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
        animation: { duration: 250 }
    };
    var chart = new google.visualization.LineChart(document.getElementById('test'));

    var index = 0;
    var chartData = [ 5, 1, 4, 2, 3 ]
    var drawChart = function() {
        console.log('drawChart index ' + index);
        if (index < chartData.length) {
            data.setValue(index, 1, chartData[index++]);
            chart.draw(data, options);
        }
    }

    google.visualization.events.addListener(chart, 'animationfinish', drawChart);
    chart.draw(data, options);
    drawChart();
}});

Если я хочу создать многострочное, как изменить этот код? Спасибо! Я не программист javascript и не знаком с ООП Автор OneMoreVladimir, но у меня нет доступа к комментариям под его сообщением.

Answer 1

google.load('visualization', '1', {
  packages: ['corechart'],
  callback: function() {
    var data = new google.visualization.DataTable();
    data.addRows(5);
    data.addColumn('string', '');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Sales2');
    data.addRows(5);
    data.setValue(0, 0, 'Jan');
    data.setValue(1, 0, 'Feb');
    data.setValue(2, 0, 'Mar');
    data.setValue(3, 0, 'Apr');
    data.setValue(4, 0, 'May');

    var options = {
      title: 'Sales by months for 2013 year',
      curveType: 'function',
      "vAxis": {
        "minValue": "0",
        "maxValue": 8
      },
      "hAxis": {
        "slantedTextAngle": "45",
        "slantedText": "true"
      },
      "legend": {
        "position": "top"
      },
      "pointSize": "5",
      animation: {
        duration: 600
      }
    };
    var chart = new google.visualization.LineChart(document.getElementById('test'));

    var index = 0;
    var chartData = [5, 1, 4, 2, 3]
    var drawChart = function() {
      console.log('drawChart index ' + index);
      if (index < chartData.length) {
        data.setValue(index, 1, chartData[index++]);
        chart.draw(data, options);
      }
    }

    var index1 = 0;
    var chartData1 = [1, 3, 4, 6, 5]
    var drawChart1 = function() {
      console.log('drawChart1 index1 ' + index1);
      if (index1 < chartData1.length) {
        data.setValue(index1, 2, chartData1[index1++]);
        chart.draw(data, options);
      }
    }
    google.visualization.events.addListener(chart, 'animationfinish', drawChart);
    google.visualization.events.addListener(chart, 'animationfinish', drawChart1);
    chart.draw(data, options);
    drawChart();
    drawChart1();
  }
});

Я понял! Вот код.

Но другой вопрос, код проходит http://jsfiddle.net и работает очень хорошо, но когда я копирую, вставляю его в HTML, почему он не работает? Я что-то пропустил?