var chart = new Chartist.Line('#savings_calculator .graph', {
series: [
[1, 1.6, null, null, null, null, null, null, null, null, null, null],
[null, 1.6, 2.8, null, null, null, null, null, null, null, null, null],
[null, null, 2.8, 2.7, null, null, null, null, null, null, null, null],
[null, null, null, 2.7, 3.1, null, null, null, null, null, null, null],
[null, null, null, null, 3.1, 3.4, null, null, null, null, null, null],
[null, null, null, null, null, 3.4, 3.8, null, null, null, null, null],
[null, null, null, null, null, null, 3.8, 4.5, null, null, null, null],
[null, null, null, null, null, null, null, 4.5, 5.7, null, null, null],
[null, null, null, null, null, null, null, null, 5.7, 5.6, null, null],
[null, null, null, null, null, null, null, null, null, 5.6, 7.5, null],
[null, null, null, null, null, null, null, null, null, null, 7.5, 9.5]
]
}, {
axisX: {
showLabel: false,
showGrid: false
},
axisY: {
showLabel: false,
showGrid: false
},
lineSmooth: false,
low: 0
});
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
delays = 100,
durations = 1;
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function (data) {
seq++;
if (data.type === 'line') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays - delays,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if (data.type === 'point') {
data.element.animate({
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
});
}
});