<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"
integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
<script>
$(function () {
require(["11.js"], function (data) {
var response = data.gaugeData();
// function getData() {
// var N = 2;
// var brcolor = ['#666666', '#666666'];
// var tl = ['name1', 'name1'];
// var frcolor = ['#666666', '#666666'];
// var rd = ['109%', '96%'];
// var inrd = ['112%', '106%'];
// var otrd = ['99%', '93%'];
// var gg = [80, 65];
// var zeva = ['#eeeeee', '#eeeeee', '#ffffff'];
// var ovi = [1, 1, 0];
//
// var data = [];
//
// for (var p = 0; p < N; p++) {
// data.push(
// {
// color: frcolor[p],
// radius: rd[p],
// innerRadius: rd[p],
// y: gg[p]
// }
// );
// }
// return data;
// }
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
data: response
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [gaugeOptions.data[0].y],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 75,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [gaugeOptions.data[1].y],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
});
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */
define([], function() {
var N = 2;
var brcolor = ['#666666', '#666666'];
var tl = ['name1', 'name1'];
var frcolor = ['#666666', '#666666'];
var rd = ['109%', '96%'];
var inrd = ['112%', '106%'];
var otrd = ['99%', '93%'];
var gg = [80, 65];
var zeva = ['#eeeeee', '#eeeeee', '#ffffff'];
var ovi = [1, 1, 0];
var data = [];
return {
gaugeData: function() {
for (var p = 0; p < N; p++) {
data.push(
{
color: frcolor[p],
radius: rd[p],
innerRadius: rd[p],
y: gg[p]
}
);
}
return data;
}
}
});