Add new JavaScript Chart Type

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.

1. Administration Menu

At the Administration Menu click on JavaScript Chart Templates under the JavaScript Charting section

2. Javascript Chart Templates

On the JavaScript Chart Templates screen click Add New Chart Template

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

4. JavaScript Template Editor

Enter JavaScript code

5. 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;
});

6. JavaScript Template Editor

Enter JavaScript code

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

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

9. CSS Code

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

10. Enable the JavaScript Chart Template and Save

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

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

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

11.2. Add the Chart

Click on Add Chart button

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

11.4. Give chart a name

Enter name for the chart

11.5. Adjust Custom Charting Variables

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

11.6. Adjust Custom Charting Variables

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

11.7. Adjust Custom Charting Variables

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

11.8. Adjust Custom Charting Variables

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

11.9. Save and Preview the Chart

Click Save and Preview to see the chart

0 Comments

Add your comment

E-Mail me when someone replies to this comment