Google Charts - Animation Of Stepped Chart

I have this problem with animating of 2-datasets Stepped graph in Google Charts. It all worked well when it was just a LineChart, but my client would love to have SteppedArea chart

Solution 1:

looks like it can't handle the null values for the first series,
and setting interpolateNulls: true doesn't help

as a fix, try using setValue, instead of addRows,
in the second part of the animation
to fill in the missing values on the first set of rows

seems to fix the line, see following working snippet...

google.charts.load("current", {
  callback: function () {
    drawLineChart();
    drawStepChart();
  },
  packages: ["corechart", "table"]
});

// two sets of values
var values = [
  [
    [1, 1.22, null],
    [2, 1.22, null],
    [3, 1.22, null],
    [4, 1.22, null],
    [5, 1.22, null],
    [6, 1.55, null],
    [7, 1.55, null],
    [8, 1.55, null],
    [9, 1.90, null],
    [10, 1.90, null]
  ],
  [
    [1, null, 2.11],
    [2, null, 2.11],
    [3, null, 2.11],
    [4, null, 0.80],
    [5, null, 0.80],
    [6, null, 0.80],
    [7, null, 0.80],
    [8, null, 1.00],
    [9, null, 2.10],
    [10, null, 2.10]
  ]
];

function drawLineChart() {
  var data1 = new google.visualization.DataTable();
  data1.addColumn("number", "Year");
  data1.addColumn("number", "One");
  data1.addColumn("number", "Two");

  var options = {
    animation: { duration: 50 }
  };

  var linechart = new google.visualization.LineChart(
    document.getElementById("line")
  );

  var index = 0;
  var index2 = 0;
  var animate1 = function() {
    if (index < values[1].length) {
      data1.addRows([values[1][index]]);
      linechart.draw(data1, options);
      index++;
    } else {
      if (index2 < values[0].length) {
        data1.addRows([values[0][index2]]);
        linechart.draw(data1, options);
        index2++;
      }
    }
  };
  google.visualization.events.addListener(
    linechart,
    "animationfinish",
    animate1
  );
  linechart.draw(data1, options);
  animate1();
}

function drawStepChart() {
  var data1 = new google.visualization.DataTable();
  data1.addColumn("number", "Year");
  data1.addColumn("number", "One");
  data1.addColumn("number", "Two");

  var options = {
    animation: { duration: 50 },
    areaOpacity: 0
  };

  var stepchart = new google.visualization.SteppedAreaChart(
    document.getElementById("step")
  );

  var index = 0;
  var index2 = 0;
  var animate1 = function() {
    if (index < values[1].length) {
      data1.addRows([values[1][index]]);
      stepchart.draw(data1, options);
      index++;
    } else {
      if (index2 < values[0].length) {
        data1.setValue(index2, 1, values[0][index2][1]);
        stepchart.draw(data1, options);
        index2++;
      }
    }
  };
  google.visualization.events.addListener(
    stepchart,
    "animationfinish",
    animate1
  );
  stepchart.draw(data1, options);
  animate1();
}

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