Help & DocumentationJavaScript Charting ExamplesCreate d3 Line Chart - Time Series

Create d3 Line Chart - Time Series

This article provides a step by step example of how to create a d3 Line chart.

d3 documentation on Line Chart API can be viewed at http://bl.ocks.org/mbostock/3883245

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

Save

3. Add the Chart

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

3.1. Set Chart type

Set Chart type
  1. Select d3 Line

Save

4. Full Chart Editor Displays

  1. Set Chart NameSelect Region data column as X-axis values
  2. Set X-axis title
  3. Set Y-axis title

Save & preview

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

Save

More information about Custom Charting Variables can be found here

6. Preview Chart

If the chart meets expectations:

  1. Close preview
  2. Update live report

7. Chart displays in Report Viewer

0 Comments

Add your comment

E-Mail me when someone replies to this comment