Create d3 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 d3 Line chart using the results from a pivot table.

d3 documentation on Line Chart API can be found at

1. Select or Create 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 Add Pivot button

3. 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

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 New Chart button

5.1. Select Chart type

  1. Select d3 Line (d3)


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


7. Adjust Custom Charting Variables

  1. Navigate to the Custom Charting Variables tab
  2. Click the Edit icon for each of the variables
  3. Adjust the Value to match the names of the columns in the pivot


8. Preview the Chart

8.1. Review the Chart

If the chart meets expectations

  1. Close preview
  2. Enable & publish report

9. Completed Chart Displayed in Report Viewer