Chart

This tag defines a Silk Chart component that implements the ChartJS object from https://www.chartjs.org.

This class works standalone and is not a container.

Tag Definition

Used standalone:

<silk:Chart
  id=""
  title=""
  titlePlace="top"
  type="bar"
  dataSource=""
  labelColumn=""
  dataColumn=""
  backgroundColor="#1886C1"
  grid="true"
  legend="false"
  renderIf=""
  parentList=""
  indexAxis="x"
  tooltip="false"
  dataLabels="true"
/>

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>

Properties

^*Required property.

id^*

The chart's unique identifier. Default Value: Empty.

title

Used to define the chart title. Default Value: Empty.

titlePlace

Sets the title's position Default Value: top.

type

Sets the chart's type. The values can be: bar, line, pie, and doughnut. Uses values from https://www.chartjs.org/docs/latest/charts/. Default Value: bar.

dataSource^*

Sets the dataSource providing the data to be used to populate the chart. Default Value: Empty.

labelColumn^*

Sets the column from the dataSource providing the chart's labels. Default Value: Empty.

dataColumn^*

Sets the column from the dataSource providing the chart's values. Default Value: Empty.

backgroundColor

Sets the chart background color. Default Value: #1886C1.

grid

Indicates if the chart will show a grid. Default Value: true.

legend

Indicates if the chart will show the legend. Default Value: false.

renderIf

It contains the logic sentence defining whether the component should be rendered. The logic statement's explanation is in the Server Code Logic documentation. Default Value: Empty.

parentList

Defines the list triggering the chart's loading process. Default Value: Empty.

indexAxis

Sets the chart index axis. Default Value: x.

tooltip

Sets if the tool tips will be displayed Default Value: false.

dataLabels

Sets whether data labels will be displayed.< Default Value: true.