Highchart does not render when the widget is added to the PA dashboard

mcs · ‎04-21-2016

Hi there,

I created a ui page to create a highchart. UI page works fine. Then I created a widget to call the ui page so I could bring it into one of the dashboards in Performance Analytics.

However, the chart is not generated.

Any advice?

Thanks in advance

Cel

tonemking · ‎02-21-2017

Thats great! and my pleasure, also if this helped please mark my response as correct or helpful so others can find this.

Best,

Tone

View solution in original post

tonemking · ‎10-03-2016

Hi,

Where are you loading the library for highcharts in your jelly? try placing the g:include at the end of your macro/page.

Best,

Antone

mcs · ‎02-07-2017

Hi Antone,

I have been out for a long while hence didn't see your reply. Thanks!

My UI Page goes like this:

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

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

document.observe("dom:loaded", function() {

var chart = new Highcharts.Chart({

chart: {

renderTo: 'custom_report',

type: 'line'},

title: {

text: 'Weighted Risk',

x: -20 //center

},

subtitle: {

text: '',

x: -20

},

credits: {

enabled: false

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

yAxis: {

title: {

text: 'Weighted Risk Opened - Weighted Risk Closed'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

series: [{

name: 'Net Risk',

data: [-3,32,-22,-19,-4,-54,34,65,-88,3,9]

}]

});

</script>

<div>

<thead>

<tr>

<th><strong>Agency Solutions</strong></th>

</tr>

</thead>

<tr>

<td>Opened</td>

</tr>

</table>

</div>

</j:jelly>

Then hit 'Try It'. The chart looks like this.

Then I created a new widget as advised here : Create a widget that displays a ServiceNow UI page

I updated the code based on that link as we're now in Helsinki. I used to have the one that calls 'render_gadget ...'

Then added the widget to the PA dashboard. The chart is not rendered, but the table below is ok.

Any inputs greatly appreciated.

function sections() {

return {

'problem_risk': {

'type': 'problem_risk_main'

}

};

}

function render() {

var scope = gs.getCurrentScopeName();

scope = (scope == "rhino.global" ? "" : scope + "_");

var page = renderer.getPreference('type');

return renderer.getRenderedPage(scope + page);

}

function getEditLink() {

var scope = gs.getCurrentScopeName();

scope = (scope == "rhino.global" ? "" : scope + "_");

var page = renderer.getPreference('type');

return "sys_ui_page.do?sysparm_query=name=" + scope + page;

}

tonemking · ‎02-12-2017

Hi Cel,

You do not need both of these you'll encounter a namespace error with in a widget as highcharts is already defined

<script>

<script>https://code.highcharts.com/highcharts.js"></script>

Comment out one of these and place it at the end of your ui page script like this... Works for me in a widget after doing so.

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

document.observe("dom:loaded", function() {

   var chart = new Highcharts.Chart({   

         chart: {

         renderTo: 'custom_report', 

               type: 'line'},

               title: {

                       text: 'Weighted Risk',

                       x: -20 //center

               },

               subtitle: {

                       text: '',

                       x: -20

               },

   credits: {

     enabled: false

     }, 

               xAxis: {

                       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

                               'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

               },

               yAxis: {

                       title: {

                               text: 'Weighted Risk Opened - Weighted Risk Closed'

                       },

                       plotLines: [{

                               value: 0,

                               width: 1,

                               color: '#808080'

                       }]

               },

               series: [{

                       name: 'Net Risk',

   data: [-3,32,-22,-19,-4,-54,34,65,-88,3,9]

               }]

       });

});

</script>

<div id="custom_report" style="position: relative; overflow: hidden; width: 800px; height: 400px; padding:30px;"></div>

<div>

<table id="risk_table" width="750px" border="1px solid #eeeeee;">

   <thead>

   <tr>

   <th><strong>Agency Solutions</strong></th>

   <th>Jan-16</th>

   <th>Feb-16</th>

   <th>Mar-16</th>

   <th>Apr-16</th>

   <th>May-16</th>

   <th>Jun-16</th>

   <th>Jul-16</th>

   <th>Aug-16</th>

   <th>Sep-16</th>

   <th>Oct-16</th>

   <th>Nov-16</th>

   </tr>

   </thead>

   <tr>

   <td>Opened</td>

   <td style="text-align:right">30</td>

   <td style="text-align:right">56</td>

   <td style="text-align:right">39</td>

   <td style="text-align:right">47</td>

   <td style="text-align:right">36</td>

   <td style="text-align:right">32</td>

   <td style="text-align:right">31</td>

   <td style="text-align:right">44</td>

   <td style="text-align:right">30</td>

   <td style="text-align:right">37</td>

   <td style="text-align:right">18</td>

   </tr>

</table>

</div>


<!--commented out the include for my example -->

<!--<script> </script>-->

<script>https://code.highcharts.com/highcharts.js"></script>

</j:jelly>

mcs · ‎02-21-2017

Thanks Antone!

Commented the line as suggested but for some reason it just won't work in our instance.

So I requested for a new instance from servicenow developer site just to see. And there, it worked!

So at this point I don't know what the problem is in our instance.

Also, I had to change my widget to this:

function sections() {

return {

'Test Page' : { 'name' : 'test_ui_page' }

};

}

function render() {

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

var gf = new GlideForm(renderer.getGC(), name, 0);

gf.setDirect(true);

gf.setRenderProperties(renderer.getRenderProperties());

return gf.getRenderedPage();

}

function getEditLink() {

if (!gs.hasRole('admin'))

return '';

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

}

sangun also suggested to use gauge to call the url page. This one works for me so I might have to stick with this for now.

I really appreciate you taking the time to check this out.

Cheers,

Cel