I'm trying to apply the new threshold/negativeColor features of Highcharts v3.0.2 to essentially the 'spline updating each second' example.
During the animation of the chart updating, I'm seeing weird artifacts in the series line - it looks like it's animating to a different set of control points.. and then it snaps back to the correct configuration when the animation (of the new data point coming in) is done.
Commenting out the threshold/negativeColor features makes this visual artifact go away.
Am I seeing a bug?
UPDATE: I'm posting the following code as an example, which is the stock highcharts demo (my local jquery is v1.10.2) with the threshold/color/negativeColor lines (first lines under series) added by me. This code seemingly misbehaves.
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
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);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
threshold: 0.5,
color: '#FF0000',
negativeColor: '#00FF00',
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Indeed it looks like a bug, reported here. At this moment you can only disable animations.
Related
We are going to buy a high chart.
We are going to implement the medical chart eeg chart on the web.
Can I implement the shape of an eeg chart with a high chart?
The EEG chart shows that the X axis is time and the Y axis
It has 19 channels with individual ranges.
https://www.researchgate.net/figure/Case-6-EEG-in-a-38-year-old-woman-with-refractory-complex-partial-seizures-and-left_fig3_233806823
By using Highcharts, you can create as many axes as you need. I have prepared a simple example with multiple yAxes and different ranges:
var series = [],
data,
seriesCount = 20,
pointsCount = 100,
axisTop = 50,
range,
axisHeight = 1100 / seriesCount,
yAxis = [];
for (var i = 0; i < seriesCount; i++) {
range = Math.round(Math.random() * 100);
data = [];
for (var j = 0; j < pointsCount; j++) {
data.push(Math.floor(Math.random() * range));
}
series.push({
data: data,
yAxis: i
});
yAxis.push({
title: {
text: ''
},
height: axisHeight,
top: axisTop,
offset: 0
});
axisTop += axisHeight + 12.5
}
Highcharts.chart('container', {
chart: {
height: 1500
},
series: series,
yAxis: yAxis
});
Live demo: http://jsfiddle.net/BlackLabel/425xctvw/
You can try for synchronized charts where x axis can be common across all the graphs.
https://www.highcharts.com/demo/synchronized-charts
Reference Code: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/
/*
The purpose of this demo is to demonstrate how multiple charts on the same page
can be linked through DOM and Highcharts events and API methods. It takes a
standard Highcharts config with a small variation for each data set, and a
mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
// Find coordinates within the chart
event = chart.pointer.normalize(e.originalEvent);
// Get the hovered point
point = chart.series[0].searchPoint(event, true);
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and
* crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
event = this.series.chart.pointer.normalize(event);
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(
e.min,
e.max,
undefined,
false,
{ trigger: 'syncExtremes' }
);
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} min'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function () {
return {
// right aligned
x: this.chart.chartWidth - this.label.width,
y: 10 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
.chart {
min-width: 320px;
max-width: 800px;
height: 220px;
margin: 0 auto;
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Please refer to http://jsfiddle.net/a6h6cLnt/. The '3m' and '1m' buttons are not working. Earlier with a smaller dataset, none of the zoom buttons were working. The url to the smaller dataset is http://jsfiddle.net/a6h6cLnt/1/
$(function () {
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT'],
// create the chart when all data is loaded
createChart = function () {
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
};
$.each(names, function (i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) {
seriesOptions[i] = {
name: name,
data: [[1346371200000,12],[1348963200000,13],[1354233600000,4],[1377907200000,12],[1380499200000,13],[1385769600000,4],[1406764800000,1],[1409443200000,15],[1412035200000,20],[1414713600000,2],[1417305600000,4]]
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
The '1m' and '3m' zoom buttons/links are not working.
Please let me know how to enable them or make them work
Regards
Joseph
You need to set minRange parameter to define minimum zoom.
Example: http://jsfiddle.net/a6h6cLnt/2/
I am attempting to write a function to add a highchart to a page and a function that can update the data for that chart based on a streaming API. I added a setInterval to simulate the streaming api.
The issue occurs on line 80. I believe it is because I have not set the series array with the chart object properly. When I need to add new data via 'addPoint', the prototype is not there. What am I missing in my AddChart function that wires the series up to highcharts?
FIDDLE:
http://jsfiddle.net/puto3Lg0/2/
$(function () {
$(document).ready(function () {
var metrics = [];
Highcharts.setOptions({
global: {
useUTC: false
}
});
function AddChart(metric) {
$("#divMain").append('<div id="' + metric.key + '" style="min-width: 310px; height: 200px; margin: 0 auto"></div>');
$('#' + metric.key).highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
},
title: {
text: metric.Title
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Messages'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
}
]
},
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);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: metric.series
});
};
function ParseData(message) {
var jsonObj = JSON.parse(message);
$.each(jsonObj.Metrics, function(index, value) {
var metricName = value.Metric.Name.replace(' ', '');
if (metrics[metricName] == undefined) {
metrics[metricName] = {
"title": value.Metric.Name,
"key": metricName,
"series": [
{
name: value.Metric.Name,
data: []
}
],
}
AddChart(metrics[metricName]);
}
metrics[metricName].series.addPoint([new Date().getTime(), parseInt(value.Metric.CurrentValue)], true, false);
});
};
setInterval(function () {
var m = "{\"Metrics\": [{\"Metric\":{\"Name\":\"Queue 01\",\"CurrentValue\":\"0\",\"TimeStamp\":\"\\\x2FDate(1415826323291)\\\x2F\"}},{\"Metric\":{\"Name\":\"Queue 02\",\"CurrentValue\":\"3\",\"TimeStamp\":\"\\\x2FDate(1415826323344)\\\x2F\"}},{\"Metric\":{\"Name\":\"Queue 03\",\"CurrentValue\":\"9\",\"TimeStamp\":\"\\\x2FDate(1415826323405)\\\x2F\"}}]}";
ParseData(m);
}, 1000);
});
});
First, you have metrics declared as an array. Should be an empty object:
var metrics = {};
Second, the data structure you've created, metrics[metricName].series is not a Highcharts series object. It's an object you created and used to supply Highcharts data. To get the real series object, you'll have to get it back from the chart.
// getting the chart from the DOM, then the first series...
$("#"+metricName).highcharts().series[0].addPoint([new Date().getTime(), parseInt(value.Metric.CurrentValue)], true, false);
Updated fiddle.
When dragging one of the navigator handles, both dates change.
To reproduce, go to http://jsfiddle.net/rNer2/5/ and drag one of the navigator handles. In the provided test case, the problem only occurs the first time a handle is dragged. It can actually also happen in other situations, but perhaps fixing it here will fix it for the other cases as well.
See duplicate code below:
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="mindate" style="position:absolute;top:40px;left:0px;margin-left:20px;"></div>
<div id="maxdate" style="position:absolute;top:40px;right:0px;margin-right:50px;">
$(function() {
var data = [];
for (var i = 1971; i < 2020; ++i) {
data.push([Date.UTC(i, 0, 1), 1]);
}
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
displayDates(this.xAxis[0].getExtremes());
}
}
},
xAxis: {
ordinal: false,
events: {
afterSetExtremes: function(e) {
displayDates(e);
}
},
min: Date.UTC(1984, 0, 1),
max: Date.UTC(1988, 0, 1)
},
series: [{
data: data
}]
});
});
function displayDates(e) {
$('#mindate').html(Highcharts.dateFormat('%m/%d/%y %I:%M:%S%p', e.min));
$('#maxdate').html(Highcharts.dateFormat('%m/%d/%y %I:%M:%S%p', e.max));
}
Please familiar with very simple example:
http://jsfiddle.net/ebLTE/
$('#container').highcharts('StockChart', {
chart:{
type:'column'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
xAxis:{
min:1172707200000,
max:1175126400000
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
Steps to reproduce.
We have a chart that display 4 series of data, and we have the corresponding legends with each series.
THe initial chart is loaded with 1 years worth of data.
We then remove all data-series from the chart by clicking on the 4 legends
We then change the Zoom level of the chart - e.g. going from a 6 month zoom, to a 3 month zoom. (NOTE: We change Zoom with no data-series being displayed).
We then re-enable the data-series by clicking on the legends.
The chart does not redraw correctly. To get the chart to redraw we have to reload the entire page.
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 600px"> </div>
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 4
},
scrollbar: {
enabled: false
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
JsFiddle Example
It looks like a bug, so I've reported it to our devs here: https://github.com/highslide-software/highcharts.com/issues/1568
A simple workaround :
After some trial and error, I found out that if you do not disable the navigator, the above bug is not exhibited. (Navigator is enabled by default.)
Comment the line as shown below:
navigator: {
//enabled: false
}
Js Fiddle : http://jsfiddle.net/msjaiswal/FDXBu/1/
Certainly this is a bug in Highcharts but we can live with this above simple workaround.
This issue has been resolved in version 1.3.2 of HighStock.