I got stuck somewhere and there I want your help. I want a Pie chart data-label feature into the variable Pie chart. which is like the data should stay in the centre of the chart piece.
I tried so many ways but not fit in the centre like the data label indication line.
Please check the code and design below and help me to fix my issue...
This's the design reference for the Output
This's the current output of my code
This's the link for the current output...
<script>
Highcharts.setOptions({
colors: ['#2B2E33', '#4D5566', '#8590A6', '#B8C3D9', '#02D42E']
});
Highcharts.chart('container', {
chart: {
type: 'variablepie',
style: {
fontFamily: "'Montserrat-Regular', 'sans-serif'",
letterSpacing: '0.5px',
},
events: {
load: function() {
var series = this.series[0],
distance = series.points[0].shapeArgs.r / 2;
series.update({
dataLabels: {
distance: -distance
}
});
}
}
},
title: {
text: ' '
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b> {point.y}<br/>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
legend: {
symbolRadius: 0,
itemStyle: {
fontWeight: 'bold',
color:'#8590A6',
textOverflow: 'clip'
}
},
plotOptions: {
variablepie: {
allowPointSelect: true,
cursor: 'pointer',
//showInLegend: true,
dataLabels: {
enabled: true,
alignTo: 'center',
format: '{point.percentage:.1f} %',
distance: -10,
style:{
textOutline: 'none',
fontSize: 15,
lineHeight: 0,
color:'white',
fontWeight: 'bold',
},
filter: {
property: 'percentage',
operator: '>',
value: 2
}
}
}
},
series: [{
innerSize: '40%',
zMin: 0,
name: 'countries',
data: [{
name: 'Google',
y: 25,
z: 100,
}, {
name: 'Facebook',
y: 14,
z: 115
}, {
name: 'Pinterest',
y: 11,
z: 85
}, {
name: 'Yelp',
y: 10,
z: 90
}, {
name: 'Local Services',
y: 40,
z: 140
}]
}]
}, function (chart) {
$legend = $('#customLegend');
$.each(chart.series[0].data, function (j, data) {
$legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div><div class="value" id="">' + data.y + '</div></div>');
});
$('#customLegend .item').click(function(){
var inx = $(this).index(),
point = chart.series[0].data[inx];
if(point.visible)
point.setVisible(false);
else
point.setVisible(true);
});
});
You can add some extra info to your serie in order to position you label correctly.
For instance:
{
name: 'Pinterest',
y: 11,
z: 85,
dataLabels: {
distance: -30,
x: -20
}
}, {
name: 'Yelp',
y: 10,
z: 90,
dataLabels: {
distance: -30,
x: 30
}
This may help for static charts.
I prepared a demo where the center of the arc point is calculated and used as translate function coordinates to center the data label.
events: {
render: function() {
const series = this.series[0];
series.points.forEach(p => {
const dataLabel = p.dataLabel;
const args = p.shapeArgs;
const angle = (args.start + args.end) / 2;
const r = (args.innerR + args.r) / 2;
const x = args.x + (r * Math.cos(angle)) - dataLabel.bBox.width / 2;
const y = args.y + (r * Math.sin(angle)) - dataLabel.bBox.height / 2;
dataLabel.translate(x, y)
})
}
}
Demo: https://jsfiddle.net/BlackLabel/c3wf85g7/
I have this dynamic chart, Can I ask on how can I add a horizontal gridline that is moving together with the marker ? and also a vertical gridline that is like 60second far from the current marker?
Highcharts.theme = {
colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee',
'#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
chart: {
backgroundColor: 'transparent',
style: {
fontFamily: '\'Unica One\', sans-serif'
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase'
}
},
xAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
legend: {
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#606063'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: '#505053',
stroke: '#000000',
style: {
color: '#CCC'
},
states: {
hover: {
fill: '#707073',
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: '#000003',
stroke: '#000000',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
scrollbar: {
barBackgroundColor: '#808083',
barBorderColor: '#808083',
buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063',
buttonBorderColor: '#606063',
rifleColor: '#FFF',
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
jugalsLib = {
defaults: {
//interval: 24 * 60 * 60 * 1000,
minValue: 0,
maxValue: 10000,
maxDeviationPercentOfRange: 5,
numberOfSeries : 1
},
variables: {
seriesCounter: 0
},
nextValue: function(currValue, options) {
var settings = $.extend({}, jugalsLib.defaults, options || {}),
nextValue,
offset;
currValue=currValue || (settings.maxValue + settings.minValue) / 2;
settings.maxDeviation =
settings.maxDeviation ||
(settings.maxValue - settings.minValue) * settings.maxDeviationPercentOfRange / 100;
while (nextValue === undefined || nextValue < settings.minValue || nextValue > settings.maxValue) {
offset = Math.random() * settings.maxDeviation * 2;
nextValue = currValue - settings.maxDeviation + offset;
}
return nextValue;
},
createSeries: function(options) {
var settings = $.extend({}, jugalsLib.defaults, options || {}),
data = [],
currValue,
i,
time,
valuePair;
time = new Date().getTime();
for (i = 0; i < settings.sampleCount; i++) {
currValue = jugalsLib.nextValue(currValue, settings);
valuePair = [];
time += settings.interval;
valuePair.push(time);
valuePair.push(currValue);
data.push(valuePair);
}
return {
name: 'orvie test data',
data: data
};
}
};
jugalsLib.getBasicChartOptions = function(numberOfSeries,seriesOptions) {
$("#container").mousemove(move);
var options = {
chart: {
renderTo: 'container',
},
title: {
text: 'test'
},
subtitle: {
useHTML: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
gridLineWidth: 1,
maxPadding: 0.5,
navigator: true,
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
plotOptions: {
line: {
marker: {
enabled: false,
radius: 2,
},
states: {
hover: {
radiusPlus: 1,
lineWidthPlus: 0
},
}
},
series: {
lineWidth: 1.5,
dataLabels: {
align: 'center',
enabled: false,
},
showInLegend: false,
hover: {
lineWidthPlus: 0,
animation: { "duration": 1 }
},
states: {
hover: {
halo: {
size: 1,
attributes: {
fill: Highcharts.getOptions().colors[2],
'stroke-width': 7,
stroke: Highcharts.getOptions().colors[4]
}
}
}
},
},
}
};
numberOfSeries = numberOfSeries || jugalsLib.defaults.numberOfSeries;
if(numberOfSeries>0){
var i;
options.series=[];
for(i=0;i<numberOfSeries;i++)
options.series.push(jugalsLib.createSeries(seriesOptions));
}
return options;
};
var interval=1000;
var a=0;
var coor_x;
var coor_y;
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chartingOptions = {
chart: {
renderTo: 'container',
events: {
load: function() {
var series = this.series[0];
var series2 = this.series[1];
len = series.data.length;
this.addSeries({
id: 'end point',
type: 'scatter',
marker: {
enabled:true,
symbol:'circle',
radius:3,
fillColor:'white',
lineWidth:2,
states: {
hover: {
enabled: 'true',
},
},
},
data: [[
series.data[len - 1].x,
series.data[len - 1].y
]]
});
var series3= this.get('end point');
setInterval(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points[l - 1];
var ix = p.x + interval;
var vv = jugalsLib.nextValue(p.y);
var w = ix + 30000,
z = jugalsLib.nextValue(p.y);
var v;
a = 0;
if (a == 1) {
v = {
y: vv,
x: ix,
};
}
else {
v = {
y: vv,
x: ix,
};
}
series.addPoint(v, true, true);
series3.data[0].setState('hover');
series3.data[0].update(v);
series3.data[0].setState();
series2.addPoint([w,z], true, true);
document.getElementById("coor_y").value = jugalsLib.nextValue(p.y).toFixed(4);
}, interval);
},
}
},
rangeSelector: {
enabled: true,
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 4,
type: 'minute',
text: '4M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0,
},
navigator:{
enabled: true
},
exporting: {
enabled: false
},
series: [{
name: 'AAPZ',
type: 'area',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -300; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.random() * 10000
]);
}
return data;
}()),
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
enabled: false,
radius: 2,
},
},{
name: 'AAPL',
type: 'area',
enableMouseTracking: false,
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime()+30000,
i;
for (i = -300; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.random() * 10000
]);
}
return data;
}()),
gapSize: 5,
color: 'transparent',
}]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(1, {
sampleCount: 300,
interval: interval
}), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var x=1;
var count = 0;
$("#btngreen").click(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points[l - 1];
// document.getElementById("amount"+ id++ +"").value = jugalsLib.nextValue(p.y).toFixed(4);
//document.getElementById("range").value = "up";
var d = document.getElementById('order');
var amount = document.getElementById("coor_y").value;
var range = 'up';
d.innerHTML += "Call : <input type='text' maxlength='5' size='5' id='amount"+ x +"' value = "+amount+"> ";
d.innerHTML += "End: <input type='text' maxlength='5' size='5' id='end"+ x +"' value = '--rolling--'> ";
d.innerHTML += "Range: <input type='text' id='range"+ x +"' value = "+range+" maxlength='4' size='4'><br>";
p.update({
marker: {
symbol: 'Circle',
fillColor: "#02CD0E",
lineColor: "A0F0",
radius: 2,
enabled:true,
},
dataLabels: {
align: 'right',
enabled: true,
shape: 'callout',
padding: 1,
overflow: "none",
backgroundColor: '#02CD0E',
style: {"color": "contrast", "fontSize": "10px" },
formatter: function() {
return document.getElementById("bet").value;
}
}
});
a = 1;
if (x <= 1 ){
countdown();
}
x++;
count++;
document.getElementById("count").value = count;
});
$("#btnred").click(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points[l - 1];
var d = document.getElementById('order');
var amount = document.getElementById("coor_y").value;
var range = 'down';
d.innerHTML += "Put  : <input type='text' maxlength='5' size='5' id='amount"+ x +"' value = "+amount+"> ";
d.innerHTML += "End: <input type='text' maxlength='5' size='5' id='end"+ x +"' value = '--rolling--'> ";
d.innerHTML += "Range: <input type='text' id='range"+ x +"' value = "+range+" maxlength='4' size='4'><br>";
p.update({
marker: {
symbol: 'Circle',
fillColor: "#FF0124",
lineColor: "A0F0",
radius: 2,
enabled:true,
},
dataLabels: {
align: 'right',
enabled: true,
shape: 'callout',
padding: 1,
overflow: "none",
backgroundColor: '#FF0124',
style: {"color": "contrast", "fontSize": "10px" },
formatter: function() {
return document.getElementById("bet").value;
}
}
});
a = 1;
if (x <= 1 ){
countdown();
}
x++;
count++;
document.getElementById("count").value = count;
});
function countdown() {
var seconds = 60;
function tick() {
var counter = document.getElementById("counter");
// alert(counter);
seconds--;
counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
setTimeout(tick, 1000);
clearInterval(counter);
if( seconds < 15 ){
document.getElementById('btngreen').style.visibility = 'hidden';
document.getElementById('btnred').style.visibility = 'hidden';
}
}
else {
var count = document.getElementById("count").value
var i;
for(i = 1; i <= count; i++){
var amountid = "amount" + i;
var rangeid = "range" + i;
var end = "end" + i;
// console.log(amountid);
var current = document.getElementById("coor_y").value;
var amount = document.getElementById(amountid).value;
var range = document.getElementById(rangeid).value;
var endid = "end" + i;
document.getElementById(endid).value = document.getElementById("coor_y").value;
//console.log(amount);
//console.log(range) ;
if (current > amount && range == 'up'){
document.getElementById(amountid).style.color = "#66CD00"
}
else if (current > amount && range == 'down'){
document.getElementById(amountid).style.color = "#FF0000";
}
else if (current < amount && range == 'up'){
document.getElementById(amountid).style.color = "#FF0000";
}
else if (current < amount && range == 'down'){
document.getElementById(amountid).style.color = "#66CD00";
}
}
}
}
tick();
}
function move(event) {
var x = event.pageX,
y = event.pageY,
labelPadding = [0, 0, 0, 0],
path = ['M', chart.plotLeft, y,
'L', chart.plotLeft + chart.plotWidth, y,
'M', x, chart.plotTop,
'L', x, chart.plotTop + chart.plotHeight];
if (chart.crossLines) {
// update lines
if(chart.yAxis[0].toValue(y) > 0){
chart.crossLines.attr({
d: path
}).show();
}
} else {
if(chart.yAxis[0].toValue(y) > 0){
// draw lines
chart.crossLines = chart.renderer.path(path).attr({
'stroke-width': 1,
stroke: 'white',
dashstyle: 'Dash',
zIndex: 10
}).add();
}
}
if (chart.crossLabel) {
// update label
chart.crossLabel.attr({
y: y - 10,
text: chart.yAxis[0].toValue(y).toFixed(2),
zIndex: 9,
right: 0
}).show();
console.log(chart.crossLabel);
} else {
// draw label
chart.crossLabel = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotBottom, chart.plotTop + chart.plotHeight + 12 + labelPadding[0]).css({
color: 'white'
}).add();
}
}
If my question is confusing please refer to the image I attached.
For your reference, here is a working copy of what I am doing - https://jsfiddle.net/0hhfm32k/
Fiddle Demo with your config
it is 6 sec ahead instead of 60 sec when putting 60000 ie 60 sec it is out of display
setInterval(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points[l - 1];
var ix = p.x + interval;
var vv = jugalsLib.nextValue(p.y);
var w = ix + 30000,
z = jugalsLib.nextValue(p.y);
var v;
a = 0;
if (a == 1) {
v = {
y: vv,
x: ix,
};
} else {
v = {
y: vv,
x: ix,
};
}
series.addPoint(v, true, true);
series3.data[0].setState('hover');
series3.data[0].update(v);
series3.data[0].setState();
series2.addPoint([w, z], true, true);
document.getElementById("coor_y").value = jugalsLib.nextValue(p.y).toFixed(4);
yAxis.removePlotLine('avgLine');
yAxis.addPlotLine({
value: vv,
/*label: {
text: vv.toFixed(2),
verticalAlign: 'middle',
align: 'right',
rotation: 0,
},*/
color: 'red',
width: 4,
dashStyle: 'Dash',
id: 'avgLine'
});
xAxis.removePlotLine('ahLine');
xAxis.addPlotLine({
value: ix + 6000,
/*label: {
text: Highcharts.dateFormat('%I:%M:%S %p', ix+6000) ,
verticalAlign: 'middle',
align: 'right',
rotation: 0,
},*/
color: 'red',
width: 2,
dashStyle: 'Dash',
id: 'ahLine'
});
}, interval);
In the documentation there is legendCallback and generateLabels and I don't understand the documentation that much. Given my code below. How can I change the legends to make it into one legend per line,have a background and line chart legend should look like a line not a bar or in short how to customize the legend.
JS:
vm.labels = ['2015 - Aug', '2015 - Sept', '2015 - Oct', '2015 - Nov', '2015 - Dec', '2016 - Jan',
'2016 - Feb', '2016 - Mar', '2016 - April', '2016 - May', '2016 - Jun', '2016 - Jul', '2016 - Aug',
];
vm.series = [
'A',
'B',
];
vm.data = [
[14, 12, 17, 24, 29, 17, 23, 10, 16, 20, 33, 5, 8],
[50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
];
vm.colors = [
{
backgroundColor: 'rgba(0,104,26,1)',
borderColor: 'rgba(0,104,26,1)',
},
{
backgroundColor: 'rgba(56,80,143,1)',
borderColor: 'rgba(56,80,143,1)',
},
];
vm.options = {
scales: {
xAxes: [
{
ticks: {
callback: function (value) {
var values = value.split(' ');
var date = [values[0], values[2]];
return date;
},
},
},
],
yAxes: [
{
ticks: {
max: 100,
min: 0,
step: 20,
callback: function (value) {
return value + '%';
},
},
},
],
},
// legend
legend: {
display: true,
position: 'bottom',
},
// title
title: {
display: true,
text: 'Chart',
fontSize: 15,
},
// hover
hover: {
mode: 'single',
},
// tooltips
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
title: function (tooltipItems, data) {
var idx = tooltipItems[0].datasetIndex;
var year = tooltipItems[0].xLabel[0];
var month = tooltipItems[0].xLabel[1];
if (idx === 0) {
return year + '-' + month;
} else {
return '';
}
},
label: function (tooltipItems, data) {
var idx = tooltipItems.datasetIndex;
var dataidx = tooltipItems.index;
var seriesValue = data.datasets[idx].label;
var value = data.datasets[idx].data[dataidx];
if (idx === 0) {
return seriesValue + ': ' + value + '%';
} else {
return seriesValue + ' (' + value + '%)';
}
},
},
},
};
vm.datasetOverride = [];
for (var i = 0; i < vm.series.length; i++) {
vm.datasetOverride.push(
{
lineTension: 0,
fill: false,
pointStyle: 'circle',
pointRadius: 0,
pointHoverRadius: 4,
pointHitRadius: 10,
type: 'line',
}
);
}
vm.datasetOverride[1].borderDash = [5, 1];
HTML
<canvas id="line"
class="chart chart-line"
chart-data="vm.data"
chart-labels="vm.labels"
chart-series="vm.series"
chart-options="vm.options"
chart-colors="vm.colors"
chart-dataset-override="vm.datasetOverride"></canvas>
Currently:
I have a graph with 2 line series. Points in each series are percent but I get them from the database in this format : 0.24 for 24% , 0.02 for 2% ...
Is there any method for multiply the value by 100 directly in my graph options ? I try to use pointFormat and pointFormatter but my test isn't succesfull...
My graph configuration :
options.evolRes.chart = {
renderTo: 'container_graph',
backgroundColor: '#F1F1F1',
width: $('#container_graph:parent').width(),
height: 700
};
options.evolRes.title = {
text: 'Title',
x: -20
};
options.evolRes.yAxis = [
{
title: {
text: 'Result'
},
labels: {
format: '{value}%'
},
min: 0,
max: 100,
tickInterval: 10
}
];
options.evolRes.xAxis = {
categories: ['T1','T2','T3','T4','T5','T6'],
labels: {
rotation: -45,
y: 20
}
};
options.evolRes.tooltip = {
crosshairs: true,
shared: true,
valueDecimals: 2
};
options.evolRes.series = [
{
name: 'Result X',
data: [0.2, 0.85, 0.63, 0.05, 0.26, 0.85],
yAxis: 0,
type: 'areaspline',
tooltip: {
valueSuffix : '%'
}
},{
name: 'Result Y',
data: [0.25, 0.35, 0.73, 0.05, 0.16, 0.25],
yAxis: 0,
type: 'areaspline',
tooltip: {
valueSuffix : '%'
}
}
]
try out this
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function () {
s += '<br/>' + this.series.name + ': ' +
this.y *100;
});
return s;
},
shared: true
}
sample fiddle :)
I'm working on a dynamically loaded speedometer. Beyond my troubles with Ajax calls in conjunction with the speedometer, I have trouble keeping the 'needle' within the range (0-20). The integer output shows a number less than or greater than 20 as the needle spins past 0 or 20 in the wrong direction. I would like to keep it to the right of 0 and the left of 20. My code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<title>Tribble Inc Sales Meter</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Sales-O-Meter'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 20,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 20,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 1,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'sales/min'
},
plotBands: [{
from: 0,
to: 4,
color: '#DF5353' // green
}, {
from: 4,
to: 8,
color: '#DDDF0D' // yellow
}, {
from: 8,
to: 20,
color: '#55BF3B' // red
}]
},
series: [{
name: 'Speed',
data: [18],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.floor((Math.random() - 1) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 20) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<!--<script src="exporting.js"></script>-->
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I'm not entirely sure what I'm doing wrong...perhaps the Math.floor() function is off but I don't think so. Can someone help out?
inc = Math.floor((Math.random() - 1) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 20) {
newVal = point.y - inc;
This code generates a negative inc, adds it to point, making point negative, and then subtracts it to point, making point more positive. It goes wrong because inc can be larger than point.
The algorithm you need depends on how you want the chart to vary. If you want the needle to wobble, then generate a smaller inc, add it to point and then bounds check it.
inc = (Math.random() * 2.0)-1.0;
newVal = point.y + inc;
if (newVal < 0 || newVal > 20) {
newVal = point.y - inc;