HighCharts in UI Pages

[AJ Simpkin1]

I have been working with Jay Ford to integrate HighCharts into some UI Pages.

I am a creator — Custom Dublin HighChart Chart Report - Jay Ford

Re: High Charts use

http://www.highcharts.com/demo/heatmap

I am currently using sample data just to get the charts running and show our SNUG how it's done.   I've done four different types with success but the heat map is giving me some issues.   I have a stand alone version of HighCharts on a PHP box that will render this sample data without issue, but in ServiceNow it's no dice.

Are there limitations to the types of charts or any other functionality within the ServiceNow implementation of HighCharts?

This is my current code.

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


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


       var chart1 = new Highcharts.Chart({       
       
               chart: {
                       renderTo: 'newchart',       
                       type: 'heatmap',
                       marginTop: 40,
                       marginBottom: 40
               },
               title: {
                       text: 'Sales per employee per weekday'
               },
               xAxis: {
                       categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas']
               },
               yAxis: {
                       categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
               },


               colorAxis: {
                       min: 0,
                       minColor: '#FFFFFF',
                       maxColor: '#AF0000'
               },


               legend: {
                       align: 'right',
                       layout: 'vertical',
                       margin: 0,
                       verticalAlign: 'top',
                       y: 25,
                       symbolHeight: 320,
               },
               series: [{
                       name: 'Sales per employee',
                       borderWidth: 1,
                       data: [[0,0,10],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,10]],
                       dataLabels: {
                               enabled: true,
                               color: 'black',
                               style: {
                                       textShadow: 'none',
                                       HcTextStroke: null
                               }
                       }
               }] // end series


       }); // end chart


}); // end document
</script>


<div id="highwrapper">
       <div id="newchart" ></div>
</div>


</j:jelly>

[david_hreben]

Hello Anthony,

I have tried this many times in our Eureka Version but it does not work. I found that it could be a compatibility issue because if you try your code on the Fuji release it actually works!

[dmfranko]

The error seems to be the below in Eureka, which I'm guessing they started to include in Fuji?   You could probably just import/include that file and make it work in Eureka.

Highcharts Error #17

The requested series type does not exist

This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.

[kalyan778]

Hi All,

We have created one pie chat in ui page but we are not getting the data labels.

Getting slice instead of values.

Can anyone please help?

Below is the screen shot.

Thanks in advance

[codyk]

Anthony

Try external excludes for the js files

I got the heat map working in Eureka just fine using your code only I changed the includes to external urls