Custom Chart Scripts

[VAIGAI_KOTHANDA]

Hi ,

We have a requirement to create a   custom chart to display a bar graph of the number of created, resolved, and open.   Open is defined as not in 'resolved' or 'closed' incident state.   These bar graphs are grouped by location.   The date used is current date.   Use a filter on the assignment group to capture only those incidents that are assigned to an assignment group.

The chart will display a Graph that has three bars that represent number created, resolved, and open for each location for that day (the date the report is being generated)

can you please guide on this requirement.

Regards,

Vaigai K

[tltoulson]

Hi Shahid,

A line or trend chart is fairly simple.   In the UI Page, simply change the HighCharts object's type from 'column' to 'line'.   This also means you could make it dynamic using a user preference or some other dynamic selection by using another JEXL expression if you wanted to.

HighCharts has many other visualization types and customization options that you can use.   You will need to check their demo's, documentation, and examples on the web to see how they work but most of the chart types use the same category array / series array approach as the one demonstrated in the video.   You just have to adjust the GlideAggregate and series / category building logic to get the data you want.

Pivot table is a different story.   HighCharts has no native Pivot Table and building a pivot table takes quite a bit more work.   I don't have a standard implementation for that one.   You could either try downloading a client library that handles making pivot tables and include it in the UI Page as well or you could try hand coding by using Jelly + HTML Tables.

Also, you can always add more UI Pages to the Widget's section record.   So you could create a bunch of different charts with different UI Pages and add each to the Widget's section function like this:

function sections() {

   return {

       'Widget' : { 'type' : 'widgetname' },

         'Widget2' : { 'type' : 'widgetname2' },

         'Widget3' : { 'type' : 'widgetname3' }

   };

}



function render() {

   var type = renderer.getPreferences().get("type");

   var gf = new GlideForm(renderer.getGC(), "render_gadget_" + type, 0);

   gf.setDirect(true);

   gf.setRenderProperties(renderer.getRenderProperties());

   return gf.getRenderedPage();

}



function getEditLink() {

   return "sys_ui_page.do?sysparm_query=name=render_gadget_" + renderer.getPreferences().get("type");

}

[shahid1]

Hi Travis,

This information was so helpful.

We were successful in building our own charts.

Thanks for the "to the point" video.

But we have some requirement which tells us to built pivot tables as below:-

Custom Chart Scripts

Custom Chart Script:

Please let us know how we can change the Bar or Line or Trend chart to a Pivot table which looks like a table? (Please refer the above link)

If you could help us here then it would be great.

Thanks,

Shahid

[gyedwab]

Hi Shahid,

You can do this codelessly with Explore Analytics.

Here's an example of the bar chart:

https://my.exploreanalytics.com/pub/view/2a03ed1e65524c6bbf5a1c210298e126

These can be published to the ServiceNow homepage in a live, drillable gauge.

You can also do the same as a multi-level pivot:

https://my.exploreanalytics.com/pub/view/3ba0ee93d3234d6090319f4633bd68c2

Again, available live, drillable, and without code. You can sign up for a free trial here

[tltoulson]

Hi Shahid,

I'm a little short on time today but I didn't want to leave you guys hanging without an answer.   I would actually recommend using the Native Reporting engine in this case.   The way to do it, is to create the fields that you need to make the pivot tables as string fields (Hour and Date).   Then, create a business rule on insert and populate those two string fields.   Then you can create a native pivot report in ServiceNow and set the Column and Row appropriately.   You could do a custom UI Page as before, but storage is cheap and business rules are more maintainable than custom UI Pages.

[VAIGAI_KOTHANDA]

Hi Travis,

Thanks a lot

This Code works fine.but we are facing one problem here. Its showing the Location based on the tree structure.

For Example: BWH is the main Location under that   Brigham Cir and under that floor Ws is there.

(BWH/1 Brigham Cir/floor Ws)

so in the report. its showing 3 columns of location(BWH,BWH/1 Brigham Cir,BWH/1 Brigham Cir/floor Ws).

But we need all these 3 locations should show in the same column(BWH).

So we tried to put dot walk notation in the script. but its returning empty value.

var ga = new GlideAggregate('incident');  

•               ga.addEncodedQuery(allQuery);  
•               ga.addAggregate('COUNT');  
•               ga.groupBy('location.company.name');  
•               ga.orderBy('location.company.name');  
•               ga.query();  
•               while (ga.next()) {  
•                       categories.push(ga.location.company.name+ '' || '(empty)');  
•               }  

can you please guide us to achieve this.

Thanks and Regards,

Vaigai K

Shahid Islam