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:

read the details on AxisChartTaskParams.

Get started

How to create a simple bar chart:

The bare-bones of a abeamer.ini file:

$abeamer-width: 300;
$abeamer-height: 150;

The bare-bones of a html file:

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

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: 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, will create a static chart.
To animate it, change it the to following:

 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
    }],
  }]);
 

API

ChartTaskName

public export type

export type ChartTaskName = 'chart';
 

ExprSeries

public export interface

export interface ExprSeries{ }

ExprSeries.expr

public property [ExprSeries]

expr: ExprString;

Expression that defines the series.
v is the variable that starts in startValue, increments step.
n is the number of points.

ExprSeries.nrPoints

public property [ExprSeries]

nrPoints: uint;

Number of points generated by the expr.
If it's undefined, but there is already a previous series it will use the previous series nrPoints.
default: ChartDefaults.nrPoints

ExprSeries.startValue

public property [ExprSeries]

startValue?: number;

ExprSeries.step

public property [ExprSeries]

step?: number;

SeriesData

public export type

export type SeriesData = number[] | ExprSeries;
 

ChartCaptions

public export interface

export interface ChartCaptions{ }

ChartCaptions.fontColor

public property [ChartCaptions]

fontColor?: string | ExprString;

ChartCaptions.fontFamily

public property [ChartCaptions]

fontFamily?: string | ExprString;

ChartCaptions.fontSize

public property [ChartCaptions]

fontSize?: uint | ExprString;

ChartCaptions.alignment

public property [ChartCaptions]

alignment?: ChartCaptionAlignment | string;

ChartCaptions.position

public property [ChartCaptions]

position?: ChartCaptionPosition | string;

ChartCaptions.orientation

public property [ChartCaptions]

orientation?: ChartCaptionOrientation | string;

ChartCaptions.marginBefore

public property [ChartCaptions]

marginBefore?: uint | ExprString;

ChartCaptions.marginAfter

public property [ChartCaptions]

marginAfter?: uint | ExprString;
 

ChartLabels

public export interface

export interface ChartLabels extends ChartCaptions{ }

ChartLabels.captions

public property [ChartLabels]

captions?: string[] | ExprString;

ChartLabelsX

public export type

export type ChartLabelsX = ChartLabels;
 

ChartLegendMark

public export interface

export interface ChartLegendMark{ }

ChartLegendMark.width

public property [ChartLegendMark]

width?: uint | ExprString;

ChartLegendMark.height

public property [ChartLegendMark]

height?: uint | ExprString;

ChartLegendMark.spacing

public property [ChartLegendMark]

spacing?: uint | ExprString;
 

ChartLegend

public export interface

export interface ChartLegend extends ChartLabels{ }

ChartLegend.mark

public property [ChartLegend]

mark?: ChartLegendMark;
 

ChartLabelsY

public export interface

export interface ChartLabelsY extends ChartLabels{ }

ChartLabelsY.tickCount

public property [ChartLabelsY]

tickCount?: uint;
 

ChartMarkers

public export interface

export interface ChartMarkers{ }

ChartMarkers.visible

public property [ChartMarkers]

visible?: boolean | boolean[] | boolean[][];

ChartMarkers.shape

public property [ChartMarkers]

shape?: (ChartPointShape | string) | (ChartPointShape | string)[]
    | (ChartPointShape | string)[][];

ChartMarkers.size

public property [ChartMarkers]

size?: uint | uint[] | uint[][];

ChartMarkers.color

public property [ChartMarkers]

color?: string | string[] | string[][];
 

ChartLine

public export interface

export interface ChartLine{ }

ChartLine.visible

public property [ChartLine]

visible?: boolean;

ChartLine.color

public property [ChartLine]

color?: string | ExprString;

ChartLine.width

public property [ChartLine]

width?: number | ExprString;
 

ChartTitle

public export interface

export interface ChartTitle extends ChartCaptions{ }

