I would like to include a Highchart graphic in a reveal.js presentation. The chart integrates fine, but the chart animation (e.g. growing of bar charts) plays while the "slide" is not visible yet.
How can I force an animation "refresh" when the slide changes?
Thanks for your help!
One way is to simply create the chart again when you want the animation to start.
I'm not an expert on Reveal.js, but it looks like you have an event when a slide is changed which you could use to redraw your chart to animate it:
Reveal.addEventListener( 'slidechanged', function( event ) {
redrawChart();
} );
Related
I am using the "Custom Events" highchart plugin by Black Label, to detect right click in my chart. My goal is to use the right click in the chart as "Back" button when drilling out from my custom data. I know highchart has drilling options embedded, but this is a highly custom application, and my problem is that I need a way to detect right click on the x-axis crosshair line.Since the crosshair is following the mouse, 90% percent of the right clicks is triggered on the crosshair line itself, and I can not manage to detect that click. I need the event to be catched inside highcharts, because there is multiple charts on my page, and I need to know which chart was clicked on, and on what point.
I hope you understand my explanation and problem.
BR,
Benjamin Kruger
Highcharts paints the chart as the page loads. For example when a simple bar chart is loaded, columns are painted on progressively.
Is there a way to disable this? I just want to chart as it is. No movements. I tried to set animation to false. But it does not work.
Jake He
The initial animation is hidden under a different "animation" option:
plotOptions: {
series: {
animation: false
}
},
Here's a JSFiddle using that option: http://jsfiddle.net/troygizzi/3w7noceq/
It was based on this one: http://jsfiddle.net/highcharts/VqruM/
By default, the tooltip appears as soon as the cursor enters the chart. I would like to control when it first appears in one of two ways:
Wait for user to hover over (around) a data point on the chart.
This way the user can look at the entire chart without the
distraction of the tooltip.
mousedown - is there a way to disable the default mousedown function
and use it for displaying the tooltip instead? And because the
tooltip and crosshair seem to be joined, perhaps the same mousedown
event could fire the crosshair to appear?
number 2 would be best; any suggestions/solutions would be appreciated!
Number 2 is possible to achieve by:
disable default Highcharts tooltip
create point.click event handler
in above handler, create your own tooltip (it's simple div with some CSS)
make proper position for tooltip (accessed via this.point.plotX and this.point.plotY
Is there a way to get noticed when a chart is redrawn after the window size changed. Listen to the window change event itself is not a good idea cause I cant rely on which event if is fired first the one that is redrawn the graph or mine.
The chart redraw event fires when the chart div resizes http://api.highcharts.com/highcharts#chart.events.redraw
events: {
redraw: function () {
alert("redrawing chart");
}
}
Note, this fires for other reasons as well e.g. when you add a datapoint, or modify series options etc.
Like stated in the title, I got the problem when I click on some slice of pie. I call function, which displays hidden div with the second pie. It appears correctly, but then I cannot click on that first pie and even tooltips are not displaying. And the second pie is all black, but that is the lesser problem, I think... Thanks for advices in advance!
Here's your fiddle with my changes: jsFiddle.
To fix hover and click events on first chart, I've deleted position: relative of second container.
To fix issue with black colors, I moved colors declaration into Highcharts.Chart({...}). Otherwise, you'll re-rewrite Highchart colors while creating the second chart.