Bar Chart

Description

Provides a bar 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
    BarChart_{version}
      {formName}_{widgetPrefix}BarChart
        Scripts
          configure

Getting Started

This widget uses the Chart.js library. The display of the chart is activated using a jQuery ready event configured in HTML Element Properties on the BarChart 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 BarChart Panel Control as hidden and then show it using server-side Javascript e.g.

controls.{prefix}BarChart.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 to 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

The configure script 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,
    legendPosition: 'top',
    displayTitle: true,
    titleText: 'Multiple Dataset Bar Chart',
    xAxesLabelDisplay: true,
    yAxesLabelDisplay: true,
    xAxesLabel: 'Months',
    yAxesLabel: 'Values',
    xAxesGridLines: true,
    yAxesGridLines: true,
    yAxesStepSize: 2						
  }
  return options;
}

config function options:
responsive - should this chart be responsive. Possible option values are either true or false
legendPosition - where should the legend be places on the chart. eg: top or bottom or left or right
displayTitle - should the chart title be displayed. Possible option values are either true or false
titleText - the text that should be displayed as the chart title eg: Bar Chart
xAxesLabelDisplay - should the xAxes label be displayed. Possible option values are either true or false
yAxesLabelDisplay - should the yAxes label be displayed. Possible option values are either true or false
xAxesLabel - the label to be displayed under the xAxes. eg: Months
yAxesLabel - the label to be displayed under the xAxes. eg: $$$
xAxesGridLines - should grid lines be displayed on the xAxes. Possible option values are either true or false
yAxesGridLines - should grid lines be displayed on the yAxes. Possible option values are either true or false
yAxesStepSize - the yAxes step size eg: 2
In this example if the yAxes values ranged from 0 to 40 then we should see displayed
0,2,4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40

function getData()
{
  /* ------------------------------------------------------
  This example supplies some sample data.
  You should replace it with the actual data source when
  the chart is used in a production system
  The initial sample is set to show a single set of bars.
  Comment the singleDataset() line and uncomment
  the multipleDatasets() line to see multiple grouped bars
  ---------------------------------------------------------*/
  var datasets;
  var single = true;
  if(single)
  {
    datasets = loadSingleDataset();
  }
  else
  {
    var datasets = loadMultipleDatasets();
  }
  return datasets;
}

function loadSingleDataset()
{
  var labels = [];
  var sales = [];
  var datasets ={ 
    labels: [],
    datasets : [] 
  };
  
  datasets.labels.push('January', 'February', 'March', 'April', 'May', 'June');
  
  label = 'Product 1 sales';
  sales=[12, 19, 3, 5, 2, 3];	
  backgroundColor = ['rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'];
  borderColor = ['rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)'];
  addDataset(datasets, label, sales, backgroundColor, borderColor)
  
  return datasets
}

function loadMultipleDatasets()
{
  var labels = [];
  var data = [];
  var datasets ={ 
    labels: [],
    datasets : [] 
  };

  datasets.labels.push('January', 'February', 'March', 'April', 'May', 'June', 'July');
  
  label = 'Product 1';
  data=[10, 8, 13, 5, 12, 8];	
  backgroundColor = 'red';
  borderColor = 'red';
  addDataset(datasets, label, data, backgroundColor, borderColor);
  
  label = 'Product 2';
  data=[5, 15, 5, 8, 3, 5];	
  backgroundColor = 'blue';
  borderColor = 'blue';
  addDataset(datasets, label, data, backgroundColor, borderColor);
  
  label = 'Product 3';
  data=[15, 25, 13, 15, 12, 13];	
  backgroundColor = 'green';
  borderColor = 'green';
  addDataset(datasets, label, data, backgroundColor, borderColor);
  
  return datasets;
}

function addDataset(datasetObj, label , data, backgroundColor, borderColor)
{
    var dataset = {
      label : label,
      backgroundColor: backgroundColor,
      borderColor : borderColor,
      borderWidth: 1,
      data: data
    };
    datasetObj.datasets.push(dataset);
    return datasetObj;
}