I recently came across this really nice example: https://jsfiddle.net/BlackLabel/7t59w4po/
Basically, what it does is that it synchronizes the drag of a line in one graph in all the other graphs.
I was wondering if someone could help me out to reproduce the same example, but instead of one vertical line, I would like to have two. Is this possible?
Thank you!
JS Code:
/*
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.
*/
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
document.getElementById('container').addEventListener(
eventType,
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);
// 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'
}
);
}
}
});
}
}
/**
* Synchronize annotations drag&drop
*/
function syncAnnotations(e) {
var thisChart = this.chart;
var newX = this.options.shapes[0].points[0].x
if (e.type !== 'afterUpdate') {
Highcharts.each(Highcharts.charts, function(chart) {
if (chart !== thisChart) {
chart.annotations[0].update({
labels: [{
point: {
x: newX
}
}],
shapes: [{
points: [{
x: newX,
xAxis: 0,
y: 0
}, {
x: newX,
xAxis: 0,
y: 1000
}]
}]
});
}
});
}
}
// Get the data. The contents of the data file can be viewed at
Highcharts.ajax({
url: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/activity.json',
dataType: 'text',
success: function(activity) {
activity = JSON.parse(activity);
activity.datasets.forEach(function(dataset, i) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function(val, j) {
return [activity.xData[j], val];
});
var chartDiv = document.createElement('div');
chartDiv.className = 'chart';
document.getElementById('container').appendChild(chartDiv);
Highcharts.chart(chartDiv, {
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} km'
}
},
yAxis: {
title: {
text: null
}
},
annotations: [{
draggable: 'x',
animation: {
defer: false
},
events: {
drag: syncAnnotations,
afterUpdate: syncAnnotations
},
shapes: [{
strokeWidth: 3,
type: 'path',
points: [{
x: 3,
y: 0,
xAxis: 0
}, {
x: 3,
y: 1000,
xAxis: 0
}]
}],
labels: [{
point: {
x: 3,
y: 30,
xAxis: 0
},
shape: 'rect',
formatter: function(e) {
// Use shape options because value is available there. Label use translation only
return this.target.annotation.shapes[0].options.points[0].x.toFixed(3);
}
}]
}],
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
}
}]
});
});
}
});
You only need to add another annotation:
annotations: [{
...,
{
...
}],
And improve the syncAnnotations function a little bit:
function syncAnnotations(e) {
var thisChart = this.chart;
var newX = this.options.shapes[0].points[0].x
var index = this.chart.annotations.indexOf(this);
if (e.type !== 'afterUpdate') {
Highcharts.each(Highcharts.charts, function(chart) {
if (chart !== thisChart) {
chart.annotations[index].update({
...
});
}
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/jwtLc379/
API Reference: https://api.highcharts.com/highcharts/annotations
Related
I'm using Highcharts series line charts in React. The config is below. Everything is working fine except on mobile browser like Safari, when I move my finger across the line chart (horizontally) to 'hover' over each data point in a series, it also moves the page vertically ever so slightly. I presume each time I pan my finger horizontally, there's also some vertical movement (it's impossible to move in a perfectly horizontal line with your finger).
Question is: is it possible to "lock" the page from scrolling up and down while I pan horizontally on Highcharts?
const
createLineChartOptions = (series, categories, height) => ({
series,
xAxis: {
categories,
title: { text: null },
labels: {
step: 2,
},
crosshair: {
width: 1,
color: GRID_LINE_COLOR
}
},
yAxis: {
title: { text: null },
tickAmount: 3,
gridLineColor: GRID_LINE_COLOR,
gridLineWidth: 0.5,
labels: {
formatter: function () {
return parseFloat(this.value).abbreviatedDollars()
}
}
},
title: { text: null },
chart: {
type: 'line',
height
},
tooltip: {
shared: true,
useHTML: true,
borderColor: 'transparent',
formatter: function () {
const series = this.points
.map(({ x, y, color, series }) => `<tr><td><b><span style="color:${color}">• ${series.name}</b></td><td>${Math.abs(y).toDollars()}</td></tr>`)
.join('');
return `${this.x}<table>${series}</table>`;
},
positioner: function (labelWidth, labelHeight, point) {
const chart = this.chart, plotTop = chart.plotTop;
return { x: chart.plotLeft + 10, y: plotTop };
},
shape: 'rect',
},
plotOptions: {
series: {
cursor: 'crosshair',
marker: {
enabled: false,
symbol: 'circle',
lineColor: GRID_LINE_COLOR,
states: {
hover: {
radius: 2,
radiusPlus: 0
}
}
}
},
},
legend: { enabled: false },
});
Edit: try opening this on an iPhone Simulator or on your phone and try going through each point: https://react-1afped.stackblitz.io
Video: https://ibb.co/37rhgv0
You can use the code below in conjunction with hovering the cursor over your chart.
if (elem.addEventListener) {
// IE9+, Opera, Chrome/Safari
elem.addEventListener ("mousewheel", onMouseWheel, false);
// Firefox
elem.addEventListener ("DOMMouseScroll", onMouseWheel, false);
} else { // IE<9
elem.attachEvent ("onmousewheel", onMouseWheel);
}
function onMouseWheel(e) {
e = e || event;
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
SO What I am trying to do is that I am trying to fetch data from CSV File, and from other CSV file I am trying to Highlight a particular area from the Chart.
For Eg.:
This is the Chart I am getting .
By adding the Following Code.
$.get('abc.csv', function(data) {
var lines = []
lines = data.split('\n');
console.log(lines);
var ecgData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo >= 0)
{
ecgData[lineNo-0] = parseFloat(lineContent.substring(lineContent.lastIndexOf(",")+1) );
//gibber=500;
//m=m+500;
}//console.log('PPG Data', ppgData[ppgNo-0])
});
featurex = [5,10,14,34,56,78,90,95] ;
featurey = [0,0,1,0,0,3,0,2];
zip = (xs, ys) => xs.reduce((acc, x, i) => (acc.push([x, ys[i]]), acc), []);
//console.log(ecg);
console.log(ecgData);
Highcharts.chart('ecg', {
chart: {
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
credits: {
enabled: false
},
title: {
text: 'ECG Data'
},
subtitle: {
text: ''
},
xAxis: {
crosshair: false
},
yAxis: {
title: {
text: 'ECG Peaks'
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '',
lineWidth: 1,
data: ecgData,
animation: {
duration: 14000
}
},
{ type: 'column',
name: 'Features',
data: zip(featurex, featurey),
animation: {
duration: 14000
}
}
]
});
});
My Chart :
Now as you can see from the Chart. I am getting the features data as bars in the chart.
featurex = [5,10,14,34,56,78,90,95] ;
featurey = [0,0,1,0,0,3,0,2];
but that is not what I want what I want is that where the features x value is 1, I want to highlight that area with a particular color, where it is 2, it should be filled with other color Like an example below:
Note: its just an example how the data should look don't math the data with the above image data.
I hope my question is clear.
In the load event you can check if a point meets your condition and add plotBands to your chart.
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
points = this.series[0].points,
from,
to,
plotBands = [];
points.forEach(function(point, i) {
from = points[i - 1] ? points[i - 1].x : point.x;
to = points[i + 1] ? points[i + 1].x : point.x;
if (point.y === 1) {
plotBands.push({
color: 'blue',
from: from,
to: to
});
} else if (point.y === 2) {
plotBands.push({
color: 'green',
from: from,
to: to
});
}
});
xAxis.update({
plotBands: plotBands
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/vm0ouwp5/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotBands
How to enforce that the tooltip show up only when mouse pointer is inside the chart area and not when on navigator scrollbar or on time range selectors in the top?
http://jsfiddle.net/1p4f5kny/
/*
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.
*/
$(function () {
/**
* 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];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
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) {
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
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', 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('StockChart', {
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} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function () {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: -1 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
shared: false,
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
}
}]
});
});
});
});
Insted of binding events on the container, you can use point mouseOver event to synchronize tooltips:
series: [{
point: {
events: {
mouseOver: function(e) {
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
if (chart !== this.series.chart) {
point = chart.series[0].points[this.index];
chart.tooltip.refresh([point]);
}
}
}
}
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/g0brx52d/
API Reference: https://api.highcharts.com/highcharts/series.line.point.events.mouseOver
Let´s say you have an x-axis that goes [0, 3, 6, ...] and a y-axis that is like [0, 5, 10, ...].
Highcharts handles those values so that automatically, somehow a difference of 5 in y direction does not look bigger than a difference of 3 in x direction.
How can you change the distances between the values / make a 5 on the y axis appear as big as 5/3 of the change on the x axis? (so that p.e. a line from (0,0) to point (5,5) has a 45° angle)
Code example:
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
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: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
taken from demo
In the load event, you can calculate and adjust the height or width of the chart:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0];
// Adjust xAxis
this.setSize(
yAxis.height / (yAxis.max - yAxis.min) *
(xAxis.max - xAxis.min) + this.plotLeft + this.chartWidth -
(this.plotLeft + this.plotWidth),
null,
false
);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/64Lxutce/
or if you do not want to change the size, you can adjust one of the axis extremes:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0],
xAxisMax = xAxis.width /
(yAxis.height / (yAxis.max - yAxis.min)),
yAxisMax = yAxis.height /
(xAxis.width / (xAxis.max - xAxis.min));
if (xAxisMax < xAxis.max) {
this.update({
yAxis: {
max: yAxisMax - yAxis.min
}
}, true, true, false);
} else {
this.update({
xAxis: {
max: xAxisMax - xAxis.min
}
}, true, true, false);
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/w3byrL28/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart#update
https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I am using Synchronized chart of Highcharts to demonstrate the statistics.
For reference : http://www.highcharts.com/demo/synchronized-charts.
Here, when the chart is getting plotted for the first time, no data points is selected. As, the cursor enters into the chart area, the tooltip, crosshairs and data points get highlighted. It works as expected.
The modification I need is, when the user comes out of the chart, the chart should look like as it was in the loading stage.
i.e. If the cursor is not on any of the chart,then no data points should remain selected. In other words, the tooltip, crosshair and the highlighted shadow on data point should get removed.
Thanks in advance for any help or suggestion.
use mouseleave to detect when the mouse is out of the container:
$('#container').bind('mouseleave', function(e) {
use hide method to hide the tooltip and hide Crosshair method to hide the crosshair:
chart.tooltip.hide(point);
chart.xAxis[0].hideCrosshair();
Check the example (jsfiddle):
$(function() {
$('#container').bind('mouseleave', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent);
point = chart.series[0].searchPoint(event, true);
point.onMouseOut();
chart.tooltip.hide(point);
chart.xAxis[0].hideCrosshair();
}
});
$('#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];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.onMouseOver(); // Show the hover marker
chart.tooltip.refresh(point); // Show the tooltip
chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
/**
* 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
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', 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} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function() {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: -1 // 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
}
}]
});
});
});
});