Hi I want to hide the chart(highchart) onload, after loaded by click event I want to show the chart. But now after the click event it shows empty div and the chart is missing.
soon please.
Try rebind the highchart initialization on click event.
Related
In my Vaadin 14 app, I want to add an Accordion component that has several components in its summary (which is always displayed), among which a Button. Clicking in the summary normally toggles the display of the AccordionPanel content. How can I prevent the AccordionPanel to collapse/expand when the button in the summary is clicked?
Objects are created simply as follows:
Accordion accordion = new Accordion();
MyPanel panel = new MyPanel();
accordion.add(panel);
with MyPanel constructor simply calling setSummary() with a layout containing the button.
I found the answer in this thread on the forum.
It turns out you can prevent the propagation of the button click with this hack:
button.getElement().addEventListener("click", click -> {
//do nothing
}).addEventData("event.stopPropagation()");
This seems like a core functionality that the framework should provide out of the box, but this ticket is still open.
Adding this to your view:
UI.getCurrent().getPage()
.executeJs("Array.from(document.getElementsByTagName('vaadin-accordion-panel')).forEach(element=>element.shadowRoot.querySelector(\"div[role=button]\").replaceWith(element.shadowRoot.querySelector(\"div[role=button]\").cloneNode(true)))");
will disable all clicks on all the accordions toggle and accordion summary. However you will need to include a button or trigger for opening and closing the accordion. I don't know if this is what you want?
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
I am noticing something strange; I have a click event on a chart, and the chart fire up the event no problem.
Then I add a link in the tooltip, but when I click on it; the chart event fire, not the one that should open the link.
It works only if the tooltip will render on an area that is not part of the plot area (say, a value is high enough to render a tooltip on the title bar; if I click on that link, it will work).
I suspect that there is some sort of parameter that tell highcharts if the link in the tooltip is above the chart plot area? Otherwise it is impossible to have the tooltip open a link, if the highcharts click event is enabled.
You need to set useHTML flag as true.
Code: http://jsfiddle.net/sbochan/voh6ebt8/
Example: http://jsfiddle.net/sbochan/voh6ebt8/show
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
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