Skip to content
cPecican edited this page Jul 18, 2024 · 48 revisions

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