Custom Charting Variables

Custom Charting Variables enable you to dynamically connect the result set from your reports to the variable names in the JavaScript code for charting. This article describes how this is done.

1. The Problem

For some JavaScript charting libraries, your JavaScript code references specific field names for charting. I.e., the property field of a JavaScript object that contains your dataset for charting. This occurs in d3 charting and other libraries based on d3, such as nvd3, rickshaw. However, the result set from your reports are returned in a specific column order with specific column names. To ensure that the correct result set columns are applied to the correct field names in your JavaScript chart, use Custom Charting Variables.

1.1. JavaScript code references specific field names

In the example for d3 Line chart below, the JavaScript code references the field name of "column1" and "column2".

var line = d3.svg.line().x(function(d) {
    return x(d.column1);
}).y(function(d) {
    return y(d.column2);
});

1.2. Reports return a result set with specific field names

In the example below, the report returns a data result set with field names "Date" and "total_units"

Reports return a result set with specific field names

2. Solution

Apply Custom Charting Variables to your chart

2.1. JavaScript charting code uses Custom Charting Variables

The example snippet shows how the JavaScript code uses the Custom Charting Variables to connect the fields in the result set of the report to the fields in the JavaScript code for charting

var chartProperties = insightChart.getCustomVars();
// column 1 will be treated as a date
// column 2 will be treated as a value
data.forEach(function(d) {
    d.column1 = parseDate(d[chartProperties.column1]);
    d.column2 = +d[chartProperties.column2];
});

2.2. Custom Charting Variables applied to report

Then for each report, the designer configures Custom Charting Variables to connect the report result set fields to the JavaScript charting fields. In this example, the "Date" field is configured for the "column1" field in the JavaScript chart, and the "total_units" field is used in the "column2" field in the chart.

Custom Charting Variables applied to report

0 Comments

Add your comment

E-Mail me when someone replies to this comment