I have a pie chart and need to slice out some point (for examle, second slice in jsfiddle example) by clicking a buttom. How can I do it?
I've tried some updating, but it doesn't work
$('#button').click(function() {
var Chart2 = $('container').highcharts();
Chart2.options.series[0].data[1].sliced = true;
Chart2.options.series[0].data[1].selected = true;
Chart2.redraw();
})
jsfiddle example
The method you need is 'select' on the point object. This is on series, but not in options as you tried:
$('#button').click(function() {
chart.series[0].data[1].select();
})
e.g.
http://jsfiddle.net/JWFm5/
You can also use slice() function.
http://jsfiddle.net/wu3jY/2/
$('#button').click(function() {
chart.series[0].data[0].slice();
});
Related
I built a line chart with more than 50 series: fiddle
Now I want to highlight one series by button click (opacity: 1). When I highlight another series, the first one should get its original opacity of 0.1 again.
With only two series I can achieve this by doing this:
$('#func1').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 0.1});
chart.series[4].update({opacity: 1});
});
$('#func2').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 1});
chart.series[4].update({opacity: 0.1});
});
But I cannot do this with 50 series because it takes too long to calculate. Is there a way to cancel the previous update before doing a new one?
Use the update method with redraw parameter set to false and redraw chart after loop:
chart.series.forEach(function(s) {
s.update({
...
}, false);
});
chart.redraw();
Live demo: http://jsfiddle.net/BlackLabel/3a9bfjgd/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#update
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
You can read here, similar with your problem: https://api.highcharts.com/highcharts/series.line.point.events.select
is it possible to link/sync 2 chart data in 2 different type of charts to show tooltips at once?
for an example, i have a pie chart and a area chart.
The pie chart represents the percentage of a particular browser and the area chart shows the downloads per year for each browser.
What i need to do is if someone clicks or hovers on section of the pie the relevant line and the tooltip of the area chart should be highlighted...
so when someone clicks/hovers on firefox on the pie, the line relevant to the area should show and vice versa...
is this something possible with highcharts?
So far the work i have done is https://jsfiddle.net/livewirerules/a9tntdam/1/
One thing that i noticed is i have added the event in my area chart to show the color when the tooltip is hovered.
events: {
tooltipRefresh: function(e) {
if (!e.target.hoverSeries) return;
$('.highcharts-tooltip>path:last-of-type')
.css('fill', e.target.hoverSeries.color);
}
}
when i hover a line on the area chart and move to the pie chart, the background color of the tooltips are changed.
I am not sure what would you like to show in a tooltip when you hover on your pie. You have one point so its hard to show tooltip for whole series on another chart.
You can use mouseOver and mouseOut events callback functions for highlighting series (so they will look like on hover):
point: {
events: {
mouseOver: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('hover');
}
});
},
mouseOut: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('');
}
});
}
}
},
You can use tooltip.refresh(point) for refreshing tooltip on specific point:
mouseOver: function(e) {
this.group.toFront();
this.markerGroup.toFront();
var name = this.name;
Highcharts.each(chart.series[0].data, function(p) {
if (name === p.name) {
p.setState('hover');
chart.tooltip.refresh(p)
}
});
},
Here you can see an example how it can work:
http://jsfiddle.net/a9tntdam/4/
I have like 50 different series, so by default, I have them hidden, so the user simply clicks on the ones he wants to see.
Sometimes, one wants to show all, or hide all, quickly. I cannot figure out how to toggle all on/off. Is this possible at all? I assume so, but cannot figure out a way to do it.
Hide each series using series.setVisible(false, false), reference. - After all series will be hidden call chart.redraw() to redraw chart only once.
this solution is based on http://jsfiddle.net/pGuEv/
var chart = $('#chart-container').highcharts();
var $hide_show_all_button = $('#hide_show_all_series_button');
$hide_show_all_button.click(function() {
var series = chart.series[0];
if (series.visible) {
$(chart.series).each(function(){
this.setVisible(false, false);
});
chart.redraw();
$hide_show_all_button.html('show all');
} else {
$(chart.series).each(function(){
this.setVisible(true, false);
});
chart.redraw();
$hide_show_all_button.html('hide all');
}
});
Is it possible to drag the marker, currently clicking on the charts able to get new marker using the plotline in highcharts!
is it possible to hold/grab the marker line and drag it on the chart?
CLICK ON THE PLOTLINE
var chart = this.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: event.xAxis[0].value,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
Check out Highcharts' draggable plugin: jsfiddle.net/highcharts/AyUbx/
See this: http://api.highcharts.com/highcharts#xAxis.plotLines.events
Supported properties are click, mouseover, mouseout, mousemove. These events are not enough to implement the dragging option for the marker(PlotLine). Atleast not in a neat way.
You can do it by assigning an on event to the svg element:
http://jsfiddle.net/yem93w5o/1/
var line, clickY;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickY = e.pageY - line.translateY;
}
var step = function (e) {
line.translate(0, e.pageY - clickY)
}
var stop = function () {
$(document).unbind('.line');
}
(...)
line = chart.highcharts().yAxis[0].plotLinesAndBands[0].svgElem.translate(0,0).on('mousedown', start);
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
});
}
}