How to update series values of bar with time interval in High chart?
Question
I wrote a code for bar chart with High chart . This is working fine for static data . Now i want to know how can i update the series of data with a 5 second interval . I am using bar chart . Also i want to know how can i add a label value on the bar .
This is bar HTML code :
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 450px; height: 360px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'bar'
};
var title = {
text: 'my Statistics'
};
var subtitle = {
text: 'Source: my data'
};
var xAxis = {
lineColor: 'black',
categories: ['User1', 'user2'],
title: {
text: null
}
};
var yAxis = {
gridLineDashStyle: 'shortdash',
min: 0,
max: 140,
tickInterval: 20,
title: {
text: 'Download ',
align: 'high'
},
labels: {
overflow: 'justify'
}
};
var tooltip = {
valueSuffix: ' MB'
};
var plotOptions = {
bar: {
dataLabels: {
enabled: true
},
},
series: {
pointPadding: 0,
pointWidth:40
}
};
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 12,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
};
var credits = {
enabled: false
};
var series= [
{
name: 'New',
data: [34.4,31]
},
{
name: 'old',
data: [110, 100]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.legend = legend;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
</body>
</html>
and the output is looking like
- How can i update the series value dynamically with some random values ? Is it possible with this bar chart code ?
Any useful links ?
Now i want to add 34.4 above on the label . not in-front of the label. Is it possible ?
Any suggestion ?
1 answers
solution1
0 2016-10-24 10:36:06
There are methods which will update series/data/point dynamically. For a series it is series.update().
chart.series[0].update({
data: [20, 2]
});
To position a label you can use x/y properties to move it around the chart, also you can experiment with align, verticalAlign, inside properties. You can set a specific label option to a single point.
data: [{
y: 20,
dataLabels: {
enabled: true,
inside: true,
y: -30
}}, 2]
Example: https://jsfiddle.net/9o64ybo4/3/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.