Create d3 Brush Chart - Time Series

This article provides a step by step example of creating a d3 Brush chart.

d3 documentation on Brush (Area) Chart API:

1. Choose a Report that contains a Time Series

Choose a report that contains a time series. In this example the calendar_date column contains the time series data. In addition, limit the data collected to two columns. If you have a report with more than two columns, you can add a pivot (Add Pivot button) to limit the data to two columns OR remove the column from the SQL statement if not needed in the report.

2. Adjust Display Name for chart columns

Display Names may be changed by clicking on the name in the Display Name column

Ensure that the Display Name for the columns that you will be charting do not contain spaces


3. Add the Chart

  1. Navigate to the Charts and Pivots tab
  2. Click the Add Chart button

4. Set Chart type

Set Chart type
  1. Select d3 Brush for Chart Type


5. Name the Chart

6. Adjust Custom Charting Variables

  1. Click the gear to edit each of the Custom Charting Variable Values to match the names of your columns
  2. Set the Value to the Display Name used in Step 2 above


More information about Custom Charting Variables can be found here

7. Save and Publish

8. Chart displays in Report Viewer