ABeamer 0.3.0 includes the first implementation of the charts plugin.
Although there is still a lot of work for reach production stage, and the API can still change, is already usable in projects.
This plugin, will now enter a phase of research to ensure all parameters are consistent and their names and specifications are easy to use.
Have a look how the charts look in action or play with them in Code Pen.

This version also includes:

  • Gallery examples can viewed online without installing.
  • expressions support object variables.
  • expressions support one-dimension indices access to array variable.
  • Easings gallery.

Charts

Why a new implementation of JavaScript charts when there are already several complete and popular chart implementations, such as D3.js or Google Charts? ABeamer Charts isn’t designed to replace or compete with other chart implementation but instead provide an implementation that is designed to generate frame-by-frame animations and to allow teleportation.
The alternative would be to create a plugin as a compatibility layer of other chart implementation but it would require many workarounds to provide a consistent way to animate the chart frame-by-frame in order to be rendered in a remote machine and it would be limited to their capacities of animation.
ABeamer Charts are highly configurable and it’s a lightweight implementation because it takes benefit of the existing ABeamer infrastructure.
It’s form of parameterization differs from the standard ABeamer parameters, which was built to be similar to CSS properties, due the fact that has many common sub-parameters. Therefore, it uses the record.field parameterization.
It’s initial parameterization was designed in order to be similar to the popular python matplotlib package, but during the implementation phase it become clear that the Google Charts parameterization had more similarities with ABeamer properties parameterization. ABeamer Charts provide a complete set of defaults in order to create a chart with minimum parameterization.

A simple chart example:

 scene.addAnimations([{
    selector: '#chart', // JQuery selector pointing to the HtmlElement
    tasks: [{
      handler: 'chart', // is always 'chart' for charts.  
      params: {
        chartType: ABeamer.ChartTypes.bar, // or 'bar' if you are using javascript
        labelsX: { captions: ['A', 'B', 'C', 'D', 'E'] },
        title: 'My first Chart',
        data: [[100, 200, 50, 140, 300]],
      } as ABeamer.AxisChartTaskParams, // comment as ... if you are using javascript
    }],
  }]);

The previous example creates a bar chart but it doesn’t animates it, to animate the chart, it requires:

  1. the animeSelector parameter, which defines a virtual selector.
  2. an optional initial animator parameter, such as pointHeightStart for point-height animator.
  3. an extra scene.addAnimations using the virtual selector and the animator as a property.

Here is an example of how the previous example can be animated:

  scene.addAnimations([{
    selector: 'canvas',
    tasks: [{
      handler: 'chart',
      params: {
        chartType: ABeamer.ChartTypes.bar,
        labelsX: { captions: ['A', 'B', 'C', 'D', 'E'] },
        title: 'My first Chart',
        data: [[100, 200, 50, 140, 300]],
        // animation parameters
        pointHeightStart: 0.1,    // defined the initial value for the animation point-height property
        animeSelector: 'chart-anime-01', // unique animation selector to be used by the animator
      } as ABeamer.AxisChartTaskParams,
    }],
  }])
    .addAnimations([{
      selector: `%chart-anime-01`, // animation selector defined previously, prefixed with '%'
      duration: `1s`,
      props: [{
        prop: 'point-height', // property which initial value is 0.1
        value: 1,             // value at the end of animation
      }],
    }]);

Object Variables

Before version 0.3.0, expressions could only access to numerical, textual and array variables.

scene.addAnimations([{
      selector: `#text`,
      props: [{
        prop: 'left',
        value: '=frameWidth',
      }],
    }]);

With the introduction of Charts, it’s required that expressions have access to chart defaults parameters.
Chart parameterization uses the record.field format, therefore to access it was required to add object variable access in expressions.
Starting from ABeamer 0.3.0, it’s possible to access it using the . separator.

scene.addAnimations([{
      selector: `#text`,
      props: [{
        prop: 'left',
        value: '=chart.labelsY.marginAfter',
      }],
    }]);

The previous information won’t access the information of a particular chart, but instead of the chart defaults.
For more information regarding charts, read charts.