ChartJS
The ChartJS Class provides properties, methods, and events to interface with the HTML tags generated by the silk:Chart component. This object extends the functionality of the popular Chart.js library (https://www.chartjs.org).
Data Source
The data is provided by a silk:DataProvider, which should contain two columns: one with labels and another with values.
<silk:Chart id="chart" dataSource="dataDP" labelColumn="state" dataColumn="population" />
<silk:DataProvider id="dataDP" servicePath="..." />JavaScript Object
SilkBuilder also creates a companion JavaScript object using the ChartJS class to provide JavaScript programmatic interaction. This object will have the same name as the component's ID.
<silk:JQcode>
chart.on("click", function(index, value, label){
silk.alert(label+":"+value);
});
</silk:JQcode>Kind: global class
Properties
$target
Object
jQuery object referencing the HTMLtag wraping the chart.
$canvas
Object
jQuery object referencing chart's canvas.
$title
Object
jQuery object referencing chart's title.
$chartObject
Object
jQuery object referencing chart's object.
config
Object
Object containing the chart configuration.
Constructor
new ChartJS(id, option)
Returns a ChartJS instance.
id
String
Unique identifier.
option
Object
Object containing the configuration.
[option.chartType]
String
bar
Types: bar, line, pie, and doughnut. The default value is "bar". The chart type is from https://www.chartjs.org/docs/latest/charts/.
[option.dataSource]
String
Unique identifier of the dataProvider used to fill the Chart.
[option.labelColumn]
String
The name of the column that defines the characters' labels.
[option.dataColumn]
String
The name of the column that defines the char's data.
[option.backgroundColor]
String
#1886C1
The chart's background color.
[option.showGrid]
String
true
Defines if the chart will show a grid.
[option.showLegend]
String
false
Defines if the chart will show the legend.
[option.indexAxis]
String
x
Sets the chart's index axis.
[option.tooltip]
String
true
Defines if the chart will show the tooltips.
[option.dataLabels]
String
true
Defines if the chart will show data labels.
Methods
hide()
Hides the chart.
Kind: instance method of ChartJS
load()
Loads the data from the dataSource, a silk:DataProvider, and generates the chart graphic.
Kind: instance method of ChartJS
on
Load events to respond to the chartJS's interactions. To set an event, use this code: ChartJS.on(<eventName>, function(){<code>}).
Kind: instance property of ChartJS
eventName
String
The event's name.
eventFunction
function
The function to be triggered.
setTitle(title)
Sets the Chart's title.
Kind: instance method of ChartJS
title
The chart's title.
show()
Shows the chart from being hidden.
Kind: instance method of ChartJS
toggle(mode)
Hides or shows the chart based on the provided parameter. If the parameter is not provided, it will invert the current display status. If shown, it will be hidden; if hidden, it will be displayed.
Kind: instance method of ChartJS
mode
True shows and false hides.
Events
on:afterLoad
This event is triggered after ChartJS has loaded the data and generated the graphic. Created with the ChartJS.on("afterLoad", function(){}) method.
Kind: event emitted by ChartJS
on:beforeLoad
This event is triggered before ChartJS loads the data and generates the graphic. Created with the ChartJS.on("beforeLoad", function(){}) method.
Kind: event emitted by ChartJS
on:click (index, value, label)
This event is triggered when a ChartJS data segment is clicked. Created with the ChartJS.on("click", function(index,value,label){}) method.
Kind: event emitted by ChartJS
index
Integer
The dataSource index providing data for the selected element.
value
Numeric
The numeric value of the selected element.
label
String
The label of the selected element.
on:resize (size)
This event is triggered when a ChartJS gets resized. Created with the ChartJS.on("resize", function(size){}) method.
Kind: event emitted by ChartJS
size
Object
The chart's new size.
Last updated