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.
How to create a simple bar chart:
The bare-bones of a beamtoix.scss file:
DevToIX$beamtoix-width: 300;
$beamtoix-height: 150;
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>
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
}],
}]);
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
}],
}]);
public export type
export type ChartTaskName = 'chart';
public export interface
export interface ExprSeries{ }
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.
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
public property [ExprSeries]
startValue?: number;
public property [ExprSeries]
step?: number;
public export type
export type SeriesData = number[] | ExprSeries;
public export interface
export interface ChartCaptions{ }
public property [ChartCaptions]
fontColor?: string | ExprString;
public property [ChartCaptions]
fontFamily?: string | ExprString;
public property [ChartCaptions]
fontSize?: uint | ExprString;
public property [ChartCaptions]
alignment?: ChartCaptionAlignment | string;
public property [ChartCaptions]
position?: ChartCaptionPosition | string;
public property [ChartCaptions]
orientation?: ChartCaptionOrientation | string;
public property [ChartCaptions]
marginBefore?: uint | ExprString;
public property [ChartCaptions]
marginAfter?: uint | ExprString;
public export interface
export interface ChartLabels extends ChartCaptions{ }
public property [ChartLabels]
captions?: string[] | ExprString;
public export type
export type ChartLabelsX = ChartLabels;
public export interface
export interface ChartLegendMark{ }
public property [ChartLegendMark]
width?: uint | ExprString;
public property [ChartLegendMark]
height?: uint | ExprString;
public property [ChartLegendMark]
spacing?: uint | ExprString;
public export interface
export interface ChartLegend extends ChartLabels{ }
public property [ChartLegend]
mark?: ChartLegendMark;
public export interface
export interface ChartLabelsY extends ChartLabels{ }
public property [ChartLabelsY]
tickCount?: uint;
public export interface
export interface ChartMarkers{ }
public property [ChartMarkers]
visible?: boolean | boolean[] | boolean[][];
public property [ChartMarkers]
shape?: (ChartPointShape | string) | (ChartPointShape | string)[]
| (ChartPointShape | string)[][];
public property [ChartMarkers]
size?: uint | uint[] | uint[][];
public property [ChartMarkers]
color?: string | string[] | string[][];
public export interface
export interface ChartLine{ }
public property [ChartLine]
visible?: boolean;
public property [ChartLine]
color?: string | ExprString;
public property [ChartLine]
width?: number | ExprString;
public export interface
export interface ChartTitle extends ChartCaptions{ }
public property [ChartTitle]
caption: string | ExprString;
public export interface
export interface ChartDefaults{ }
public property [ChartDefaults]
labelsX: ChartLabelsX;
public property [ChartDefaults]
labelsY: ChartLabelsY;
public property [ChartDefaults]
legend: ChartLegend;
public property [ChartDefaults]
title: ChartTitle;
public property [ChartDefaults]
fillColors: string;
public property [ChartDefaults]
strokeColors: string;
public property [ChartDefaults]
strokeWidth: uint;
public property [ChartDefaults]
markers: ChartMarkers;
public property [ChartDefaults]
barWidth: uint;
public property [ChartDefaults]
pointMaxHeight: uint;
public property [ChartDefaults]
pointDistance: uint;
public property [ChartDefaults]
seriesSpacing: uint;
public property [ChartDefaults]
nrPoints: uint;
Number of Points for ExprSeries
public export interface
export interface BaseChartTaskParams extends AnyParams{ }
Parameters for both Axis Charts and Pie Charts.
public property [BaseChartTaskParams]
chartType?: ChartTypes | string;
Defines the type of chart.
If it's mixed it uses chartTypes
public property [BaseChartTaskParams]
data: SeriesData[];
List of series of data points.
Each series much have the same number of data points.
public property [BaseChartTaskParams]
animeSelector?: string;
Set with a unique virtual selector, to be used another addAnimations to animate the chart.
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 BeamToIX.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
}],
}]);
public property [BaseChartTaskParams]
title?: string | ExprString | ChartTitle;
Defines the chart title.
At the moment is only supported horizontal top or bottom titles.
public property [BaseChartTaskParams]
legend?: ChartLegend;
Defines the chart legend.
At the moment is only supported stacked left or right top legend.
public property [BaseChartTaskParams]
fillColors?: string | string[] | string[][];
Interior Color used by area, bar and pie charts.
public property [BaseChartTaskParams]
strokeColors?: string | string[] | string[][];
Outline Color used by area, bar and pie charts, and line color for line chart.
public property [BaseChartTaskParams]
strokeWidth?: uint | uint[] | uint[][];
public export interface
export interface PieChartTaskParams extends BaseChartTaskParams{ }
Parameters used by Pie Charts.
Pie Charts provide the following animators:
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.
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.
public property [PieChartTaskParams]
isClockwise?: boolean;
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:
public property [AxisChartTaskParams]
chartTypes?: (ChartTypes | string)[];
Chart Type per series. Use only if chartType is mixed.
example: : [BeamToIX.ChartTypes.bar, BeamToIX.ChartTypes.bar, BeamToIX.ChartTypes.line]
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'] }
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'] }
public property [AxisChartTaskParams]
markers?: ChartMarkers;
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.
public property [AxisChartTaskParams]
pointMaxHeight?: uint | ExprString;
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.
public property [AxisChartTaskParams]
seriesSpacing?: uint | ExprString;
x space between two bars. Used only in bar charts.
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.
public property [AxisChartTaskParams]
xAxis?: ChartLine;
public property [AxisChartTaskParams]
yAxis?: ChartLine;
public property [AxisChartTaskParams]
y0Line?: ChartLine;
public property [AxisChartTaskParams]
maxValue?: number | ExprString;
public property [AxisChartTaskParams]
minValue?: number | ExprString;
public property [AxisChartTaskParams]
pointHeightStart?: number | ExprString;
public property [AxisChartTaskParams]
deviationStart?: number | ExprString;
public property [AxisChartTaskParams]
sweepStart?: number | ExprString;