Module API - end-user/chart-tasks

Description

A chart task creates an animated chart.

WARN This plugin is still in development stage, parts of API can change in the future. However is already in a stage that can be used.

This plugin has the following built-in charts:

• pie
• bar
• area
• line
• marker
• mixed Draws different types of chars in the same chart, uses parameter to determine the type of each chart per series.

read the details on .

Get started

How to create a simple bar chart:

The bare-bones of a beamtoix.scss file:

$beamtoix-width: 300;
$beamtoix-height: 150;
Copy

The bare-bones of a html file:

<div class="beamtoix-story" id=story>
    <div class=beamtoix-scene id=scene1>
      <canvas id=chart width=300 height=150></canvas>
    </div>
</div>
Copy

On the hello-world example, replace the scene.addAnimations with:

scene.addAnimations([{
   selector: '#chart', // JQuery selector pointing to the HtmlElement
   tasks: [{
     handler: 'chart', // is always 'chart' for charts.
     params: {
       chartType: BeamToIX.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 BeamToIX.AxisChartTaskParams, // comment as ... if you are using javascript
   }],
 }]);
Copy

The previous example, will create a static chart. To animate it, change it the to following:

 scene.addAnimations([{
  selector: 'canvas',
  tasks: [{
    handler: 'chart',
    params: {
      chartType: BeamToIX.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 BeamToIX.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
    }],
  }]);
Copy