Commit 32204cd9 authored by Alain O' Miniussi's avatar Alain O' Miniussi

template for tema cpu usage consumtion

parent ec5ed84c
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
<script src="./teams_data.js"></script>
<script type="text/javascript">
var unitData = [],
teamsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add unit data
unitData.push({
name: units[i],
y: data[i].y,
color: data[i].color
});
// add team data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
teamsData.push({
name: data[i].drilldown.teams[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Labs/Teams CPU Usage, January, 2018'
},
subtitle: {
text: 'Some subtitle'
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: 's'
},
series: [{
name: 'Units',
data: unitData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Teams',
data: teamsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' +
this.y + 's' : null;
}
},
id: 'teams'
}],
responsive: {
rules: [{
condition: {
maxWidth: 400
},
chartOptions: {
series: [{
id: 'teams',
dataLabels: {
enabled: false
}
}]
}
}]
}
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<ul> <a href="../index.htm">Retour</a> </ul>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment