Detect a click on, and style a stacked area in Highcharts? - highcharts

Example chart: http://www.highcharts.com/demo/area-stacked-percent
I want to be able to detect clicks on the different areas (blue Asia, navy Africa, etc) so that I can do some stuff with all the series I have for Asia or Africa. Note: I want to be able to detect clicks on the filled areas, not the area/series points.
I guess I could do it with area.events.click, look up the coordinates and figure out if the coordinates are inside a particular area, but that seems like and awful lot of work to achieve a simple thing like that. Is there perhaps a built-in way to listen to events like that?
Also, on a related note - is it possible to add hover and selected styles for the areas?
EDIT: It seems that it's possible to detect clicks on the areas by setting plotOptions.series.trackByArea to true, but it seems that this way I cannot distinguish between a click on the point vs a click on the area. Any ideas how I could reliably distinguish them?

You can detect it by click on area and display name of serie
http://jsfiddle.net/c2P63/5/
events: {
click: function(event) {
alert(this.name);
alert(event.x);
alert(event.y);
}
}

Related

Google Spreadsheet: Display text with game specific commands in separate window/cell

I have a google spreadsheet with different dialog texts which are going to be imported into a game. The game's dialogs use game specific simple emoji-commands that are applied in the game, like "🔴" which gives red color to the next letters and "🔘" which stops the color. Or ⤴️ which enlarges the next letters.
Would it be possible, perhaps using a plugin, to automatically calculate these commands from the cells with the dialogs and display the result in another cell or window?
Something like this:
And would it also be possible to display these texts in front of an image, so that i can see how the texts would fit in the speech bubbles of the game?
Something like this:
Thanks in advance!

Spotfire Map Multiple Values in same geo code

Im drawing a simple map in spotfire using US cities as geo location. The values I want to show on the map is the location of 'specific gas stations' by the geo code.
For larger cities there are many but im only able to get one 'shape'. I can work on the coloring or size. But im interested to get all 5 dots next to each other or a call-out highlighting there are five..?
Is there a way to show all values, or does spotfire need to combine them?
I know I can get more details with lat/long but that is not an option.
are your shapes literally being combined? that shouldn't happen unless you are doing a "Marker by: City". double check this setting.
if they aren't being literally combined into one point on the map, but instead they are sitting on top of each other, you could adjust the jitter settings on your Marker Layer (check the Appearance page in the Properties dialog) to spread them out a little bit.
if that doesn't suit your needs, and the former case is true, please update your question with some screencaps of your map chart's configuration and I'll see if I can provide a better answer :)

highcharts tooltip stop update when mouse over

In a highcharts line chart, I want to present a link in the tooltip for people to explore the underlying data set for a specific point by clicking on it (done, I used useHTML). The chart itself is an aggregated view showing statistics for some values (y) for different categories (series) across time scale (x), hence the motivation for exploring the non-aggregated data.
However, when the chart becomes dense enough, the user cannot mouseover the tooltip to click the link because it updates with the adjacent data points from the next point/s. Thus, I want to stop the tooltip from updating when the mouse is directly on top of it. How am I able to do this?
You can play around with tooltip.positioner - to make sure user will be able to click that tooltip URL. Or just change logic, so user can click on column instead, just like demo here.

How to make color bar above navigator in Highstock?

I have chart showing time data. I have two points back in time which I need to "mark" in the chart.
I currently indicate these two by plotlines, but would like to show bar, with let's say green and blue bars showing the timespans (for example -13days from now with blue and -90days -> -13days with red).
I would use plotBands, but I can't specify their height and do not want to have them all over the chart.
Is there some way? I saw something about translating pixels and drawing rectangle, but wasn't able to make it work. Also - I zoom a lot in this chart.
You can use Renderer and add custom shape. In other cases, please attach mockup of your goal.
http://api.highcharts.com/highstock#Renderer

Google charts: is it possible to display tooltips when hovering areas in stacked area chart?

I have a stacked area chart using google charts. An example is here: https://code.google.com/apis/ajax/playground/?type=visualization#area_chart
The problem is, when I hover the cursor over an area, no tooltip is displayed. I need to hover the boundary of two neighboring areas to display the tooltip.
Is it possible to display tooltips when hovering areas? If not, do you know of some workaround?
You can use a SteppedAreaChart for this. Set isStacked to true, and by default the tooltips will be shown on hovering over an area.
No, you can't spawn the tooltips by hovering over the area. There is no way easy way to work around this, as the Visualization API does not trigger mouse events on the areas.
If you want to put the effort into this, you can create custom mouse event handlers on the chart's SVG/VML code. It might be possible to extrapolate which area the mouse is in, and given that, you can extrapolate the x-axis position from the mouse coordinates using the ChartLayoutInterface, and spawn a custom tooltip based on that information. Be aware that any solution involving the chart's SVG/VML code could break at any time, as the internal structure of the charts is not guaranteed to be stable from version to version.

Resources