Help & DocumentationCreating ContentJavaScript Charting ExtendingAdd Custom JavaScript Chart to Legacy Reports

Add Custom JavaScript Chart to Legacy Reports

Once you get going with JavaScript charting, you will probably want to start creating some of your own. In some cases you will want to create a new chart type by adding a JavaScript chart template. E.g., Line, Bar, Pie, and any more complex ones you want. All you really have to do is provide the JavaScript code.

In this example, we create a nvd3 Pie chart.

If you are working with Dataset Reports, please see this article for information relevant to new versions of Metric Insights:  Adding Custom Charts to Dataset Reports.

1. Access Admin > System > Charting Options

  1. Activate the Templates list
  2. [New Chart Template]

2. Javascript Chart Templates

Enter a name for the new template and choose an existing Charting Engine. In this example we are building a nvd3 Pie template using the newly added nvd3 charting engine.

3. JavaScript Template Editor opens

Enter JavaScript code

4. JavaScript Code

// http://nvd3.org/ghpages/pie.htmlvar chartProperties = insightChart.getCustomVars();
var data = insightChart.getDatasetForD3();
var data3 = []; 
data3.push({"values":data});
nv.addGraph(function () {
    var chart = nv.models.pieChart()
         .x(function (d) { return d[chartProperties.column1]; })
         .y(function (d) { return d[chartProperties.column2]; })
         .donut(false)
         .showLegend(true)
        .showLabels(true);
    d3.select("#chart_div svg")
        .datum(data3)
         .transition().duration(100)
         .call(chart);

     return chart;
});

5. JavaScript Template Editor

Enter JavaScript code

6. Add Custom Charting Variable

If your JavaScript uses custom variables then add them. Click Add New Custom Charting Variable and enter then name of the variable used in the JavaScript code. In this example, "column1" is the name of a custom variable in the JavaScript code. And supply a Default Value for the column name that reports typically return for this value. This can be easily overridden by the chart at charting time, which you will see later in this example.

7. Add Custom Charting Variable

In this example, "column2" is the name of a custom variable in the JavaScript code. And supply a Default Value for the column name that reports typically return for this value. This can be easily overridden by the chart at charting time, which you will see later in this example.

8. CSS Code

Enter styling code for the JavaScript chart in the CSS Code section

9. Enable the JavaScript Chart Template and Save

Click check box to enable the JavaScript Chart Template, and click the Save button

10. Use the Chart Type in a report

This section shows how to apply the chart type to a report. This is just provided here for completeness. If you already know how to apply a JavaScript chart to a report then you can skip this section.

10.1. Choose a Report that contains category data

Choose a report that contains category data. Category data could be time values that are discrete values. In this example the country column contains the category data. Also 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.

10.2. Add the Chart

Click on Add Chart button

10.3. Choose the Chart Type you created

Choose the chart type you just created in the JavaScript Chart Template screen. In this example, Select nvd3 Pie for Chart Type

10.4. Give chart a name

Enter name for the chart

10.5. Adjust Custom Charting Variables

Click to edit each of the Custom Charting Variables to match the names of your columns

10.6. Adjust Custom Charting Variables

In this example change the Custom Charting Variable for column1 to match the column name country

10.7. Adjust Custom Charting Variables

In this example change the Custom Charting Variable for column2 to match the column name total units

10.8. Adjust Custom Charting Variables

The Custom Charting Variables for column1 and column2 match the column names "country" and "total units"

10.9. Save and Preview the Chart

Click Save and Preview to see the chart