Google Maps - Step Chart Animation
I have this problem animating 2 datasets. Step in Google Chart. This all worked well when it was just a LineChart, but my client would like to have a SteppedArea. When I change the type from LineChart to SteppedAreaChart, the animation of the first dataset is fine, but the second dataset is somewhat wrong and I can't figure out why. Could you take a look at this code pen? Many thanks
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();
}
EDIT: In the Google Charts documentation, they say that staircase animation doesn't support adding rows. But I'm not sure if this is the problem because it works well on the first dataset?
source to share
it looks like it can't handle the values null
for the first series
and setting interpolateNulls: true
doesn't help
as a fix, try using setValue
instead addRows
,
in the second part of the animation
to fill in the missing values in the first set of rows
seems to fix the line, see the 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>
source to share