Parent | Child | Previous | Next
 

How to Base a Chart on a Javascript Data Series

Description

The data series used to create a chart can be generated using JavaScript.

Discussion

A Javascript Data Series is useful for charts that use data that is pulled from controls on the UX Component. The JavaScript that calculates the data series can read data from controls on the UX Component using the {dialog.object}.getValue method. This data can be combined into a data series with one or more subseries that is then used by the Chart control to display a chart.

To define a data series based on a JavaScript data source, select Javascript for the data series Data Source Type in the Data Series Builder. The Javascript function property defines the JavaScript function to call to calculate the data series. Multiple subseries can be returned by the JavaScript function. Each subseries must be specified in the Subseries names property for the data series.

Defining the Javascript Data Series Function

The JavaScript function that defines the data series must return data in one of two formats: a JSON array or crlf delimited list of pipe delimited data.

  • Returning a JSON Array

    The following function returns two subseries, sales and region, as a JSON array. The subseries name must exactly match the subseries specified in the Subseries names property for the data series.

    function jsData() {
    var a = [];
    a.push({sales: 23, region: 'east'});
    a.push({sales: 13, region: 'west'});
    a.push({sales: 3, region: 'south'});
    a.push({sales: 9, region: 'north'});

    return a;
}

  • Returning a CR-LF Delimited List

    The same data series created by the function above can be defined as a CR-LF delimited list using pipes to separate the subseries. The order of the data in the series must match the order of the subseries defined in the Subseries names property.

    function jsData() {
    var a;
    a = "21|east" + "\n";
    a += "13|west" + "\n";
    a += "3|south" + "\n";
    a += "9|north";

    return a;
}

Rendering a Chart Based on a Javascript Data Series

A chart that is based on a Javascript data series will not render anything on the initial load of the UX Component. This is because the Chart control requires an Ajax callback to be made in order to calculate the chart. This can be accomplished by calling the Chart control's refresh method:

var cObj = {dialog.object}.getControl('Chart1');
cObj.refresh();

When the Ajax callback is made to refresh the Chart control, the Javascript data series is calculated. After the data series is calculated, the Chart control is updated and the chart will appear.

For more information about how to create a chart based on a Javascript data series, watch the videos below:

Understanding the Javascript Data Series

See Also