Help & DocumentationJavaScript Charting ExamplesCreate Highcharts Line Chart from Pivot Table

Create Highcharts Line Chart from Pivot Table

In many cases your reports return multiple columns of data. If you want to create simple two axis 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 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 is slightly different in Version 3.

1. Select or Create a Report

In this example, we use an existing report that returns multiple columns of data

2. Add Pivot

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

3. Define Pivot Parameters

Define Pivot Parameters

In this example, we pivot on the calendar_date for a time series and will display just the totals of the sale dollars.

4. Full Pivot Editor Displays

Input a meaningful Name and adjust any values on the Pivot Editor as needed

NOTE:  In this example, the defaults are left as is. The two columns for this Pivot are "calendar date" and "total amount"

5. Associate a Chart with the Pivot Table

  1. Navigate to the Pivot Charts tab
  2. Click "+ Chart" button

5.1. Select Chart type

Select Chart type

Select Highcharts Line for 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. Published Chart Displays in Report Viewer

0 Comments

Add your comment

E-Mail me when someone replies to this comment