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 http://bl.ocks.org/mbostock/3883245
1. Select or Create Report
In this example, we use an existing report that returns multiple columns of data
2. Add Pivot
- Navigate to Charts and Pivots tab
- 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
- Navigate to the Pivot Charts tab
- Click New Chart button
5.1. Select Chart type
- Select d3 Line (d3)
Save
6. Full Chart Editor Displays
- Input a meaningful name for your chart
- Optionally edit X-axis title
- Optionally edit Y-axis title
Save
7. Adjust Custom Charting Variables
- Navigate to the Custom Charting Variables tab
- Click the Edit icon for each of the variables
- Adjust the Value to match the names of the columns in the pivot
Save
8. Preview the Chart
8.1. Review the Chart
If the chart meets expectations
- Close preview
- Enable & publish report
