They want a 260px-wide highstocks chart! Understandably, this causes the range selector with its input controls to get written on top of itself. I see that I can disable the input controls but then I can't really see what range has been selected using the navigator.
Would I use an event to capture the range selected (in the rangeSelector or the navigator) and display it in a nearby control?
I'm using v1.3.9. Thanks for any suggestions.
yes you can absolutely do that.
Highcharts provide events for these
you can find them
xAxis -> events -> afterSetExtremes/setExtremes
These 2 events will help you to capture the new limits when the range is changed. You can have your javascript code and work on it.
api ref : http://api.highcharts.com/highstock#xAxis.events
you can find a worked out example along with some explanation in that link.
I hope this will help you.
Related
Based on the documentation there's an event to handle the context menu for echarts but I couldn't find any sample on how to implement it and how to add a context menu.
https://apache.github.io/echarts-handbook/en/concepts/event#handling-the-mouse-events
Thank you.
Concerning event listener implementation the via zrender echart.getZr().on is the more user friendly way, except you want to force clicking on echart elements with echart.on
myChart.getZr().on('contextmenu', function(params) {console.log("right clicked")});
I don't think there is further contextmenu support from echarts, it would be nice to have a similar stylable one.
But from that point onward you can implement your own context menu.
Is there way to restrict Shield UI pie charts via the Wicket API (although it's not clear that you can do this with the raw JavaScript API either) in such a way that only allows one slice to be selected at a time?
If there's no way to do this via the API, is it possible to intercept the shift click and transform it into a standard click before it gets processed by the Shield UI JS?
Thanks,
Chris
By default, the selection mechanism of the chart is single. This is demonstrated in the following example:
https://demos.shieldui.com/web/pie-chart/sliced-offset
Another option would be to disable the default selection and simply allow clicking and then try to set the .selected property of a the corresponding datapoint.
Seems there is no easy way to force selection of 0 or 1 slices at a time. Currently selecting while pressing the Shift / Ctrl keys will not unselect the other slices.
You might want to contact their support and ask their opinion/solution on your request.
After contacting the dev team, they have made changes to the Javascript and the Wicket API code to allow this to happen.
chart.getOptions().getSeriesSettings().getPie().setAllowMultiPointSelection(false);
I have a simple DC.js bar chart. I have it set up so you can click on an element and it gets filtered. This is standard behavior. It remains lit up, and the others go dark. You can then select other elements and have them added to the filter.
I'm looking for a way to replicate that functionality without clicking on the element. So like, i click a link outside the chart and the chart acts like I just clicked on some element.
Has anyone seen this done before?
Thanks,
Edit:
The reason I'm trying to do this is for accessibility. There's no way for keyboard users to interact as far as I can tell.
A hacky way to do it is to use chart.select to get a d3 selection of the element you want, and then fire an artificial click event as described here:
How to invoke "click" event programmatically in d3?
A better way is to do what the base chart onClick does:
_chart.filter(filter);
_chart.redrawGroup();
https://github.com/dc-js/dc.js/blob/master/src/base-mixin.js#L610
where filter is the key you want to filter on.
I am using javascript amcharts v3 to generate trend like interface element. I use trendline class to create trend lines that mark certain events. I would like to handle trendline click event but there seems to be no way of doing it.
Has anyone come across this type of problem or do you have any idea how to work around this?
For trend line example I use this page. There is jsfiddle link in it.
Thank you for the time you spend reading my question.
Edit: JSfiddle example - > here
Not the most elegant solution (i.e. it uses the generated content rather than hooking neatly into the framework), but I have done the following to catch a click event.
$('#chartdiv').on('click', 'svg path[fill="#00CC00"]', function(){alert('hello');})
Which will bind a click to the chartdiv and then filter on all svg path objects that are the colour of the trendline, triggering the code if it matches.
I want to implement highcharts into my application.
Example:
http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick/
I want to remove the zoom controls (like 1m, 3m, 6m, YTD, 1y, All) from the chart and place them out of the container div. But i don't want those controls inside the chart. I want to place those controls at the top of the page.
Please can any one help me to solve this issue.
Thanks in advance
The short answer is that it is possible to do what you are looking. You will simply need to make use of the built-in functions of the API as one of the developers mentioned here:
http://highslide.com/forum/viewtopic.php?f=9&t=10915&p=49390&hilit=external+controls#p49463
Basically you make a chart w/out the actual controls and then create the necessary code to manipulate the content of the chart accordingly.