Pie Chart

Description

Provides a pie 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
    PieChart_{version}
      {formName}_{widgetPrefix}PieChart
        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 PieChart 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 PieChart Panel Control as hidden and then show it using server-side Javascript e.g.

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

Example: 

function config()
{
  var options = {
    labels: [
      'Oranges',
      'Apples',
      'Pears',
      'Grapes',
      'Blueberries'
    ],
    responsive: true
  };	
  return options;
}

function getData()
{
  /* ----------------------------------------------
    Each data point represents one pie segment.
    Each data point should have a different color
   ----------------------------------------------*/
  var datasets = [{
    data: [
      23,
      134,
      50,
      76,
      12
    ],
    backgroundColor: [
      'orange',
      'green',
      'yellow',
      'black',
      'blue'
    ],
    label: 'Dataset 1'
  }];
  return datasets;	
}

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 = {
    data : [],
    backgroundColor : []
  };

  var stmt = "select product_sales, product_color from sales where year='2018'";
  services.database.executeSelectStatement(DBSOURCE, stmt, function(db)
  {
    datasets.data.push(db.product_sales);
    datasets.backgroundColor.push(db.product_color);
  });
  
  return datasets;
}