I want to make step chart has curved line using plotly.js.
The difference between the connecting parts is felt differently depending on the size of the currently different numerical value.
The thickness of the curve path is also different.
And want to hide Xaxis and Yaxis divide lines.
I want to make the whole chart look perfect while making it the same.
Like this image.
enter image description here
<!DOCTYPE html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this div -->
<div id="plotly-div"></div>
<body>
<script>
y = [0, 25, -35, -28, -10, 10, 25, 30, 35, 40, 65, 35];
x = [0, 5, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52];
trace = {
line: { shape: "vh" },
mode: "lines",
name: "vh",
type: "scatter",
x: x,
y: y,
};
let layout = {
xaxis: {
side: 'top'
},
showlegend: false,
//TODO: These curves interconnect diagonal lines and horizontal lines
shapes: [
//Use Cubic Quadratic Curve
{
type: 'path',
path: 'M 4,25 Q 4.8, 25 4.8 20',
line: {
color: 'black'
},
},
{
type: 'path',
path: 'M 5.2,-30 Q 5.2, -35 5.5, -35',
line: {
color: 'black'
}
},
]
};
let data = [];
for (let i = 1; i < x.length - 1; i++) {
let _x = x.slice(i - 1, i + 1);
// trace1 for the horizontal lines
//TODO: horizontal lines should stop at the appropriate x and y values
let bigger = y[i+1] > y[i] ? true : false
let _trace1 = {
mode: 'lines',
x: [_x[0] + 0.5, _x[1] - 1],
y: [y[i], y[i]],
type: 'line+markers',
line: {
color: 'black',
width: 1
}
};
// trace2 for the diagonal joining lines
//TODO: diagonal lines should cover about a percentage of the distance between the horizontal lines. Needs corrections
let _trace2 = {
mode: 'lines',
x: [x[i] - 0.2, x[i] + 0.2],
y: bigger ? [y[i], y[i + 1] + 5] : [y[i] -5 , y[i + 1] + 5],
type: 'line',
line: {
color: 'green',
width: 1
},
};
diff = y[i] - y[i - 1];
// trace3 for the vertical lines
//TODO: vertical lines should take into consideration correct increase or decrease
let _trace3 = {
mode: 'lines',
x: [x[i - 1] + 0.5, x[i - 1] + 0.5],
y: [1, diff],
type: 'line',
line: {
color: diff > 0 ? 'black' : 'red',
width: 5
}
};
layout.shapes[2*i -2] = {
type: 'path',
path: `M ${x[i]-1}, ${y[i]} Q ${x[i]-1}.8, ${y[i]} ${x[i]-1}.8 ${!bigger ? y[i]-5 : y[i]+5}`,
line: {
color: 'black'
},
}
layout.shapes[2*i -1] = {
type: 'path',
path: `M ${x[i]}.2, ${bigger ? y[i+1]-5 : y[i+1]+5} Q ${x[i]}.2, ${y[i+1]} ${x[i]}.5, ${y[i+1]}`,
line: {
color: 'black'
}
},
data.push(_trace1);
data.push(_trace2);
data.push(_trace3);
}
Plotly.plot("plotly-div", {
data: data,
layout: layout,
});
</script>
</body>
</html>
Yup. I solved the issue myself.
Plotly.js had solutions.
<!DOCTYPE html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this div -->
<div id="plotly-div"></div>
<body>
<script>
y = [0, 25, -35, -28, -10, 10, 25, 30, 35, 40, 65, 35];
x = [0, 5, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52];
let shapes = [];
let data = [];
for (let i = 1; i < x.length - 1; i++) {
// trace1 for the horizontal lines
//TODO: horizontal lines should stop at the appropriate x and y values
let bigger = y[i] > y[i - 1] ? true : false
let _w = (Math.abs(y[i] - y[i - 1]) / 80 + 0.3)
let _trace1 = {
mode: 'lines',
x: [x[i - 1], x[i] - _w],
y: [y[i - 1], y[i - 1]],
type: 'line+markers',
line: {
color: y[i - 1] < 0 ? '#EB5757' : (y[i - 1] > 50 ? '#2F80ED' : '#000000'),
width: 1
}
};
// trace2 for the diagonal joining lines
//TODO: diagonal lines should cover about a percentage of the distance between the horizontal lines. Needs corrections
let _trace2 = {
mode: 'lines',
x: [x[i] - _w + 0.15, x[i] - 0.15],
y: bigger ? [y[i - 1] + 1.5, y[i] - 1.5] : [y[i - 1] - 1.5, y[i] + 1.5],
type: 'line',
line: {
color: y[i] < 0 || y[i - 1] < 0 ? '#EB5757' : (y[i] > 50 || y[i - 1] > 50 ? '#2F80ED ' : '#000000'),
width: 1
},
};
var diff = y[i] - y[i - 1];
// trace3 for the vertical lines
//TODO: vertical lines should take into consideration correct increase or decrease
let _trace3 = {
mode: 'lines',
x: [x[i], x[i]],
y: [1, diff],
type: 'line',
line: {
color: diff > 0 ? '#000000' : '#EB5757',
width: 5
}
};
data.push(_trace1, _trace2, _trace3);
shapes.push({
type: 'path',
path: `M ${x[i] - _w}, ${y[i - 1]} Q ${x[i] - _w + 0.1}, ${y[i - 1]} ${x[i] - _w + 0.15} ${!bigger ? y[i - 1] - 1.5 : y[i - 1] + 1.5}`,
line: {
color: y[i - 1] < 0 || y[i] < 0 ? '#EB5757' : (y[i] > 50 || y[i - 1] > 50 ? '#2F80ED' : '#000000'),
width: 1
}
}, {
type: 'path',
path: `M ${x[i] - 0.15}, ${bigger ? y[i] - 1.5 : y[i] + 1.5} Q ${x[i] - 0.1}, ${y[i]} ${x[i]}, ${y[i]}`,
line: {
color: y[i - 1] < 0 || y[i] < 0 ? '#EB5757' : (y[i] > 50 || y[i - 1] > 50 ? '#2F80ED' : '#000000'),
width: 1
}
})
}
layout = {
xaxis: {
side: 'top',
showgrid: false,
autotick: false,
ticks: 'outside',
tick0: '',
dtick: 5,
tickcolor: 'red',
showline: true,
linecolor: '#E0E0E0',
linewidth: 1,
tickfont: {
size: 0,
color: 'red',
},
},
yaxis: {
showgrid: false,
showline: false,
ticks: 'outside',
tick0: 0,
dtick: 30,
ticklen: 4,
tickwidth: 2,
tickcolor: '#BDBDBD',
automargin: false,
tickfont: {
family: 'Old Standard TT, serif',
size: 12,
color: '#828282',
},
zeroline: true,
zerolinecolor: '#828282',
zerolinewidth: 2,
},
showlegend: false,
shapes: shapes,
}
Plotly.plot("plotly-div", {
data: data,
layout: layout,
});
</script>
</body>
</html>
Related
Problem: I am trying to plot a dumbel chart using highcharts. I want to conditionally check if the series is positive or negative and assign the color to the line series.
tried: to write a function to dynamically assign the colors but it does not work. But the same function is used to dynalically render circles and it work
https://jsfiddle.net/z4t2qg5o/
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
plotOptions: {
columnrange: {
colorByPoint: true,
colors: ['red', 'blue', 'yellow']
}
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
// name: 'Project 3',
// pointPadding: 0,
// groupPadding: 0,
//borderColor: 'gray',
pointWidth: 5,
data: [{
x: 32,
x2: 33,
y: 0,
val: -1,
//color:'red'
// partialFill: 0.25
}, {
x: 21,
x2:25,
y: 1,
val: 1,
//color:'#BADA55'
}, {
x:31,
x2: 32,
y: 2,
val: -1,
//color:'red'
}],
dataLabels: {
align: 'left',
enabled: false
}
}]
}, function() {
var chart = this,
leftOffset = chart.plotLeft,
topOffset = chart.plotTop,
series = chart.series[0],
xAxis = series.xAxis,
x2Axis = series.x2Axis,
yAxis = series.yAxis,
points = series.points;
points.forEach(function(point) {
var x = xAxis.toPixels(point.x) - leftOffset,
x2 = xAxis.toPixels(point.x2) - leftOffset,
y = yAxis.toPixels(point.y - 0.005) - topOffset,
toCenter = x2-x;
val = point.val;
toCenter = toCenter > 0 ? toCenter : -toCenter;
if(val > 0 ){
//to set the color of the line to green
point.color = '#BADA55';
chart.renderer.circle(x, y, 6).attr({
fill: '#BADA55',
//'stroke-width': 1,
stroke: '#BADA55',
zIndex: 10
}).add(series.group);
chart.renderer.circle(x2, y, 6).attr({
fill: '#BADA55',
//'stroke-width': 1,
stroke: '#BADA55',
zIndex: 10
}).add(series.group);
// toCenter = toCenter > 0 ? toCenter : -toCenter;
chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png',x2 + 74,y +35,20,20).attr({
zIndex: 15
}).add();
}
else{
//to set the color of the line to green
point.color = '#BADA55';
chart.renderer.circle(x, y, 6).attr({
fill: '#ff0000',
'stroke-width': 1,
zIndex: 10
}).add(series.group);
chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png',x + 92,y +35,20,20).attr({
zIndex: 15
}).add();
// toCenter = toCenter > 0 ? toCenter : -toCenter;
chart.renderer.circle(x2, y , 6).attr({
fill: '#ff0000',
// 'stroke-width': 2,
zIndex: 10
}).add(series.group);
}
});
});
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
Expected: In the link shared, I want the line to be green when the 'val' is positive and the line to be red when the 'val' is negative
There might be a better way to achieve what you want. instead of writing your own function use Zones.
Look here.
You can use zones like this :
series:[{
data : [1,5,-8,9,12]//your data
zones : [{value:0,color:'red'},{color:'green'}]
}]
A live example of this is provided by HighCharts API refrence at this jsfiddle.
I don't know if this counts as an answer to your question but taking a look at this Zone thing might buy you some time.
I need to fill the color of data series dynamically based on the variable ( left , right , center ) from my code.
I have attached my code and expected output:
$(document).ready(function() {
var left = [
[4, 7],
[9, 2]
];
var right = [
[2, 2],
[9, 9]
];
var center = [
[4,5.5],
[10,5.5]
];
Highcharts.chart('container', {
chart: {
events: {
load: function () {
const xAxis = this.xAxis[0]
const yAxis = this.yAxis[0]
const leftBottom = {
x: xAxis.toPixels(right[0][0]),
y: yAxis.toPixels(right[0][1])
}
const leftTop = {
x: xAxis.toPixels(left[0][0]),
y: yAxis.toPixels(left[0][1])
}
const rightBottom = {
x: xAxis.toPixels(left[1][0]),
y: yAxis.toPixels(left[1][1])
}
const rightTop = {
x: xAxis.toPixels(right[1][0]),
y: yAxis.toPixels(right[1][1])
}
const leftMiddle = {
x: xAxis.toPixels(4),
y: yAxis.toPixels(5.5)
}
const rightMiddle = {
x: xAxis.toPixels(10),
y: yAxis.toPixels(5.5)
}
const leftTopMiddle = {
x: xAxis.toPixels(3.7),
y: yAxis.toPixels(6.5)
}
const leftBottomMiddle = {
x: xAxis.toPixels(2.1),
y: yAxis.toPixels(4)
}
const rightTopMiddle = {
x: xAxis.toPixels(9.8),
y: yAxis.toPixels(8)
}
const rightBottomMiddle = {
x: xAxis.toPixels(9.8),
y: yAxis.toPixels(3)
}
const curveTopLeft = this.curveTopLeft = this.renderer.path().attr({
d: `M ${leftMiddle.x} ${leftMiddle.y} Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
const curveBottomLeft = this.curveBottomLeft = this.renderer.path().attr({
d: `M ${leftMiddle.x} ${leftMiddle.y} Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftBottom.x} ${leftBottom.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
const curveTopRight = this.curveTopRight = this.renderer.path().attr({
d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
const curveBottomRight = this.curveBottomRight = this.renderer.path().attr({
d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightBottom.x} ${rightBottom.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
}
}
},
title: {
text: ''
},
tooltip: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointStart: 1
}
},
xAxis: {
max: 10,
min: 1,
tickInterval: 1
},
yAxis: {
max: 11,
min: 0,
tickInterval: 1,
},
series: [{
showInLegend: false,
data: left
}, {
showInLegend: false,
data: right
},
{
showInLegend: false,
marker: {
enabled: true
},
data: center
}],
});
});
And my expected output should look like below,
You need to create a new path with no stroke but fill. The new path should be combined from the points you already defined.
const d = `M ${leftBottom.x} ${leftBottom.y}
Q ${leftBottomMiddle.x} ${leftBottomMiddle.y} ${leftMiddle.x} ${leftMiddle.y}
Q ${leftTopMiddle.x} ${leftTopMiddle.y} ${leftTop.x} ${leftTop.y}
L ${rightBottom.x} ${rightBottom.y}
Q ${rightBottomMiddle.x} ${rightBottomMiddle.y} ${rightMiddle.x} ${rightMiddle.y}
Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}
Z`
const fillPath = this.renderer.path().attr({
d: d,
'stroke-width': 0,
fill: '#b19cd9',
zIndex: 1
}).add()
example: http://jsfiddle.net/r0j46wn6/24/
You can make use of the .css() method of your this.renderer.path() to set the fill style.
For example, Let's take the case of curveTopRight for what you can add that css as,
const curveTopRight = this.curveTopRight = this.renderer.path().css({
color: '#c8bfe7',
fill: '#c8bfe7'
}).attr({
d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`,
'stroke-width': 2,
stroke: 'red',
zIndex: 99
}).add()
However it is working only for the curved elements and not for the area's which are between the lines that you have drawn.
Here is a partially working example:
http://jsfiddle.net/r0j46wn6/23/
Hope this helps!
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:
The situation with my char is that currently the tick marks are positioned according to my "tickposition" paramenter, they displayed what I want but the problem is that for example the tick mark on '50' should be right on the middle of the chart, below the 50% bubble. So my chart looks off center.
I am not sure if the type of chart I am using is the correct one or how to approach this problem. I am super new on Highcharts.
Here is what I have:
http://jsfiddle.net/cjwh/hu1t8159/15/
$(function () {
$('#container').highcharts({
xAxis: {
tickPositions: [250, 500, 750, 1000],
min: 0,
max: 900,
labels: {
formatter: function() {
return this.value / 10;
}
},
},
yAxis: {
min: 0,
allowDecimals: false,
floor : 0,
ceiling: 200,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: null
}
},
chart: {
events: {
redraw: function () {
var chart = this,
point = chart.series[1].points[0];
if(chart.customLabel) {
chart.customLabel.attr({
x: point.plotX + chart.plotLeft - 25,
y: point.plotY + chart.plotTop - 65,
anchorX: point.plotX + chart.plotLeft,
anchorY: point.plotY + chart.plotTop
});
}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'areaspline',
marker: {
enabled: false
},
data: [
[0, 1],
[210, 1],
[225, 2],
[372,108],
[378,112],
[387, 118],
[396, 122],
[403, 125],
[433, 130],
[450, 129],
[460, 126],
[472, 122],
[479, 118],
[486, 114],
[495,108],
[502,102],
[504,100],
[510, 94],
[514, 89],
[518, 85],
[522, 81],
[526, 76],
[529, 72],
[534, 67],
[541, 59],
[548, 51],
[556, 43],
[566, 34],
[583, 22],
[593, 17],
[612, 9],
[621, 6],
[626, 5],
[635, 3],
[642, 2],
[651, 1],
[870, 1],
[1000, 1]
],
zoneAxis: 'x',
zones: [{
value: 430,
color: '#18d1ba'
}, {
color: '#74e3d6'
}]
}, {
type: 'scatter',
data: [
[430, 130]
],
marker: {
radius: 8,
symbol: 'circle',
fillColor: '#fff',
lineColor: '#09f',
lineWidth: 3
}
}]
}, function (chart) { // on complete
var point = chart.series[1].points[0];
chart.customLabel = chart.renderer.label('50%', point.plotX + chart.plotLeft - 25, point.plotY + chart.plotTop - 65, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#09f',
fontSize: '18px'
})
.attr({
'stroke-width': 3,
stroke: '#09f',
fill: '#fff',
padding: 8,
r: 5,
zIndex: 6
})
.add();
});
});
This is a picture of the desired chart, please note the position of the 'x' positions or tickmarks.
http://claudiawong.ca/test/example.png
Would anyone happen to give me an example of what to change, ideally an example on the form of a jsfiddle would be really helpful.
Thanks!!!!
To expand on my comment:
1) You know, in your example, that 50% is 430. You can determine from that what 25, 75, and 100% are.
2) You can set the values of those percentages as your tickPositions array.
3) You will need to map the values to the % that you want to display in your labels
A very quick and dirty example:
var x100 = 860;
var x75 = (x100 * .75);
var x50 = (x100 * .5 );
var x25 = (x100 * .25);
var vals = {};
vals[x100] = '100';
vals[x75 ] = '75';
vals[x50 ] = '50';
vals[x25 ] = '25';
You can then use this object in your label formatter to display the correct value.
Example:http://jsfiddle.net/hu1t8159/18/
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;