ChartTitle.caption

public property [ChartTitle]

caption: string | ExprString;
 

ChartDefaults

public export interface

export interface ChartDefaults{ }

ChartDefaults.labelsX

public property [ChartDefaults]

labelsX: ChartLabelsX;

ChartDefaults.labelsY

public property [ChartDefaults]

labelsY: ChartLabelsY;

ChartDefaults.legend

public property [ChartDefaults]

legend: ChartLegend;

ChartDefaults.title

public property [ChartDefaults]

title: ChartTitle;

ChartDefaults.fillColors

public property [ChartDefaults]

fillColors: string;

ChartDefaults.strokeColors

public property [ChartDefaults]

strokeColors: string;

ChartDefaults.strokeWidth

public property [ChartDefaults]

strokeWidth: uint;

ChartDefaults.markers

public property [ChartDefaults]

markers: ChartMarkers;

ChartDefaults.barWidth

public property [ChartDefaults]

barWidth: uint;

ChartDefaults.pointMaxHeight

public property [ChartDefaults]

pointMaxHeight: uint;

ChartDefaults.pointDistance

public property [ChartDefaults]

pointDistance: uint;

ChartDefaults.seriesSpacing

public property [ChartDefaults]

seriesSpacing: uint;

ChartDefaults.nrPoints

public property [ChartDefaults]

nrPoints: uint;

Number of Points for ExprSeries

 

BaseChartTaskParams

public export interface

export interface BaseChartTaskParams extends AnyParams{ }

Parameters for both Axis Charts and Pie Charts.

BaseChartTaskParams.chartType

public property [BaseChartTaskParams]

chartType?: ChartTypes | string;

Defines the type of chart.
If it's mixed it uses chartTypes

BaseChartTaskParams.data

public property [BaseChartTaskParams]

data: SeriesData[];

List of series of data points.
Each series much have the same number of data points.

BaseChartTaskParams.animeSelector

public property [BaseChartTaskParams]

animeSelector?: string;

Set with a unique virtual selector, to be used another addAnimations to animate the chart.

Example

   scene.addAnimations([{
    selector: 'canvas',
    tasks: [{
      handler: 'chart',
      params: {
        data: [[100, 200, 50, 140, 300]],
        pointHeightStart: 0.1,    // defined the initial value for the animation point-height property
        animeSelector: 'chart-anime-02', // unique animation selector to be used by the animator
      } as ABeamer.AxisChartTaskParams,
    }],
  }])
    .addAnimations([{
      selector: `%chart-anime-02`, // 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
      }],
    }]);

BaseChartTaskParams.title

public property [BaseChartTaskParams]

title?: string | ExprString | ChartTitle;

Defines the chart title.
At the moment is only supported horizontal top or bottom titles.

BaseChartTaskParams.legend

public property [BaseChartTaskParams]

legend?: ChartLegend;

Defines the chart legend.
At the moment is only supported stacked left or right top legend.

BaseChartTaskParams.fillColors

public property [BaseChartTaskParams]

fillColors?: string | string[] | string[][];

Interior Color used by area, bar and pie charts.

BaseChartTaskParams.strokeColors

public property [BaseChartTaskParams]

strokeColors?: string | string[] | string[][];

Outline Color used by area, bar and pie charts, and line color for line chart.

BaseChartTaskParams.strokeWidth

public property [BaseChartTaskParams]

strokeWidth?: uint | uint[] | uint[][];
 

PieChartTaskParams

public export interface

export interface PieChartTaskParams extends BaseChartTaskParams{ }

Parameters used by Pie Charts.
Pie Charts provide the following animators:
- angle with initial value in angleStart.
- dispersion with initial value in dispersionStart.

PieChartTaskParams.angleStart

public property [PieChartTaskParams]

angleStart?: number | ExprString;

Initial angle in radians defining the zero radial line of the chart.
This parameter is animated with property angle.

PieChartTaskParams.dispersionStart

public property [PieChartTaskParams]

dispersionStart?: number | ExprString;

Initial dispersion factor defined between 0 and 1.
A dispersion defines the percentage of how much the pie circle will be used.
A value of 1 represents a full circle, and a value of 0.5, represents half circle.
This parameter is animated with property dispersion.

PieChartTaskParams.isClockwise

public property [PieChartTaskParams]

isClockwise?: boolean;
 

AxisChartTaskParams

public export interface

export interface AxisChartTaskParams extends BaseChartTaskParams{ }

Parameters used by Axis Charts, which are all except Pie Charts.
Axis Charts provide the following animators:
- point-height with initial value in pointHeightStart.
- deviation with initial value in deviationStart.
- sweep with initial value in sweepStart.

AxisChartTaskParams.chartTypes

public property [AxisChartTaskParams]

chartTypes?: (ChartTypes | string)[];

Chart Type per series. Use only if chartType is mixed.
example: : [ABeamer.ChartTypes.bar, ABeamer.ChartTypes.bar, ABeamer.ChartTypes.line]

AxisChartTaskParams.labelsX

public property [AxisChartTaskParams]

labelsX?: ChartLabelsX | ExprString | string[];

Defines the X labels with complete information or just as an ExprString.
If it's a ExprString, it will create one label for each point.
The iterator variable is v.
If it's an array, it must match the number of points in a series.
example: =2012 + v
example: { captions: ['A', 'B', 'C', 'D'] }

AxisChartTaskParams.labelsY

public property [AxisChartTaskParams]

labelsY?: ChartLabelsY | ExprString | string[];

Defines the Y labels with complete information or just as an ExprString.
If it's a ExprString, it will create one label for each point.
The iterator variable is v.
If it's an array, it must match the tickCount.
example: =v/1000 + 'k'
example: { captions: ['10', '20', '30', '40'] }

AxisChartTaskParams.markers

public property [AxisChartTaskParams]

markers?: ChartMarkers;

AxisChartTaskParams.barWidth

public property [AxisChartTaskParams]

barWidth?: uint | ExprString;

x bar length for bar charts.
If it's zero, it's calculated automatically in order to fill the complete x-space.

AxisChartTaskParams.pointMaxHeight

public property [AxisChartTaskParams]

pointMaxHeight?: uint | ExprString;

AxisChartTaskParams.pointDistance

public property [AxisChartTaskParams]

pointDistance?: uint | ExprString;

x distance between two data points.
If it's zero, it's calculated automatically in order to fill the complete x-space.
If the chart includes bars charts it must be big enough to include all the bars.

AxisChartTaskParams.seriesSpacing

public property [AxisChartTaskParams]

seriesSpacing?: uint | ExprString;

x space between two bars. Used only in bar charts.

AxisChartTaskParams.negativeFillColors

public property [AxisChartTaskParams]

negativeFillColors?: string | string[] | string[][];

Colors to be used in case of the data point is negative.
At the moment, it only supports bar charts.

AxisChartTaskParams.xAxis

public property [AxisChartTaskParams]

xAxis?: ChartLine;

AxisChartTaskParams.yAxis

public property [AxisChartTaskParams]

yAxis?: ChartLine;

AxisChartTaskParams.y0Line

public property [AxisChartTaskParams]

y0Line?: ChartLine;

AxisChartTaskParams.maxValue

public property [AxisChartTaskParams]

maxValue?: number | ExprString;

AxisChartTaskParams.minValue

public property [AxisChartTaskParams]

minValue?: number | ExprString;

AxisChartTaskParams.pointHeightStart

public property [AxisChartTaskParams]

pointHeightStart?: number | ExprString;

AxisChartTaskParams.deviationStart

public property [AxisChartTaskParams]

deviationStart?: number | ExprString;

AxisChartTaskParams.sweepStart

public property [AxisChartTaskParams]

sweepStart?: number | ExprString;