Chartist-js: First Draw event

[Sebi55]

I am searching in the docs if there is an event which hanles something like a first draw event. I did try created but the smil animations are skipped then. I do want the first draw to be animated but every update should not redo the complete animation instead it should just update the chart.
Since there is no list of provided events and I could not find anything then draw and created which would fit I am not sure if there is such an event. I would be able to implement this of course with setting some kine of flag but wouldn't it make sense to offer such an event?

[gionkunz]

@Sebi55 can you elaborate on "smil animations are skipped then"?

Yeah, the events are not really documented yet. This task #90 should cover that.

On the data event we already have a type property that is either initial or update. It would also be nice to have this on the created event I guess.

As a workaround, you already mentioned to keep your own flag, which is not a problem really, specially when you're using higher order functions like so:

var chart = new Chartist.Line('.chart', {
  labels: [1, 2, 3, 4, 5],
  series: [
    [1, 2, 3, 4, 5]
  ]
});

function one(cb) {
  var done = false;
  return function(data) {
    if(!done) {
      cb(data);
      done = true;
    }
  };
}

chart.on('created', one(function(data) {
  data.svg.animate({
    opacity: {
      dur: 5000,
      from: 0,
      to: 1
    }
  });
}));

[Sebi55]

If I use the created event no smil animation is made. If I use draw event they are of course made. I thought that the created event would include the first draw somehow but apparently when using the created event the chart is not animated and is completely loaded.
It is no problem I will use the draw event and use my own flag but I thought maybe there is an event for that which is not documented.

[gionkunz]

None of the events are documented yet unfortunately, but this is going to change with #90 . You can also use the created events and then use querySelector or querySelectorAll on the SVG api to select sub-elements of the chart and then animate them. There's no need to animate directly during the draw event (right after the element is drawn) but you can do your animation once the whole chart is drawn (created).

[gionkunz]

We should include the type in the created event though, I've flagged this issue as enhancement.

[Sebi55]

Right. I think I will do it this way. Thanks!

[ChildishDanbino]

In case anyone looks at this in the future here is another... and in my opinion more correct to animate only during the first draw.

1. Create a new event emitter using Chartist
   > const emitter = Chartist.EventEmitter();
2. Pass the emitter into the animate function from chartist
   > data.element.animate(animationDefinition, false, emitter);
3. Listen for the animationEnd to be fired and then remove the draw listener from the chart object.
   > emitter.addEventHandler('animationEnd', ()=>{
   this.chartist.off('draw');
   });