Line Chart

Description

Provides a line chart using Chart.js.

Installation

Drag the widget from the Widgets View onto the page. This will add the UI element of the widget to the page and also create the following directory structure in the Installed Widgets Project:

Installed Widgets
  InstalledWidgets
    LineChart_{version}
      {formName}_{widgetPrefix}LineChart
        Scripts
          configure

Getting Started

This widget uses the Chart.js library. The display of the chart is activated using a jQuery ready event on the LineChart Panel Control. As distributed, the chart will load and display each time the page is displayed. To change this to display the chart as a result of a user action, mark the LineChart Panel Control as hidden and then show it using server-side Javascript e.g.

controls.{prefix}LineChart.show();

The widget is configured using the configure script (see next section). As distributed, this script contains a getData() function which loads the widget with dummy data consisting of a selection of random numbers. You will need to change this load the data you want to chart. You will also need to change the config() function to set the chart labels and change any other display options.

Configuration

All configuration is done in the configure script which has the following two functions:

config :    chart display options
getData : provides the source data to be charted

Additional Notes

1. The config() and getData() functions run in the context of the widget. To address elements in the form e.g. to read data from a Database Resource, all script refererences must be prefixed with "form." e.g.

form.tables.users.fetchTable();
form.resources.products.fetch(); 

Example: 

function config()
{
   var options = {
	responsive: true,
	labels	: [
	   'Jan', 
	   'Feb', 
	   'Mar', 
	   'Apr', 
	   'May', 
	   'Jun', 
	   'Jul'
        ],
	displayTitle : true,
	titleText : 'Line Chart',
	xAxesLabel : 'Month',
	yAxesLabel : 'Values',
	xAxesGridLines : true,
	yAxesGridLines : true,
	yAxesStepSize	: 10
}
   return options;
}

function getData()
{
	var dataset = [];
	var data;
	
	// Data values for the first line 
	data = 
	{
			label: 'Product 1',
			backgroundColor: '#00008b',
			borderColor: '#00008b',
			data: [ -71, 33, -3, 95, -68, -21, 10 ],
			fill: false,
	};
	dataset.push(data);
	
	// Data values for the second line
	data =
	{
			label: 'Product 2',
			backgroundColor: '#006400',
			borderColor: '#006400',
			data: [ -55, -37, -42, 85, 41, 22, 36 ],
			fill: false,
		};
		dataset.push(data);
		return dataset;
}

Source data from database example

This is an example of how the data could be sourced from a database. 

function getData()
{
	var DBSOURCE = 'MY_DATABASE_CONNECTION';   
	var datasets = [];
	var productSql = ' select product_id, product_name from products';
	services.database.executeSelectStatement(DBSOURCE, productSql, function(products)
	{
		var dataset = [];
		var salesSql = "select jan,feb,mar,apr,may,jun,july from monthlySales where product_id ='" + products.product_id + "'";
		services.database.executeSelectStatement(DBSOURCE, salesSql, function(sales)
		{
			var color = "#00008b";
			dataset.label = products.product_name;
			dataset.backgroundColor = color;
			dataset.borderColor = color;
			dataset.data = [];
			dataset.data.push(sales.jan);
			dataset.data.push(sales.feb);
			dataset.data.push(sales.mar);
			dataset.data.push(sales.apr);
			dataset.data.push(sales.may);
			dataset.data.push(sales.jun);
			dataset.data.push(sales.july);
		});
		datasets.push(dataset);
	});
	return datasets;
}