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

[VAIGAI_KOTHANDA]

Hi Travis,

Thanks for the information.

I think we need to create Custom Reports onllt. because currently we are using 'Eureka' version.

Need to create a custom chart to display a bar graph of the number of created, closed,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 that ends in "pec"

This is our requirement. can you please guide us.

Thanks,

Vaigai K

[tltoulson]

Hi Vaigai,

I put together a video tonight that covers the high level process of putting together a custom chart and demonstrates some functioning code.   I hope I pronounced your name correctly.   Below is the UI Page used in the video.   I hope this helps.   Please let me know if anything is confusing or if you need more detail on any aspect of it.   Custom reports have a lot of moving parts.

Episode 1 - Custom Charts - YouTube

Kind regards,

Travis Toulson

UI Page

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

       <script></script>

       <g2:evaluate>

               var openQuery = 'stateIN1,2,3,4,5',

                       resolvedQuery = 'state=6^resolved_atONToday@javascript:gs.daysAgoStart(0)@javascript:gs.daysAgoEnd(0)',

                       closedQuery = 'state=7^closed_atONToday@javascript:gs.daysAgoStart(0)@javascript:gs.daysAgoEnd(0)',

                       allQuery = 'stateIN1,2,3,4,5^NQstate=6^resolved_atONToday@javascript:gs.daysAgoStart(0)@javascript:gs.daysAgoEnd(0)^NQstate=7^closed_atONToday@javascript:gs.daysAgoStart(0)@javascript:gs.daysAgoEnd(0)',

                       ga,

                       categories = [],

                       series = [];





               // Setup Categories

               var ga = new GlideAggregate('incident');

               ga.addEncodedQuery(allQuery);

               ga.addAggregate('COUNT');

               ga.groupBy('location');

               ga.orderBy('location');

               ga.query();

               while (ga.next()) {

                       categories.push(ga.location.getDisplayValue() + '' || '(empty)');

               }





               // Reusable function for building the 3 Series

               function getSeries(name, index, query, categories) {

                       var ga = new GlideAggregate('incident'),

                               data = [],

                               i,

                               cat;





                       // Fill data with 0's

                       for (i = 0; i != categories.length; i++) {

                               data.push(0);

                       }





                       ga.addEncodedQuery(query);

                       ga.addAggregate('COUNT');

                       ga.groupBy('location');

                       ga.orderBy('location');

                       ga.query();

                       while (ga.next()) {

                               // Find category index

                               for (i = 0; i != categories.length; i++) {

                                       cat = ga.location.getDisplayValue() + '' || '(empty)';

                                       if (categories[i] == cat) {

                                               break;

                                       }

                               }





                               data[i] = ga.getAggregate('COUNT') * 1;

                       }





                       return { 'name': name, 'legendIndex': index, 'data': data };

               }





               // Add the 3 series to an array for output

               series.push(getSeries('Open', 0, openQuery, categories));   // Add Open Series

               series.push(getSeries('Resolved', 1, resolvedQuery, categories)); // Add Resolved Series

               series.push(closedSeries = getSeries('Closed', 1, closedQuery, categories)); // Add Closed Series





               // JSON encode the series and categories.   The JSON strings will be embedded with a JEXL expression into the client side code

               series = new JSON().encode(series);

               categories = new JSON().encode(categories);

       </g2:evaluate>

       <table class="wide"><tr><td align="center">

               <div id="custom_report" class="highcharts-container" style="position: static; overflow: hidden; width: 650px; height: 450px; text-align: left; line-height: normal; z-index: 0; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"></div>

       </td></tr></table>

       <script>

                       var chart1 = new Highcharts.Chart({

                               chart: {

                                       renderTo: 'custom_report',

                                       type: 'column'

                               },

                               title: {

                                       text: null

                               },

                               xAxis: {

                                       categories: $[categories],

                                       title: {

                                               text: null

                                       },

                                       labels: {

                                               rotation: -45

                                       }

                               },

                               yAxis: {

                                       min: 0,

                                       title: {

                                               text: null

                                       }

                               },

                               series: $[series]

                       });

       </script>

</j:jelly>

[VAIGAI_KOTHANDA]

Hi Travis,

Thanks for the awesome video.

But i am confused here on how can a simple ITIL user can access the report.

Can we put the same in the home page?

Or there is any other option here?

Thanks and RGDS,

Vaigai

Travis Toulson Shahid Islam

[tltoulson]

Hi Vaigai,

Yes you can absolutely put a UI Page on a Homepage by exposing it as a Gauge.   This wiki article demonstrates how to do this: Using UI Pages as Gauges - ServiceNow Wiki

You will need to make one change to the UI Page I provided in the video:   Remove line 3 completely:

<script type="text/javascript" src="/scripts/GlideV2ChartingIncludes.jsx?v=10-19-2014_0741"></script>

That line is no longer needed because home pages already include that script.

[shahid1]

Hi Travis, Travis Toulson

The UI page stuff is working awesomely. \m/

We really appreciate your help here.

But i have a doubt here, if we want to have the UI page's output as Trend chart or Pivot Table then what will be the changes we are going to make in the script provided by you?

Or is there any ways in which we can do so from custom chart's section itself?

Thanks and RGDS,

Shahid