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: {
		x: {stacked: true},
		y: {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.

Support for Outlabels plugin

https://piechart-outlabels.netlify.app/formatting

Option callbacks

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

//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 (context) {
	return ' $' + context.dataset.data[context.dataIndex];
}

//You will need to generate a browser function, for this you need to use clientutils.generateBrowserFunction and pass the function as a string.
var label_callback = clientutils.generateBrowserFunction("function(context) { return ' $'+context.dataset.data[context.dataIndex] }");

var options = {
	plugins: {
		tooltip: {
			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.

Using with responsive forms

When using the component with responsive forms we need to add some additional CSS styling to the component. In particular the height property must be greater than zero.

API Documentation

Method Summary

generateLegend

Returns a custom html stringed version of the legend.

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

setPlugin

Register a plugin. (This method must be called prior to drawing the chart)

Params

Type	Name	Summary	Required
Object	plugin	plugin object	Required

An example of a chart plugin object can be found here.

setOptions

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

Params

Type	Name	Summary	Required
Object	option	options object	Required

clearChart

Clears the chart.

Events

Event	Params	Return	Description
onClick		dataset_index (if using multiple datasets), index, label, value, event	Fired when clicking on a point
onChartDrawn			Fired when the chart is rendered

Component Properties

Type	Name	Summary	Required
Object	foundset	Using the foundset's data for chart	Optional
String	LegendLabel	Show a default title of chart	Optional
Array	backgroundColor	An array of colors to use for displaying the background of each series	Optional
String	borderColor	Color to use for displaying the chart's border	Optional
String	borderWidth	Border width of an data value	Optional
String	hoverBackgroundColor	Background color of hovered selection	Optional
String	hoverBorderColor	Border color of hovered selection	Optional
String	hoverBorderWidth	Border width of an data value of hovered selection	Optional
String	styleClass	Style class of the component's wrapper	Optional