I came across this Jquery based pie chart online. You can download it freely from here: http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/
I am unable to convert the mouse click function of sliding pie pieces to react on mousehover in the same way. There seem to be an issue with the way they react to mouse hover. However, when the same mousehover is applied to the table, there is no problem and the pie chart reacts as expected. Can you please look into the code and tell me what needs to be changed in order to get the pie chart to expand on mouse hover.
Thank you very much.
The reason the hover event doesn't work on the chart, is because the chart is a canvas element. The slices aren't separate elements. So you need to use a mousestop event, that gets called every time the user hover over a slice and holds the mouse still.
The mousestop event doesn't come with Jquery, but Richard Scarrott made a Jquery plugin: http://www.richardscarrott.co.uk/posts/view/jquery-mousestop-event
You can use it on the chart like this:
$('#chart').mousestop(100, handleChartClick);
Related
I'm creating a graph with react-vis-js. The graph should be moved in unity with a map that is shown behind the graph. Therefore, I created custom Arrow and Zoom keys. They Work fine with the map. Now I am trying to implement the keys for the graph.
I tried to find a way to move the center of the graph but unfortunately there isn't a way of doing this. Furthermore, I tried to find a way to trigger the keypress events of the keyboard in the onclick of the buttons. The only thing I found was jQuery code that looked like this:$('item').keydown();
This didn't seem to work either. I think it's because this is actually meant to be used as listener not as trigger.
Questions:
Is there a way to have custom buttons for visjs to move and zoom the graph?
Is there a way to trigger keyboard button events with javascript UI buttons?
Do you have other ideas of solving this issue?
How do I add a button inside a chart.js graph?
I want to create a pie chart with drill down. The drill down effect is actually pretty easy with a chart onClick function. But I want to add a button to go to the top level to the canvas. I do not want to place it outside the canvas
I found a similar example of a different chart library.
https://www.highcharts.com/demo/pie-drilldown
I'm currently working on chart similar to this using highcharts
From what I have observed, column and candlestick chart will only trigger mouseover when I hover on the box itself, whereas line or area chart will have them anywhere on the chart like this
So I've tried some configurations to try make column and candlestick to behave the same way as line or area, but haven't successful yet.
Ultimately, this is the behaviour I want to achieve.
Would it be possible to change the mouseover behaviour of those charts to be the same as the line chart?
It is a bug which appeared in 5.0.8 version. You can see the closed ticket on github here which means that the fix will be included in the next release.
Until the release, you can use 5.0.7 version which works as you expect.
<script src="https://code.highcharts.com/stock/5.0.7/highstock.js"></script>
http://jsfiddle.net/q947fsa2/1/
I have a flot chart that is a nice line chart. Currently, if you click and drag over the chart, it will select the dragged-over area and when you let up the mouse, it will zoom into the selection. What I want, is for that behavior, but to then put a scrollbar under the chart that lets me scroll through the data at the current zoom level. What I am looking for here is the general way to hook into Flot that allows me to define what part of the data is currently visible. Thanks in advance.
You should check out the navigation plugin which allows panning and zooming.
The example there lets you pan using a compass arrow interface, but there is no reason you couldn't use something like a scroll bar instead.
is there any jquery plugin that enables you to programmatically call a tooltip that will show up under the mouse?
Why I am looking for this is because I have a pie graph made with jquery flot. You can have it call a function when hovering a field in the pie, so this essentially has to be called from a function, and NOT tied to an object on the page.
Thanks in advance, I couldn't really find anything on google searching
Have you looked at the cursormessage plugin?
http://plugins.jquery.com/project/CursorMessage
Alternatively you could try combining clueTip's sticky and mouse follow options:
http://plugins.learningjquery.com/cluetip/demo/