I would like to have synchronized-charts in my drill-down but in the official link, it creates a new chart of three, but how to add it in drill down?
official example:https://www.highcharts.com/demo/synchronized-charts
my demo where drill-down requires synced charts:
http://jsfiddle.net/gkumar77/w9ngp63u/5/
The simplest solution is to create an additional, initially hidden container with synchronized charts and toggle the visibility of both containers to simulate the drilldown:
drilldown: function(e) {
this.renderTo.style.display = 'none';
document.getElementById('drilldownContainer').style.display = 'block';
if (Highcharts.charts.length < 2) {
createDrilldownChart();
}
}
Live demo: http://jsfiddle.net/BlackLabel/vd6cn4ra/
Related
I use solid-gauge of highchart
I want to send callback to click event, not on the data area but on the grey area.
(You can see this sample for understand what I mean 'grey area'. https://www.highcharts.com/demo/gauge-solid)
(I use version 4.1.7 - this is by customer design and I cannot change it, but let me know what is the options - I will 'convert' them to 4.1.7 options)
Thanks
You can add click event on a pane:
chart: {
type: 'solidgauge',
events: {
load: function() {
this.pane[0].group.on('click', function() {
console.log('Clicked on pane!')
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e5muf7j1/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
In this Highcharts column chart the user can drill down by clicking on the column.
This works fine, however all the data, including the data of the drilled column, needs to be available when the chart is firstly created.
What I need is to capture the drilldown event click and populate the chart with that information, sending the data only when the user clicked on a specific column. Is this possible?
Yes, it is possible and simple. You need to use drilldown event callback function, call API request in it and use addSeriesAsDrilldown method - as in the example below:
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
...
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e9m74kgp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
I have more than one chart in one page, all of them uses same data but in different chart types.
I would like to change all of their time with only one navigator on the top. like using it as a datepicker input, how can i achieve that?
Use afterSetExtremes event callback function and apply the same extremes on the rest charts:
xAxis: {
events: {
afterSetExtremes: function(e) {
var min = e.userMin,
max = e.userMax;
chart1.xAxis[0].setExtremes(min, max, true, false);
chart2.xAxis[0].setExtremes(min, max, true, false);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/8gc9qwsp/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
https://api.highcharts.com/highstock/xAxis.events.afterSetExtremes
I have created my own master-detail chart following the Highcharts docs and this example: https://www.highcharts.com/demo/dynamic-master-detail
Eveything works fine but I would like to add a feature: When the chart is loaded the last 50 data points should automatically be selected in the master chart and thus shown in the detail chart.
I tried to manually trigger the selection event but it did not work out. Any idea how to solve this?
You can fire selection event in chart load event and set correct extremes:
chart: {
...
events: {
load: function() {
var points = this.series[0].points,
xAxis = this.xAxis[0];
Highcharts.fireEvent(this, 'selection', {
xAxis: [{
min: points[points.length - 51].x,
max: points[points.length - 1].x
}],
});
},
selection: function(event) {
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xy8qug9h/
API: https://api.highcharts.com/highcharts/chart.events.load
I have implemented a wicked-chart which shows 4 series in the legend. Now I want to handle the series click event in legend and update some values outside the wicked highchart.
To be specific, I want to implement exactly like this jsfiddle but in java wicked-chart.
plotOptions:
{
series: {
events: {
legendItemClick: function(event) {
//Do something here
return false;
}
}
I did search all the methods of PlotOptions class but could get something similar to highcharts legendItemClick event.
My solution was not to find alternative for legendItemClick in wicket-charts as they do not have one. Instead I did this:
In your page html, give id="chart". Doing this highcharts shall fix your id to "chartVar" instead of changing it at each run.
<div wicket:id="chart" id="chart"></div>
In your javascript, define your series click using .highcharts-legend-item as below.
var onSeriesClick = function() {
var that = this;
for (var i=0;i<chartVar.series.length;i++)
{
$(".highcharts-legend-item:contains(" + chartVar.series[i].name + ")").click(function(){
// your legend click logic goes here
});
}
}