Gráficos Customizados - ServiceNow

Gráficos com
Highcharts no
ServiceNow
passo a passo
SUMÁRIO
IMPORTANTE......................................................................................................................... 4
• INSTALAÇÃO DO XPLORE: DEVELOPER TOOLKIT............................................................. 4
1 RENDEZIRAÇÃO DE GRÁFICOS HIGHCHARTS NO SERVICENOW ................... 5
1.1 GRÁFICO DE PIZZA ...................................................................................................... 5

1.1.1 Gráfico de Pizza com Dados Fictícios ................................................................... 5
1.1.1.1 UI Page: HTML .............................................................................................. 5
1.1.1.2 UI Page: Client script ..................................................................................... 6
1.1.2 Gráfico de Pizza com Dados do ServiceNow ......................................................... 8
1.2 GRÁFICO DE GANTT..................................................................................................... 8
1.2.1 Gráfico de Gantt com Dados Fictícios ................................................................... 8
1.2.1.1 UI Page: HTML .............................................................................................. 8
1.2.1.2 UI Page: Client script ..................................................................................... 9
1.2.2 Gráfico de Gantt com Dados do ServiceNow ....................................................... 11
1.3 GRÁFICO DE BARRAS VERTICAIS ............................................................................... 11
1.3.1 Gráfico de Barras Verticais com Dados Fictícios ............................................... 11
1.3.1.1 UI Page: HTML ............................................................................................ 11
1.3.1.2 UI Page: Client script ................................................................................... 12
1.3.2 Gráfico de Barras Verticais com Dados do ServiceNow ..................................... 14
1.4 GRÁFICO DE BARRAS HORIZONTAIS .......................................................................... 14
1.4.1 Gráfico de Barras Horizontais com Dados Fictícios ........................................... 15
1.4.1.1 UI Page: HTML ............................................................................................ 15
1.4.2 Gráfico de Barras Horizontais com Dados do ServiceNow ................................. 18
1.5 GRÁFICO DE BARRAS VERTICAIS EMPILHADO ........................................................... 18
1.5.1 Gráfico de Barras Verticais Empilhado com Dados Fictícios ............................. 19
1.5.1.1 UI Page: HTML ............................................................................................ 19
1.5.2 Gráfico de Barras Verticais Empilhado com Dados do ServiceNow ................... 21
1.6 GRÁFICO DE BARRAS VERTICAIS COM DRILLDOWN .................................................. 22
1.6.1 Gráfico de Barras Verticais com Drilldown com Dados Fictícios ...................... 22
1.6.1.1 UI Page: HTML ............................................................................................ 22
1.6.2 Gráfico de Barras Verticais com Drilldown com Dados do ServiceNow ............ 26
2 IMPORTANDO AS DEPENDÊNCIAS COM UI SCRIPTS ..................................... 27
2.1 ASDAS ..................................................................................................................... 27
3 RENDERIZANDO UI PAGES EM DASHBOARDS UTILIZANDO GAUGES..... 28
3.1 ASDAS ..................................................................................................................... 28
4 CONECTANDO FILTROS E BREAKDOWN SOURCES NOS GRÁFICOS ........ 29
4.1 ASDAS ..................................................................................................................... 29
5 ADICIONANDO INTERAÇÃO POR CLIQUE AOS GRÁFICOS.......................... 30
5.1 ASDA ....................................................................................................................... 30
6 ARMAZENAR DADOS EM TABELA PARA GERAÇÃO DE GRÁFICOS .......... 31
6.1 ASD .......................................................................................................................... 31
7 JAVASCRIPT: PRINCIPAIS MÉTODOS E FUNÇÕES UTILIZADOS ................ 32
7.1 ASDAS ..................................................................................................................... 32
REFERÊNCIAS ..................................................................................................................... 33
4
IMPORTANTE
Digite aqui o seu texto.
• Instalação do Xplore: Developer Toolkit

5
1 RENDEZIRAÇÃO DE GRÁFICOS HIGHCHARTS NO SERVICENOW
Digite aqui o seu texto.
1.1 Gráfico de Pizza
1.1.1 Gráfico de Pizza com Dados Fictícios
1.1.1.1 UI Page: HTML
<?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 src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
6
<script src="https://code.highcharts.com/modules/export-
data.js"></script>
<script
src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This pie chart shows how the chart legend can be used to provide
information about the individual slices.
</p>
</figure>


<style>
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
margin: 1em auto;
}
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
</j:jelly>
1.1.1.2 UI Page: Client script

7
// Data retrieved from https://netmarketshare.com/

// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in March, 2022',
align: 'left'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 74.77
}, {
name: 'Edge',
y: 12.82
}, {
name: 'Firefox',
y: 4.63
}, {
name: 'Safari',
y: 2.44
}, {
name: 'Internet Explorer',
y: 2.02
}, {
name: 'Other',
y: 3.28
}]
}]
});
8
1.1.2 Gráfico de Pizza com Dados do ServiceNow
1.2 Gráfico de Gantt
1.2.1 Gráfico de Gantt com Dados Fictícios

xmlns:g2="null">


9
<script src="https://code.highcharts.com/gantt/highcharts-
gantt.js"></script>
<script
src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>


<style>
#container {
max-width: 800px;
margin: 1em auto;
}
</style>
</j:jelly>
var today = new Date();

var day = 1000 * 60 * 60 * 24;
// Set to 00:00:00:000 today

today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
// THE CHART
Highcharts.ganttChart('container', {
title: {
text: 'Highcharts Gantt With Subtasks'
},
accessibility: {
keyboardNavigation: {
seriesNavigation: {
mode: 'serialize'
}
},
point: {
descriptionFormatter: function(point) {
var dependency = point.dependency &&
point.series.chart.get(point.dependency).name,
dependsOn = dependency ? ' Depends on ' + dependency +
'.' : '';
return Highcharts.format(
'{point.yCategory}. Start {point.x:%Y-%m-%d}, end
{point.x2:%Y-%m-%d}.{dependsOn}'
);
}
}
},
lang: {
accessibility: {
axis: {
10
xAxisDescriptionPlural: 'The chart has a two-part X axis

showing time in both week numbers and days.'
}
}
},
series: [{
name: 'Project 1',
data: [{
name: 'Planning',
id: 'planning',
start: today.getTime(),
end: today.getTime() + (20 * day)
}, {
name: 'Requirements',
id: 'requirements',
parent: 'planning',
start: today.getTime(),
}, {
name: 'Design',
id: 'design',
dependency: 'requirements',
parent: 'planning',
start: today.getTime() + (3 * day),
}, {
name: 'Layout',
id: 'layout',
parent: 'design',
}, {
name: 'Graphics',
parent: 'design',
dependency: 'layout',
}, {
name: 'Develop',
id: 'develop',
}, {
name: 'Create unit tests',
id: 'unit_tests',
dependency: 'requirements',
parent: 'develop',
}, {
name: 'Implement',
id: 'implement',
dependency: 'unit_tests',
parent: 'develop',
}]
11
}]
});
1.2.2 Gráfico de Gantt com Dados do ServiceNow
1.3 Gráfico de Barras Verticais
1.3.1 Gráfico de Barras Verticais com Dados Fictícios

xmlns:g2="null">


<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script
</figure>
12


<style>
.highcharts-figure,
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
font-weight: 600;
padding: 0.5em;
}
padding: 0.5em;
}

}
}
</style>
</j:jelly>

13
// Data retrieved from https://gs.statcounter.com/browser-market-

share#monthly-202201-202201-bar
// Create the chart

chart: {
type: 'column'
},
title: {
align: 'left',
text: 'Browser market shares. January, 2022'
},
accessibility: {
announceNewData: {
enabled: true
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-
size:11px">{series.name}</span><br>',
pointFormat: '<span
style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of
total<br/>'
},
series: [
{
name: 'Browsers',
colorByPoint: true,
data: [
{
name: 'Chrome',
y: 63.06
14
},
{
name: 'Safari',
y: 19.84
},
{
name: 'Firefox',
y: 4.18
},
{
name: 'Edge',
y: 4.12
},
{
name: 'Opera',
y: 2.33
},
{
y: 0.45
},
{
name: 'Other',
y: 1.582
}
]
}
]
});
1.3.2 Gráfico de Barras Verticais com Dados do ServiceNow
1.4 Gráfico de Barras Horizontais

15
1.4.1 Gráfico de Barras Horizontais com Dados Fictícios

xmlns:g2="null">


<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script
</figure>


<style>
.highcharts-figure,
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
16
#container {
height: 400px;
}
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
font-weight: 600;
padding: 0.5em;
}
padding: 0.5em;
}

}
}
</style>
</j:jelly>

// Create the chart

