How can I control legend items through a custom button in Highcharts? - highcharts

I'm looking for a way of controlling legend items through my custom button.
The button will be placed out of the canvas area.
How can I get a list of legend items, and toggle them through checkboxes?
By doing that, I can give users more spaces to see graphs.
Thanks,
Sung Am YANG

You can look at the legend item names using
chart.series[0].name
chart.series[1].name
To toggle axes on and off, use
chart.series[0].show()
chart.series[0].hide()
e.g. http://jsfiddle.net/BasRN/ shows hiding and showing the first series with buttons, including setting the button text to the series name.

Related

multiple text colors in jQuery Tooltip

I'm trying to get some words in a jQuery tooltip text, another colour. Is this possible? I would like to give the words 'CONTROL PANEL BUTTON' another colour. I already give the tooltip a custom class. Can I for instance use two classes for different parts of the tooltip text?
Here's my script:
$("#ControlBTN").tooltip({
content: "CONTROL PANEL BUTTON<br><br>Click to show or hide the Fluid Control Panel.",
tooltipClass: "ui-tooltip_trans"
})

Customise Stacked Bar Data Labels

I have a dataset in google sheets that shows how often I do certain sports. I have created a stacked bar chart by month to follow the trend. I would like to use emojis to use as the data labels so that I don't need to have a legend. However I do not know how to change the data labels from being a count and to be customisable text?
For example for swimming I'd like it to show the emoji: 🏊 rather than "2" for jan, "4" for feb etc.
Is this possible?
It's not possible for stacked charts. It is for regular Charts, as you can see in this solution:
You can use emojis as labels by adding notes to the chart. You will have to copy the emojis from external sites and do the following steps:
In the column to the right of each data point, add your text notes (in this case, emojis).
Double-click the chart you want to add notes to.
At the right, click Setup.
In the box next to "X-axis," click More and then Add labels.
Enter the data range with your notes. For example, C1:C3.
Click OK.
In my case, the chart looks like this:
Since your Chart is stacked, this is not possible for this case. I recommend you to request this feature to Google by clicking on Help > Send feedback.

ALV tooltip in a single cell of a row. Possible?

It is possible to put a tooltip on a single cell of my alv? I know that it is possible in a column by a field catalog, but what about single cell?
I have ALV with icon like that, which is called via cl_gui_alv_gridv
I want information about this item in tooltip when I hover mouse over this icon
The information on how to display a symbol with a tooltip is easily available if you google for "site:help.sap.com tooltip icon". Since you seem to be unable to find it, here is the actual link. Make the target field large enough (132 characters is a common size), then use the function ICON_CREATE.
If you don't want an icon to appear, you can use ICON_SPACE. And since the tooltip is contained in the value of each cell, of course it is possible to have different tooltips for different cells.

How to ignore hidden series when clicking on a legend using highcharts?

I have a charts done in highcharts in which I show and hide series depending on a checkbox (if the user clicks on a checkbox and all series are shown, if he unchecks the checkbox, some series are hidden).
It is working great.
Now I have an issue with the legends in the chart: if the series are hidden and the users enables a legend, the segment of all series (hidden or not) are shown in the chart.
I would like to handle the click item so I only handle series that are being shown.
To do that, I created an eventhandler for the legendItemClick event.
Inside it, I am able to access the legend (using this) but I am only able to call functions in a legend level, affecting all series. Is there anyway I could get to a series level?
Thanks!
Edit: created a jsfiddle as an example: http://jsfiddle.net/JLkGm/1/
Steps to reproduce:
1- unmark the checkbox
2- click twice in john + joe
Note that the segment related to Jane + Janet will show up
I would like to prevent this segment from showing if the checkbox is not checked.
ps: sorry for the js code in the checkbox event handler, we are using coffeescript, the original code was this one
toggleCompareData: (toggle) ->
columnName = COLUMN_HIGHCHARTS_TOKEN + #secondaryPrefix
if toggle
for serie in #chart.series
serie.show() if serie.stackKey is columnName
else
for serie in #chart.series
serie.hide() if serie.stackKey is columnName
It looks like bug, reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/3309

How to align radio button list with text input list

With a my quiz creator interface, the user enters three answers then marks the correct one by setting the radio button:
http://jsfiddle.net/VLeph/2/
However, I cannot get the text input and checkbox to line up nicely. Preferably, I would like to do this without rounded corners between text input and checkbox. Like the horizontal radio group shown in the link below. But with text input on the left instead.
http://jsfiddle.net/CeN9z/ .
Do you have an idea how to do this?
thanks :)
Christian
You can try placing all the text inputs in one cell in the grid, and all the radio buttons in the other cell, then use a bit of styling to align them properly.
Something like jsfiddle

Resources