Help & DocumentationJavaScript Charting ExamplesCreate Highcharts Multi Series Line Chart from Pivot Table

Create Highcharts Multi Series Line Chart from Pivot Table

In many cases your reports return multiple columns of data. If you want to perform multi series reporting on this data with a JavaScript chart, you can create a Pivot Table on the report and then associate a chart with that Pivot Table.

This article provides a step by step example of creating a Highcharts Multi Series Line chart using the results from a Pivot Table.

Highcharts documentation on Line Chart API:

http://www.highcharts.com/demo/line-basic

http://api.highcharts.com/highcharts#plotOptions.line

Note:  The format of the Report and Chart Editors are slightly different in Version 3.

1. Choose or create a Report that contains a time series of multiple items

In this example, the calendar_date column contains the time series data.

2. Add Pivot

  1. Navigate to Charts and Pivots tab
  2. Click "+ Pivot" button

3. Define Pivot Parameters

Define Pivot Parameters
  1. Set Row values
  2. Choose Column values
  3. Select Aggregation method
  4. Choose Column to aggregate

Save

4. Full Pivot Editor Displays

  1. Input a meaningful Name
  2. Adjust any values on the Pivot Editor

Save

5. Associate a Chart with the Pivot Table

Click "+ New Chart" button.

5.1. Select Chart Type

Select Chart Type
  1. Select Highcharts Line as Chart type

Save

6. Full Chart Editor displays

  1. Input a meaningful name for your chart
  2. Optionally edit X-axis title
  3. Optionally edit Y-axis title

Save & publish

7. Chart displays in Report Viewer

0 Comments

Add your comment

E-Mail me when someone replies to this comment