chart: {
type: 'bar'
},
17
title: {
align: 'left',
},
accessibility: {
announceNewData: {
enabled: true
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
tooltip: {
pointFormat: '<span
total<br/>'
},
series: [
{
name: 'Browsers',
colorByPoint: true,
data: [
{
name: 'Chrome',
y: 63.06
},
{
name: 'Safari',
y: 19.84
},
{
name: 'Firefox',
y: 4.18
},
{
18
name: 'Edge',
y: 4.12
},
{
name: 'Opera',
y: 2.33
},
{
y: 0.45
},
{
name: 'Other',
y: 1.582
}
]
}
]
});
1.4.2 Gráfico de Barras Horizontais com Dados do ServiceNow
1.5 Gráfico de Barras Verticais Empilhado

19
1.5.1 Gráfico de Barras Verticais Empilhado com Dados Fictícios

xmlns:g2="null">


data.js"></script>
<script
Chart showing stacked columns for comparing quantities. Stacked
charts
are often used to visualize data that accumulates to a sum. This
chart
is showing data labels for each individual section of the stack.
</p>
</figure>


<style>
#container {
height: 400px;
}
.highcharts-figure,
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
font-weight: 600;
padding: 0.5em;
}
20
padding: 0.5em;
}
}
}
</style>
</j:jelly>
// Data retrieved from:

// - https://en.as.com/soccer/which-teams-have-won-the-premier-league-the-
most-times-n/
// - https://www.statista.com/statistics/383679/fa-cup-wins-by-team/
// - https://www.uefa.com/uefachampionsleague/history/winners/
chart: {
type: 'column'
},
title: {
text: 'Major trophies for some English teams',
align: 'left'
},
xAxis: {
categories: ['Arsenal', 'Chelsea', 'Liverpool', 'Manchester
United']
},
yAxis: {
min: 0,
title: {
text: 'Count trophies'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray',
textOutline: 'none'
}
}
},
legend: {
align: 'left',
x: 70,
21
verticalAlign: 'top',
y: 70,
floating: true,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor
|| 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total:
{point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'BPL',
data: [{y: 3}, {y:5}, {y:1}, {y:13}]
}, {
name: 'FA Cup',
data: [{y: 14}, {y: 8}, {y: 8}, {y: 12}]
}, {
name: 'CL',
data: [{y: 0}, {y:2}, {y: 6}, {y: 3}]
}]
});
1.5.2 Gráfico de Barras Verticais Empilhado com Dados do ServiceNow

22
1.6 Gráfico de Barras Verticais com Drilldown
1.6.1 Gráfico de Barras Verticais com Drilldown com Dados Fictícios

xmlns:g2="null">


<script src="https://code.highcharts.com/modules/drilldown.js"></script>
data.js"></script>
<script
Chart showing browser market shares. Clicking on individual
columns
brings up more detailed data. This chart makes use of the
drilldown
23
feature in Highcharts to easily switch between datasets.

</p>
</figure>


<style>
.highcharts-figure,
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
font-weight: 600;
padding: 0.5em;
}
padding: 0.5em;
}
}
}
</style>
</j:jelly>

24
// Create the chart

chart: {
type: 'column'
},
title: {
align: 'left',
},
subtitle: {
align: 'left',
text: 'Click the columns to view versions. Source: <a
href="http://statcounter.com" target="_blank">statcounter.com</a>'
},
accessibility: {
announceNewData: {
enabled: true
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
tooltip: {
pointFormat: '<span
total<br/>'
},
series: [{
name: 'Browsers',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 63.06,
drilldown: 'Chrome'
},
25
{
name: 'Firefox',
y: 4.18,
drilldown: 'Firefox'
}
]
}],
drilldown: {
breadcrumbs: {
position: {
align: 'right'
}
},
series: [{
name: 'Chrome',
id: 'Chrome',
data: [
{name:'v65.0',
y: 0.1},
{name:'v64.0',
y: 1.3},
{name:'v63.0',
y: 53.02},
{name:'v62.0',
y: 1.4},
{name:'v61.0',
y: 0.88},
{name:'v60.0',
y: 0.56},
{name:'v59.0',
y: 0.45},
{name:'v58.0',
y: 0.49},
{name:'v57.0',
y: 0.32},
{name:'v56.0',
y: 0.29},
{name:'v55.0',
y: 0.79},
{name:'v54.0',
y: 0.18},
{name:'v51.0',
y: 0.13}
]
},
{
name: 'Firefox',
id: 'Firefox',
data: [
{name:'v58.0',
y: 1.02},
{name:'v57.0',
y: 7.36},
{name:'v56.0',
y: 0.35},
{name:'v55.0',
y: 0.11},
26
{name:'v54.0',
y: 0.1},
{name:'v52.0',
y: 0.95},
{name:'v51.0',
y: 0.15},
{name:'v50.0',
y: 0.1},
{name:'v48.0',
y: 0.31},
{name:'v47.0',
y: 0.12}
]
}
]
}
});
1.6.2 Gráfico de Barras Verticais com Drilldown com Dados do ServiceNow

