Area Chart

Description

Provides an area 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
    AreaChart_{version}
      {formName}_{widgetPrefix}AreaChart
        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 AreaChart 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 AreaChart Panel Control as hidden and then show it using server-side Javascript e.g.

controls.{prefix}AreaChart.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,
       smoothing : false,
       labels : [
         'Jan', 
         'Feb', 
         'Mar', 
         'Apr', 
         'May', 
         'Jun', 
         'Jul'
       ],
     displayTitle : true,
     titleText : 'Stacked Area Chart',
     xAxesLabelDisplay : true,
     yAxesLabelDisplay : true,
     xAxesLabel : 'Months',
     yAxesLabel : 'Values',
     xAxesGridLines : true,
     yAxesGridLines : true,
     yAxesStepSize : 50 
  }
  return options;
}

function getData()
{
  var dataset = [];
  var data;

  // Data values for the first line 
  data = 
  {
    label: 'Product 1',
    backgroundColor: 'red',
    borderColor: 'red',
    data: [ 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
    random(200) 
    ],
    fill: 'start',
  };
  dataset.push(data);

  // Data values for the second line
  data =
  {
    label: 'Product 2',
    backgroundColor: 'green',
    borderColor: 'green',
    data: [ 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
      random(200) 
    ],
    fill: 'start',
  };
  dataset.push(data);

  // Data values for the third line
  data =
  {
    label: 'Product 3',
    backgroundColor: "blue",
    borderColor: "blue",
    data: [ 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
      random(200), 
      random(200) 
    ],
    fill: 'start',
  };
  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, product_color from products';
    services.database.executeSelectStatement(DBSOURCE, productSql, function(product)
    {
        var dataset = []
        var salesSql = "select jan,feb,mar,apr,may,jun,july from monthlySales where product_id ='" + product.product_id + "'";
        services.database.executeSelectStatement(DBSOURCE, salesSql, function(sales)
        {
            var color = 'blue';
            dataset.label = product.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;
}