i have a chart that doesn't hide the previous series when i click for the drilldown on a column. New series is added, but beside of the old series, how can i solve the problem? I also tried to not adding a new series, but simply keeping the drilldown option on the old series; still the old series doesn't disappear when i click on a column (i was expecting an empty chart with this drilldown).
Edit:
I have three charts loaded. First chart -> drilldown -> second chart -> drilldown -> third chart -> broken drilldown.
I noticed that the "load" function of the third chart is never called. And, the button of the previous second drilldown never disappear.
Related
I'm trying to add two datasets to a line chart, but the problem is: I want to enable showing the tooltip for both datasets when (one of two):
Hover on a data line (without a data point) and show all line chart data
Hover on a data point, but sho the data of all the line charts
A fiddle I experimented with: https://codepen.io/anon/pen/gjbXqb?editors=0010
I have a page which includes a pie graph and a column graph using highcharts.
Very similiar to this example here,
http://jsfiddle.net/highcharts/Vf3yT/
The issue I'm having which can be seen in the example aswell, is
If I click on an item in the column graph to drilldown, I get "Back to Overview", I click it, and it takes me back no problem.
However, its when you try to drill down two graphs at the same time I get an issue. If I click on at item in column graph and then in the pie graph, and try to drill back up on column, it thinks the column graph has drilled down twice. and If I drill up twice on the column graph, I am then unable to drill up on the pie graph.
The graphs are rendered in different divs, using different options like so
optionsColumn.chart.renderTo = 'graph';
optionsColumn.chart.type = 'column';
var chart1 = new Highcharts.Chart(optionsColumn);
optionsPie.chart.renderTo = 'graphPie';
optionsPie.chart.type = 'pie';
var chart2 = new Highcharts.Chart(optionsPie);
The issue also exists in the example and I have been unsuccessful in finding a fix for this.
It's a bug in version from jsfiddle, it's already fixed on master branch, see: http://jsfiddle.net/Vf3yT/354/
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.src.js"></script>
I'm using Highcharts v.2.3.3 and have built a pie chart. When a user clicks on something, I can replace that chart with a different one, but the replacing happens instantaneously. Is there a way to have the first pie chart fade out while the new pie chart fades in, so there is a "blur" effect?
Note: the first pie chart currently gets deleted before the new chart gets built.
I found a solution. I used jquery to clone the svg element of the first chart and appended it to a div that was absolutely positioned over the chart area. I then used that "dummy" chart for the fade out animation without needing to fade in the second chart.
var clonedChart = $('#chartContainer').find('svg').clone();
$('<div class="cloned_chart"></div>').append(clonedChart).appendTo('#pieChartWrapper');
// delete first chart and create second one
....
// chart creation callback
$('.cloned_chart').fadeOut('slow', function(){
$(this).remove();
});
I would fade out the current chart container using jquery like so :
$('#ChartContainer').fadeOut();
Then I would replace the chart with the new one and use jquery
fadeIn() to bring the chart back into view.
EDIT
The jquery fadeOut/fadeIn function's first parameter is an optional speed parameter, so you could time the animations so they "blur" together.
I'm trying to create a highstock chart which:
Renders an initial chart with one series
After an event (button click) adds another series
Dynamically get's updated by adding points (to both series).
1 and 2 work, but adding points to the newly (dynamically) added series doesn't seem to work, see: http://jsfiddle.net/albertsikkema/KGTBB/1/
When I add the series at chart creation time adding points work, so I'm guessing it has something to do with how the series is added.
The problem is that your navigator is an object within chart.series.
If you console log chart.series you will see that:
0 = Plot line A
1 = The navigator
2 = Plot line B
So you are trying to addPoints onto the navigator series, instead do:
chart.series[0].addPoint([x, y], true, true);
chart.series[2].addPoint([x, y], true, true);
or, a better method would be to target your series by their name.
I have 4 series in my chart. 2 are visible when the chart loads. 2 are hidden.
When the user zooms in, the visibility switches.
How can I have a legend that only displays the 2 visible series?
Pass showInLegend parameter to series you don't want to be visible in legend like:
series.showInLegend = false;