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/
Related
Whats the best way to achieving the below chart using Highcharts library?
You can create additional pie charts as data labels:
chart: {
events: {
load: function() {
var points = this.series[0].points,
container;
points.forEach(function(p) {
container = p.dataLabel.div.querySelector('.dataLabelChart');
Highcharts.chart(container, {
chart: {
margin: 0,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
innerSize: 30,
dataLabels: {
enabled: false
},
type: 'pie',
data: [1, 2, 3]
}],
legend: {
enabled: false
}
});
});
}
}
},
series: [{
dataLabels: {
verticalAlign: 'middle',
enabled: true,
useHTML: true,
formatter: function() {
return '<div class="dataLabelChart" id="' + this.point.index + '"></div>'
}
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/y46ubx1L/
API Reference: https://api.highcharts.com/highcharts/series.scatter.dataLabels.formatter
I have multiple series in a chart! This series are added according to user needs.
The tooltip tool shows the label of a series even though my mouse is closer to another series.
here is an image showing the problem:
https://i.imgur.com/eXeVtH7.png
Highcharts.chart('container', {
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime'
},
tooltip: {
snap: 2,
shared: true
}
yAxis: yAxis,
navigator: {
adaptToUpdatedData: false,
enabled: true,
series: {
type: 'areaspline',
fillOpacity: 0.5,
dataGrouping: {
enabled: false
}
}
},
chart: {
type: 'spline'
},
legend: {
enabled: false
},
plotOptions: {
series: {
showInNavigator: true,
stickyTracking: false
},
spline: {
marker: {
enabled: false
}
}
},
series: dataFrame
});
Is there any possibility to set the xAxis of the Highstock graph to display only the time?
Here it shows both date and time and I need to display only time:
Thanks in advance.
$(function () {
// Create the chart
Highcharts.stockChart('container1', {
chart: {
width: 500,
height: 300
},
title: {
text: 'AAPL Stock Price'
},
xAxis: {
tickInterval: 1
},
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'AAPL Stock Price',
data: [45,90,90,45,50,90,39,50,90,39],
step: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
$(function () {
Highcharts.stockChart('container', {
chart: {
width: 500,
height: 300
},
title: {
text: 'AAPL Stock Price'
},
xAxis: {
type: 'datetime',
tickInterval : 1,
dateTimeLabelFormats : {
day: '%M min'
}
},
rangeSelector: {
selected: 0,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'AAPL Stock Price',
data: [45,90,90,45,50,90,39,50,90,39],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 ,
step: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.
I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand
$(function () {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor:'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%']
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [
{
name: 'Incoming',
y: 40,
color: '#87b22e'
},
{
name: 'Outgoing',
y: 30,
color: 'black'
},
{
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function () {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
You need to set the plotOptions.pie.borderWidth property to 0:
$(function() {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor: 'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [{
name: 'Incoming',
y: 40,
color: '#87b22e'
}, {
name: 'Outgoing',
y: 30,
color: 'black'
}, {
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function() {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
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