Using the component mentioned in the header, I create a graph. There is a desire for some event to start its drawing / animation again. How can i do this? My code, initially creating the graph:

var chart = new Chartist.Line('#savings_calculator .graph', { series: [ [1, 1.6, 2.8, 2.7, 3.1, 3.4, 3.8, 4.5, 5.7, 5.6, 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 = 10; // 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 + 0, // 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({ x1: { begin: seq * delays, dur: durations, from: data.x - 10, to: data.x, easing: 'easeOutQuart' }, x2: { begin: seq * delays, dur: durations, from: data.x - 10, to: data.x, easing: 'easeOutQuart' }, opacity: { begin: seq * delays, dur: durations, from: 0, to: 1, easing: 'easeOutQuart' }, }); } });

In this code there is no attempt to restart the drawing / animation again, it is just the code that creates the graph and ends its work.

1 answer 1

Solved the problem by yourself. I rewrote the code a bit, wrapped it in a function and just run it again when necessary.

 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' } }); } });