Highcharts - Clock

Complete Python Prime Pack

9 Courses     2 eBooks

Artificial Intelligence & Machine Learning Prime Pack

6 Courses     1 eBooks

Java Prime Pack

9 Courses     2 eBooks

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

An example of a Clock is given below.

Configurations

Let us now see the additional configurations/steps taken.

chart.type

Configure the chart type to be gauge based. Set the type as 'gauge'.

```var chart = {
type: 'guage'
};
```

pane

This type applies only to polar charts and angular gauges. This configuration object holds general options for the combined X and Y axes set. Each xAxis or yAxis can reference the pane by index.

```var pane = {
startAngle: -150,
endAngle: 150
};
```

Example

highcharts_guage_clock.htm

```<html>
<title>Highcharts Tutorial</title>
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/highcharts-more.js"></script>

<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
/**
* Get the current time
*/
function getNow() {
var now = new Date();
return {
hours: now.getHours() + now.getMinutes() / 60,
minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
seconds: now.getSeconds() * 12 / 60
};
}

/**
*/
// Create an array of the remaining length + 1 and join it with 0's
return new Array(
(length || 2) + 1 - String(number).length).join(0) + number;
}
var now = getNow();
var chart = {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
height: 200
};
var credits = {
enabled: false
};
var title = {
text: 'The Highcharts clock'
};
var pane = {
background: [
{
// default background
},
{
// reflex for supported browsers
backgroundColor: Highcharts.svg ? {
cx: 0.5,
cy: -0.4,
r: 1.9
},
stops: [
[0.5, 'rgba(255, 255, 255, 0.2)'],
[0.5, 'rgba(200, 200, 200, 0.2)']
]
} : null
}
]
};
// the value axis
var yAxis = {
labels: {
distance: -20
},
min: 0,
max: 12,
lineWidth: 0,
showFirstLabel: false,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 5,
minorTickPosition: 'inside',
minorGridLineWidth: 0,
minorTickColor: '#666',

tickInterval: 1,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',

title: {
style: {
color: '#BBB',
fontWeight: 'normal',
fontSize: '8px',
lineHeight: '10px'
},
y: 10
}
};
var tooltip = {
formatter: function () {
return this.series.chart.tooltipText;
}
};
var series = [{
data: [
{
id: 'hour',
y: now.hours,
dial: {
baseWidth: 4,
baseLength: '95%',
rearLength: 0
}
},
{
id: 'minute',
y: now.minutes,
dial: {
baseLength: '95%',
rearLength: 0
}
},
{
id: 'second',
y: now.seconds,
dial: {
baseWidth: 1,
rearLength: '20%'
}
}
],
animation: false,
dataLabels: {
enabled: false
}
}];

var json = {};
json.chart = chart;
json.credits = credits;
json.title = title;
json.pane = pane;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.series = series;
\$('#container').highcharts(json, chartFunction);

var chartFunction = function (chart) {
setInterval(function () {
now = getNow();

var hour = chart.get('hour'),
minute = chart.get('minute'),
second = chart.get('second'),

// run animation unless we're wrapping around from 59 to 0
animation = now.seconds === 0 ? false :{ easing: 'easeOutElastic'};

// Cache the tooltip text
chart.tooltipText = pad(Math.floor(now.hours), 2) + ':' +

pad(Math.floor(now.minutes * 5), 2) + ':' +

hour.update(now.hours, true, animation);
minute.update(now.minutes, true, animation);
second.update(now.seconds, true, animation);
}, 1000);
};
});

// Extend jQuery with some easing (copied from jQuery UI)
\$.extend(\$.easing, {
easeOutElastic: function (x, t, b, c, d) {
var s = 1.70158;var p = 0;var a = c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p = d*.3;
if (a < Math.abs(c)) { a = c; var s = p/4; }
else
var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
});
</script>
</body>

</html>
```

Result

Verify the result.

highcharts_angular_gauges.htm