Home

Welcome to the svyChartJS wiki!

This wiki provides comprehensive documentation for using the svyChartJS web-component, which allows you to display a chart utlizing the Chart.JS library within Servoy's NGClient.

Getting Started

First import the component using one of the release binaries or via Servoy's Web Package Manager.

If you would like to see the component in an example install the included solution, svyChartJSExample.servoy.

Example Usage

First add the component to a form by dragging it into the form using the Palette Wizard. It should be under ChartJS (chart).

If using a custom dataset (non-foundset) you can setup a simple pie chart by doing the following:

//Your data node object which requires a type and the data.
var data = {
	type: 'pie',
	data: {
		labels: ["Red",
		"Green",
		"Yellow"],
	datasets: [{
		data: [300, 50, 100],
		backgroundColor: [
                      "#F7464A",
		      "#46BFBD",
		      "#FDB45C"],
		hoverBackgroundColor: [
                      "#FF5A5E",
		      "#5AD3D1",
		      "#FFC870"]
		}]
	}
}

//Initialize the chart by using setData
elements.chart.setData(data);

To add options to a chart you can do the following :

//The options object
var options = {
	responsive: false,
	scales: {
		xAxes: [{stacked: true}],
		yAxes: [{stacked: true}]
	}
}
//call the api to set the options
elements.chart.setOptions(options);

Chart Customization

The ChartJS library has great potential for customization. By passing in your own modified options or by using additional plugins. We will try and support some of these options on a case by case basis. Please post an issue for any feature requests which are relevant.

If you need to use callback functions as a part of your options object. You can modify use the following method:

//As Servoy sanitizes functions from server side we are not able to use callback functions like normal:
//Instead of passing in a normal function like below:
var label_callback = function (tooltip,data) {
return ' $'+data.datasets[0].data[tooltipItem.index]; }

//You will need to use a custom object for callbacks functionality to work:
//All functions require an isFunction(set to true), params(your parameters), and expression key/value pair

label_callback = {
      isFunction: true,
      params: ['tooltipItem', 'data'],
      expression: "return ' $'+data.datasets[0].data[tooltipItem.index];"
}

var options = {
	tooltips: {
		callbacks: {label: label_callback 
		}
	}
}
//call the api to set the options
elements.chart.setOptions(options);

For additional options and documentation please refer to the official ChartJS docs.

API Documentation

Method Summary

drawChart

Force the chart to (re)Draw if for some reason it has not.

refreshChart

Force the chart to update if it's options were changed.

setData

Setup the chart's data. (This will automatically initialize and draw the chart)

Params

Type	Name	Summary	Required
Object	data	options object which requires both a type and data key value { type : String, data : Object }	Required

setOptions

Setup the chart's options. (This will automatically refresh the chart if it already exists)