Use PDIs? Take our 5-minute survey to help shape the PDI roadmap.
</p><p><span style="font-size: 10pt; line-height: 1.5em;"> </span></p><p><span style="line-height: 1.5em; font-size: 10pt;">The ServiceNow Community can be a tough place to communicate without winding up with a wall of intimidating technical text. Add to that the gaps in technical knowledge and understanding as well as differences in jargon and we often end up with walls of text and frequent churn in the comments in order to arrive at a solution. Thankfully, the Community offers some great rich media features like videos! With that in mind, I am very excited to kick off the a new webcast series called Code Creative! With Code Creative, I will have the opportunity to answer questions by demonstrating techniques rather than just explaining them. </span></p><p><span style="line-height: 1.5em; font-size: 10pt;"> </span></p><p><span style="line-height: 1.5em; font-size: 10pt;">I have been kicking around the idea of starting a webcast series dedicated to answering Community questions for a while and found the perfect opportunity </span>with a question from <a __default_attr="9262" __jive_macro_name="user" class="jive_macro jive_macro_user" data-orig-content="vaigai.kothandaraman." data-renderedposition="503_8_162_16" href="/community?id=community_user_profile&user=2ce01261db981fc09c9ffb651f9619c5" modifiedtitle="true" title="vaigai.kothandaraman.">vaigai.kothandaraman.</a> In Episode 1, Vaigai wants to know how to create custom reports when the native reporting engine is unable to provide the right look and feel and I demonstrate a technique using HighCharts and a UI Page to wield absolute control over the data and the final report. This video demystifies a fairly advanced scripting technique that I have used to achieve some pretty amazing charts in the past and by the end I am sure the community will come up with some even more amazing ones!</p><p></p><p>I hope you enjoy the video and I look forward to answering your questions in future episodes!</p><p></p><p>Original Question: <a title="Custom Chart Scripts" __default_attr="181930" __jive_macro_name="thread" class="jive_macro_thread jive_macro" data-orig-content="Custom Chart Scripts" data-renderedposition="629_123.91999816894531_156_16" href="/community?id=community_question&sys_id=dd025feddbdcdbc01dcaf3231f9619c6">Custom Chart Scripts</a></p><p></p><p>Additional Charting Resources:</p><p><a href="http://wiki.servicenow.com/index.php?title=Using_UI_Pages_as_Gauges#gsc.tab=0" title="http://wiki.servicenow.com/index.php?title=Using_UI_Pages_as_Gauges#gsc.tab=0">Using UI Pages as Gauges - ServiceNow Wiki</a></p><p><a href="http://www.highcharts.com/" title="http://www.highcharts.com/">http://www.highcharts.com/</a></p><p></p><p>Another Option for Custom Charts using the Legacy JFreeChart</p><p><a href="http://wiki.servicenow.com/index.php?title=Custom_Charts_Plugin#gsc.tab=0" title="http://wiki.servicenow.com/index.php?title=Custom_Charts_Plugin#gsc.tab=0">Custom Chart Actions - ServiceNow Wiki</a></p><p><a href="http://wiki.servicenow.com/index.php?title=Custom_Chart_Definitions#gsc.tab=0" title="http://wiki.servicenow.com/index.php?title=Custom_Chart_Definitions#gsc.tab=0">Custom Chart Definitions - ServiceNow Wiki</a></p><p><a href="http://wiki.servicenow.com/index.php?title=Custom_Chart_Rendering#gsc.tab=0" title="http://wiki.servicenow.com/index.php?title=Custom_Chart_Rendering#gsc.tab=0">Custom Chart Rendering - ServiceNow Wiki</a></p><p></p><p><strong>Edit:</strong></p><p></p><p>Here is the UI Page used in the video:</p><p></p><pre __default_attr="xml" __jive_macro_name="code" class="_jivemacro_uid_14319375871399820 jive_macro_code jive_text_macro" data-renderedposition="942_8_1179_1712" jivemacro_uid="_14319375871399820"><p>&lt;?xml version="1.0" encoding="utf-8" ?&gt;</p><p>&lt;j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"&gt;</p><p> &lt;script&gt;&lt;/script&gt;</p><p> &lt;g2:evaluate&gt;</p><p> var openQuery = 'stateIN1,2,3,4,5',</p><p> resolvedQuery = 'state=6^resolved_atONToday@javascript:gs.daysAgoStart(0)@javascript:gs.daysAgoEnd(0)',</p><p> closedQuery = 'state=7^closed_atONToday@javascript:gs.daysAgoStart(0)@javascript:gs.daysAgoEnd(0)',</p><p> 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)',</p><p> ga,</p><p> categories = [],</p><p> series = [];</p><p></p><p></p><p> // Setup Categories</p><p> var ga = new GlideAggregate('incident');</p><p> ga.addEncodedQuery(allQuery);</p><p> ga.addAggregate('COUNT');</p><p> ga.groupBy('location');</p><p> ga.orderBy('location');</p><p> ga.query();</p><p> while (ga.next()) {</p><p> categories.push(ga.location.getDisplayValue() + '' || '(empty)');</p><p> }</p><p></p><p></p><p> // Reusable function for building the 3 Series</p><p> function getSeries(name, index, query, categories) {</p><p> var ga = new GlideAggregate('incident'),</p><p> data = [],</p><p> i,</p><p> cat;</p><p></p><p></p><p> // Fill data with 0's</p><p> for (i = 0; i != categories.length; i++) {</p><p> data.push(0);</p><p> }</p><p></p><p></p><p> ga.addEncodedQuery(query);</p><p> ga.addAggregate('COUNT');</p><p> ga.groupBy('location');</p><p> ga.orderBy('location');</p><p> ga.query();</p><p> while (ga.next()) {</p><p> // Find category index</p><p> for (i = 0; i != categories.length; i++) {</p><p> cat = ga.location.getDisplayValue() + '' || '(empty)';</p><p> if (categories[i] == cat) {</p><p> break;</p><p> }</p><p> }</p><p></p><p></p><p> data[i] = ga.getAggregate('COUNT') * 1;</p><p> }</p><p></p><p></p><p> return { 'name': name, 'legendIndex': index, 'data': data };</p><p> }</p><p></p><p></p><p> // Add the 3 series to an array for output</p><p> series.push(getSeries('Open', 0, openQuery, categories)); // Add Open Series</p><p> series.push(getSeries('Resolved', 1, resolvedQuery, categories)); // Add Resolved Series</p><p> series.push(closedSeries = getSeries('Closed', 1, closedQuery, categories)); // Add Closed Series</p><p></p><p></p><p> // JSON encode the series and categories. The JSON strings will be embedded with a JEXL expression into the client side code</p><p> series = new JSON().encode(series);</p><p> categories = new JSON().encode(categories);</p><p> &lt;/g2:evaluate&gt;</p><p> &lt;table class="wide"&gt;&lt;tr&gt;&lt;td align="center"&gt;</p><p> &lt;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;"&gt;&lt;/div&gt;</p><p> &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</p><p> &lt;script&gt;</p><p> var chart1 = new Highcharts.Chart({</p><p> chart: {</p><p> renderTo: 'custom_report',</p><p> type: 'column'</p><p> },</p><p> title: {</p><p> text: null</p><p> },</p><p> xAxis: {</p><p> categories: $[categories],</p><p> title: {</p><p> text: null</p><p> },</p><p> labels: {</p><p> rotation: -45</p><p> }</p><p> },</p><p> yAxis: {</p><p> min: 0,</p><p> title: {</p><p> text: null</p><p> }</p><p> },</p><p> series: $[series]</p><p> });</p><p> &lt;/script&gt;</p><p>&lt;/j:jelly&gt;</p> </pre>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
