ChartJS

Guide for using svyChartJS in your applications

svyChartJS

To see a live sample of the component you can go here.

Content under construction

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).

You can then simply connect the chart to a foundset and hook up dataproviders and set a label/value. This is the quickest way to setup a chart and bind it to an existing datasource.

If you need to render a custom dataset (non-foundset) you can setup a simple pie chart by doing the following example via some simple javascript.

//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);

Note that when we are using the setData method, we will be overriding the design-time properties of the chart so properties such as backgroundColor that you can set on the element designer will not apply for these charts.

To add additional 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.

svyChartJS Properties

svyChartJS events can be found here.

svyChartJS Events

svyChartJS events can be found here.

svyChartJS API Documentation

svyChartJS API methods can be found here.

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)

setPlugin

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

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)

clearChart

Clears the chart.