In this snippet you will create a custom spider web using a custom page and populating data using Highcharts native library

Step 1: Create a new Widget

Go to Service Portal > Widget > Click New

• Name: Custom productionProcess
• Id: custom-gojs-productionProcess
• Click on submit

Body HTML template

• Copy and paste below HTML Code in Widget’s HTML Template section

CSS/SCSS

• Copy and paste below CSS in Widget’s CSS/SCSS Section

/* to be completed */

Client Side Scripts

• Copy and Paste below Script in Widget’s Client Side Section

api.controller=function($rootScope, $scope, $window, $interval, spUtil) {
/* widget controller */
var c = this;

/** Chart source: https://www.highcharts.com/demo/polar-spider*/
var options = {
    credits: {
        enabled: false
    },

    chart: {
        renderTo: 'container', // change chart_id if needed
        polar: true,
        type: 'line'
    },

accessibility: {
    description: 'A spiderweb chart compares the allocated budget against actual spending within an organization. The spider chart has six spokes. Each spoke represents one of the 6 departments within the organization: sales, marketing, development, customer support, information technology and administration. The chart is interactive, and each data point is displayed upon hovering. The chart clearly shows that 4 of the 6 departments have overspent their budget with Marketing responsible for the greatest overspend of $20,000. The allocated budget and actual spending data points for each department are as follows: Sales. Budget equals $43,000; spending equals $50,000. Marketing. Budget equals $19,000; spending equals $39,000. Development. Budget equals $60,000; spending equals $42,000. Customer support. Budget equals $35,000; spending equals $31,000. Information technology. Budget equals $17,000; spending equals $26,000. Administration. Budget equals $10,000; spending equals $14,000.'
},

title: {
    text: 'Budget vs spending',
    x: -80
},

pane: {
    size: '80%'
},

xAxis: {
    categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
        'Information Technology', 'Administration'],
    tickmarkPlacement: 'on',
    lineWidth: 0
},

yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0
},

tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},

legend: {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical'
},

series: [{
    name: 'Allocated Budget',
    data: [43000, 19000, 60000, 35000, 17000, 10000],
    pointPlacement: 'on'
}, {
    name: 'Actual Spending',
    data: [50000, 39000, 42000, 31000, 26000, 14000],
    pointPlacement: 'on'
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                align: 'center',
                verticalAlign: 'bottom',
                layout: 'horizontal'
            },
            pane: {
                size: '70%'
            }
        }
    }]
}

};

/Generate chart/
var chart = new Highcharts.Chart(options);

/* improvements: next step would be to have a ng-selector in HTML and use record watcher to keep data up do date */

};

Step 2: Add native Highcharts library to your widget as widget dependencies

***Go to Service Portal > Widget ***

• Search for your previous widget created “Custom Spider Web” (custom-spider-web) and open the record.
• On the related tab Dependencies, click on Edit button.
• Search for PA Widget (4fbe3df5673322002c658aaad485ef29) and add to your list.
• Click on Save button to save the change.

Step 3: Create a new Page

Go to Service Portal > Page > Click New

• Name: spiderweb – Test Page
• ID: spiderweb
• Click on Submit button.
• Once submitted, Click on Open in Page Designer related link
• In Page designer, Place custom-spider-web widget inside a container > row > Column at top location.
• View paget from following link http://instance-name.service-now.com/sp?id=spiderweb.

Sources

Any of following links are not under my surveilance or maintenance

https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/productionProcess.html https://gojs.net/latest/intro/toolTips.html http://g-mops.net/epica%5Fgojs/api/symbols/Diagram.html

The post Creating spider web using Highcharts appeared first on NOWJedi.