Create Custom Chart

Sometimes you’re going to run into a custom reporting requirement that might require some custom scripting to collect data from your ServiceNow instance exactly how you need it. One of the core reasons VividCharts was founded was to cut down the data visualization development time for custom charts within ServiceNow. Below, we’ll walk through the various components of creating your own custom chart type. Notes: this requires knowledge of scripting in ServiceNow; you must set your current application to VividCharts before updating or creating chart types.

First, navigate to VividCharts > Chart Types and search for the Donut chart type. Click into this record once you find this and we’ll talk through the various components of the form.

A chart type is what is referenced when creating a VividCharts chart under a VividCharts dashboard. These chart types are what actually collects the data according to various options set on the chart form. The idea behind this is that we are able to modularize and separate the collection of data from the actual visualization of the data. This allows us to reuse the same chart widget, such as the Donut chart, with different collections of data.

When you’re creating a new chart type, you can work off of one of the out-of-the-box chart types and then do an ‘Insert’ to make a copy of this chart type. This will give you a good starting point for how to format your data. Below are the core components of creating a new chart type as well as a screenshot of one for reference.

Name the name of the new chart type. Be sure not to use special characters here.

Widget the intended Service Portal chart widget for this chart type. This is mainly for reference.

Required fields if you’re planning on pulling values from the chart records, you can define which fields are mandatory on the chart record. To access these values from your script, use the following notation: ‘chart.group_by’.

Optional fields if you’re planning on pulling values from the chart records, you can access these values from your script, use the following notation: ‘chart.group_by’.

Script you can put whatever script you need to in here, but if you’re using an existing chart type as a template be sure to replicate how data is being pushed into the chartData array. This will become the data that’s passed to your chart widget. In this example, we are simply pushing an object containing the name, value, and query (for click-through purposes) of each individual donut slice.