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

Name	Type	Description
$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.

Param	Type	Default	Description
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

Param	Type	Description
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

Param	Description
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

Param	Description
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

Param	Type	Description
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

Param	Type	Description
size	Object	The chart's new size.