27
2 IMPORTANDO AS DEPENDÊNCIAS COM UI SCRIPTS
2.1 ASDAS
28
3 RENDERIZANDO UI PAGES EM DASHBOARDS UTILIZANDO GAUGES
3.1 ASDAS
29
4 CONECTANDO FILTROS E BREAKDOWN SOURCES NOS GRÁFICOS
4.1 ASDAS
30
5 ADICIONANDO INTERAÇÃO POR CLIQUE AOS GRÁFICOS
5.1 ASDA
31
6 ARMAZENAR DADOS EM TABELA PARA GERAÇÃO DE GRÁFICOS
6.1 ASD
32
7 JAVASCRIPT: PRINCIPAIS MÉTODOS E FUNÇÕES UTILIZADOS
7.1 ASDAS
33
REFERÊNCIAS
IBGE. Características gerais dos indígenas: resultados do universo. Disponível em:

<http://www.ibge.gov.br/home/estatistica/populacao/censo2010/caracteristicas_gerais_indige
nas/default_caracteristicas_gerais_indigenas.shtm>.

Gráficos Customizados - ServiceNow

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Gráficos Customizados - ServiceNow

Enviado por

Direitos autorais:

Formatos disponíveis

Gráficos com

• INSTALAÇÃO DO XPLORE: DEVELOPER TOOLKIT............................................................. 4

1 RENDEZIRAÇÃO DE GRÁFICOS HIGHCHARTS NO SERVICENOW ................... 5

1.1 GRÁFICO DE PIZZA ...................................................................................................... 5

2 IMPORTANDO AS DEPENDÊNCIAS COM UI SCRIPTS ..................................... 27

2.1 ASDAS ..................................................................................................................... 27

3 RENDERIZANDO UI PAGES EM DASHBOARDS UTILIZANDO GAUGES..... 28

3.1 ASDAS ..................................................................................................................... 28

4 CONECTANDO FILTROS E BREAKDOWN SOURCES NOS GRÁFICOS ........ 29

4.1 ASDAS ..................................................................................................................... 29

5 ADICIONANDO INTERAÇÃO POR CLIQUE AOS GRÁFICOS.......................... 30

5.1 ASDA ....................................................................................................................... 30

6 ARMAZENAR DADOS EM TABELA PARA GERAÇÃO DE GRÁFICOS .......... 31

6.1 ASD .......................................................................................................................... 31

7 JAVASCRIPT: PRINCIPAIS MÉTODOS E FUNÇÕES UTILIZADOS ................ 32

7.1 ASDAS ..................................................................................................................... 32

Digite aqui o seu texto.

• Instalação do Xplore: Developer Toolkit

1 RENDEZIRAÇÃO DE GRÁFICOS HIGHCHARTS NO SERVICENOW

Digite aqui o seu texto.

1.1 Gráfico de Pizza

1.1.1 Gráfico de Pizza com Dados Fictícios

1.1.1.1 UI Page: HTML

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

1.1.1.2 UI Page: Client script

// Data retrieved from https://netmarketshare.com/

1.1.2 Gráfico de Pizza com Dados do ServiceNow

1.2 Gráfico de Gantt

1.2.1 Gráfico de Gantt com Dados Fictícios

1.2.1.1 UI Page: HTML

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

1.2.1.2 UI Page: Client script

var today = new Date();

// Set to 00:00:00:000 today

xAxisDescriptionPlural: 'The chart has a two-part X axis

1.2.2 Gráfico de Gantt com Dados do ServiceNow

1.3 Gráfico de Barras Verticais

1.3.1 Gráfico de Barras Verticais com Dados Fictícios

1.3.1.1 UI Page: HTML

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

.highcharts-data-table thead tr,

1.3.1.2 UI Page: Client script

// Data retrieved from https://gs.statcounter.com/browser-market-

// Create the chart

1.3.2 Gráfico de Barras Verticais com Dados do ServiceNow

1.4 Gráfico de Barras Horizontais

1.4.1 Gráfico de Barras Horizontais com Dados Fictícios

1.4.1.1 UI Page: HTML

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

.highcharts-data-table thead tr,

1.4.1.2 UI Page: Client script

// Data retrieved from https://gs.statcounter.com/browser-market-

// Create the chart

1.4.2 Gráfico de Barras Horizontais com Dados do ServiceNow

1.5 Gráfico de Barras Verticais Empilhado

1.5.1 Gráfico de Barras Verticais Empilhado com Dados Fictícios