Google charts - animation of stepped chart

Question

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. When I change the type from LineChart to SteppedAreaChart, the animation of the first dataset is OK, but the second dataset is somewhat wrong and I cannot figure out why. Can you please take a look at this code pen? Thank you very much

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.addRows([values[0][index2]]);
                stepchart.draw(data1, options);
                index2++;
            }                
        }
    }
    google.visualization.events.addListener(stepchart, 'animationfinish', animate1);
    stepchart.draw(data1, options);
    animate1();
}

Codepen

EDIT: in Google Charts documentation, they say, that animation of stepped charts doesn't support adding rows. But I'm not sure it that is the problem because it works alright in the first data set?

WhiteHat WhiteHat · Accepted Answer · 2017-04-27T12:22:50

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>

Google charts - animation of stepped chart

1 Answers