Create d3 Brush 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 using 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 Brush chart using the results from a Pivot Table.

d3 documentation on Brush (Area) 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 & Pivots tab
  2. Click Add Pivot

3. Define Pivot Parameters

In this example, we pivot on the date and display just the totals of the sale Units

4. Full Pivot Editor Displays

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


5. Associate a Chart with the Pivot Table

  1. Navigate to the Pivot Charts tab
  2. Click New chart

5.1. Choose a Chart type

  1. Select d3 Brush as Chart type


6. Full Chart Editor Displays

Accept defaults or optionally change values for:

  1. Chart Name
  2. X-axis title
  3. 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 Displays in Report Viewer