Related
I am trying to create a single drag navigator over multiple highchart to highlight chart between ranges. like below attachment.
Can someone please let me know how can I do this? I explored highchart but could not find appropriate options to create this. Are there any other options?
Here is what I have tried:
(function(H) {
H.wrap(H.Chart.prototype, 'zoom', function(proceed, event) {
var navMin = event.xAxis[0].min,
navMax = event.xAxis[0].max;
H.each(Highcharts.charts, function(chart) {
if (chart.userOptions.chart.customNavigator) {
chart.xAxis[0].setExtremes(navMin, navMax);
}
});
});
}(Highcharts));
$.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
var newMin = data[0][0],
newMax = data[data.length - 1][0];
Highcharts.stockChart('container-main', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-main1', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-main2', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-navigator', {
chart: {
height: 600,
zoomType: 'x',
backgroundColor: 'transparent'
},
credits: {
enabled: false
},
navigator: {
enabled: true,
height:540,
opposite:true,
maskInside:false
},
rangeSelector: {
enabled: true
},
scrollbar: {
enabled: false
},
xAxis: {
min: newMin,
max: newMax,
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
yAxis: {
visible: false
},
series: []
});
});
#container {
height: 200px;
min-width: 200px;
}
#container-navigator{ position:absolute; top:0; width:100%}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<div id="container-main" style="height: 200px; min-width:200px"></div>
<div id="container-main1" style="height: 200px; min-width:200px"></div>
<div id="container-main2" style="height: 200px; min-width:200px"></div>
<div id="container-navigator"></div>
also attached jsFiddle what I have tried: jsFiddle
I am also open to any other library achieving this type of result.
In the current solution you can create a timeline using SVGRenderer as below I show how I rendered the button. For visibility, I added them to the container navigator.
chart: {
events: {
load: function() {
const chart = this;
chart.renderer.button('Change visible time range', 100, 50)
.attr({
zIndex: 40,
})
.on('click', function() {
chart.xAxis[0].setExtremes(navMin, navMax))
})
.add()
}
}
}
In your solution with the navigator stretched to full height, the navigator covers all the charts and the tooltip cannot be shown that way, it's under the navigator container.
Demo: https://jsfiddle.net/BlackLabel/u6gjdzsn/2/
URL OF THE GIF OF THE ISSUE -> https://gfycat.com/selfishpitifuldunnart
As you can see in the image mouse pointer which is the black dot is far away from the crosshair/tooltip, I have tried all possible options I am aware of even tried updating library from V6.0.4 to V8.1.2 but couldn't get it to work. Any help appreciated. Thanks. Below is the code I am using to initialize the chart with.
var avgTempChartingOptions = {
chart: {
type: 'spline',
renderTo: 'avgTemperatureChartPanelChart',
backgroundColor: 'rgba(255, 255, 255, 0.0)',
zoomType: 'xy',
panning: true,
panKey: 'shift',
mapNavigation: {
enableMouseWheelZoom: true
},
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
title: {
text: 'Date'
},
labels: {
enabled: false
},
events: {
setExtremes: syncExtremes
},
},
yAxis: {
lineWidth: 1,
lineColor: '#ccd6eb',
},
boost: {
useGPUTranslations: true
},
tooltip: {
shared: true,
crosshairs: true,
followPointer: false,
// positioner: function() {
// return {
// x: this.chart.chartWidth - this.label.width, // right aligned
// y: -1 // align to title
// };
// },
},
plotOptions: {
scatter: {
tooltip: {
followPointer: true
}
},
spline: {
marker: {
enabled: false
}
},
series: {
// stacking: 'normal',
// cursor: pointer,
animation: true,
enableMouseTracking: true,
boostThreshold: 100 // number of points in one series, when reaching this number, boost.js module will be used
}
},
exporting: {
sourceWidth: 1200,
sourceHeight: 800,
},
series: []
};
I have a Highstock chart displaying 3 data series. The series have the correct values but the line with higher values is not displayed above the other two, but between them, and this changes randomly.
Here you can see three spots of the same chart:
spot one spot two spot three
I've tried changing the data series, changing the period. This only happens when I have three data series. I have charts with two and four data series and they work well.
This is the chart config that I'm using.
Highcharts.stockChart(container, {
chart:{
zoomType: 'x',
events: {
load: updateLegendLabel
}
},
title: {
text: graficoData.nombre
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
menuItems: buttons
}
}
},
rangeSelector: {
enabled: showRangeSelectors,
buttons: [
{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'all',
text: 'Todo'
}],
buttonTheme: {
width: 60
},
selected: 2
},
xAxis: {
events: {
afterSetExtremes: updateLegendLabel
}
},
yAxis: {
resize: {
enabled: true
},
},
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
navigator: {
height: 30,
margin: 2
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2,
split: true,
valueSuffix:' ' + unidad
},
responsive: {
rules: [{
condition: {
maxHeight: '100%'
},
chartOptions: {
rangeSelector: {
inputEnabled: false
}
}
}]
},
series: series
});
I expect that when the yAxis value is higher, the line get displayed above, and when the value is lower the line get displayed below, since they share the same scale.
Thanks in advance for your help.
We are using Highcharts for the graphs in a dashboard web app. We are craeting the graph objects in javaScript. Most of the graphs share similar options. E.g. one graph is created by something like this:
Highcharts.chart('boiler-temp', {
chart: {
type: 'spline'
},
title: {
text: 'Boiler temperatures'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
title: {
text: 'Inner temperature'
}
}, {
title: {
text: 'Outer temperature',
},
opposite: true,
min: 0,
max: 100
}],
data: {
rowsURL: dataUrl,
},
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
Another graph is created very similarly like this:
Highcharts.chart('boiler-temp', {
chart: {
type: 'spline'
},
title: {
text: 'Boiler pressure'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
title: {
text: 'Inner pressure'
}
}, {
title: {
text: 'Outer outer pressure',
},
opposite: true,
min: 0,
max: 100
}],
data: {
rowsURL: dataUrl,
},
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
For maintainability I would like to define a default set of options as
{
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
and then, when I instantiate a graph, overwrite what changes. Is there a way to do this with Highcharts/JavaScript?
It can be done using Highcharts global options - set of options to all charts on the same page.
Highcharts.setOptions({
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
});
Demo:
https://jsfiddle.net/BlackLabel/ugsfoyeh/
Docs:
https://www.highcharts.com/docs/getting-started/how-to-set-options#2
Another approach is to create a defaultOptions somewhere in your app and merge them with chart options using eg. Highcharts.merge().
const defualtData = {
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
};
Highcharts.chart('boiler-temp1', Highcharts.merge(defualtData, {
title: {
text: 'Boiler temperatures'
}
}));
Demo:
https://jsfiddle.net/BlackLabel/5epm4hqc/
API reference:
https://api.highcharts.com/class-reference/Highcharts#.merge
I want to build a lightweight dashboard with Highcharts. First, look at this graphic http://jsfiddle.net/jerryvermanen/Zr7zE/.
I want to make a dashboard with this visualization. When clicking on a point, I want to display additional information below the visualisation. For instance, I want to show a picture (.jpg), some more information about this point and a URL to the specific source.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'DAYS BETWEEN RELEASE AND CEREMONY',
style: {
fontSize: '22px'
}
},
subtitle: {
text: ''
},
xAxis: {
min: 0,
reversed: true,
title: {
enabled: true,
text: 'Days difference'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'longdashdot',
width: 1,
value: 365,
label: {
text: 'ONE YEAR',
y: 580,
rotation: 0,
textAlign: 'left',
}
}]
},
yAxis: {
min: 1929,
max: 2012,
title: {
text: 'Year'
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Nominees',
marker: {
symbol: 'circle'
},
Can anyone help me out with this project?
You can bind a click event to the point using the following code.
plotOptions: {
scatter: {
point: {
events: {
click: function() {
// do what you want
// you can get the point reference using `this`
}
}
}
}
}
demo