Scrollable Flot Chart - javascript

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.

Related

How to create scrollable charts in DHTMLX charts

Is there any way to create scrollable DHTMLX Chart(Bar or Line chart).
As I understood from the code, the chart is drawing in three canvases.
one for horizontal lines, one for vertical lines and another for the actual chart. So, I am not able to make the chart scrollable.
I can put the total chart into a DIV and then I can use overflow:scroll.
But with this the y-axis labels will be hidden when I scroll to right side.
Is there any way to draw scrollable charts with DHTMLX chart. scrollable means like DHTMLX Gantt.
Could you please suggest me.
Thanks in advance.
Unfortunatelly there is no such functionality in dhtmlxChart. You can only scroll the oughter container.
Dhtmlx Chart has an option to add what they call 'series' (Sample: http://dhtmlx.com/docs/products/dhtmlxChart/samples/08_dynamic/01_add.html, what you could try to do is create an event that would control the vertical/horizontal scroll to dynamically add those 'series' creating a fake scroll effect, but i think that's too much work for too little gain.

tooltip issue in raphael js for area graph

I need to generate tool tip on area graph using Raphael.js. But tool tip has be shown on hover at particular x,y coordinates only( position is important since it is a multi area graph).
I am able to generate this area graph and tool-tip as well.
There are multiple lines on tool tip and each should have separate styling and not same styling.
I am unable to rotate the tooltip by 90 degree and there is a problem since the tool-tip keeps shifting downwards when text size changes.
So are there any way where can style each text on each line differently and keep the tool-tip at correct place?
This issue is resolved.
Since Grafico was really tough to customize I used Jquery FLOT library for my requirement .
I am able to do any required customization in FLOT and FLOT is very fast and easy to use with so much support available on the FLOT site.

Bars resize (shrink) when I add a new bar to the bar chart, but when removing it, bars stay small

I'm using Flot to chart some bar charts on my website.
When I draw a chart with three bars for example, everything renders fine. Then I can add a fourth bar and the bars get thinner and accommodate themselves properly (sort of like what Highcharts does with default settings).
When I remove a bar from that same chart, the bars stay thin and resized and do not grow back to their previous state.
Any ideas how I can achieve this effect? Does Flot offer this functionality? Their documentation doesn't mention anything like this and I'm afraid I may be overlooking something.

Zooming using slider

I am a beginner with jQuery and looking to build a short plugin for my requirement. I am looking to build a light and short timeline like plugin which has to look something like the following:
The green bar below has two small rectangles which can be moved left and right towards or away from each other to zoom in / zoom out the content of the timeline above (orange bar). I tried to find similar plugin which I could use as a reference to write to zoom in/zoom out using the slider.
I found some timeline plugins such as Timeglider etc. which have the zoom functionality implemented in a different way and not similar to the above figure (where I could use two rectangles to zoom in/zoom out and zoom timeline in orange bar).
I wanted to ask for suggestions about where I could find a similar plugin that I could use as a reference to see how zooming using slider is implemented. Or if there's no such already plugin, I would appreciate some help on how to go about the zooming functionaility for the plugin.
Do you know, that there is the slider plugin for jQuery UI (link). It will be just question of styling it, connecting to slide event and changing zoom level on the go.
I would expand my answer, but I lack some more information about your HTML layout, Would like to see some code of yours in jsfiddle.net.

Converting click to hover in Jquery based snazzy animated pie chart

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);

Categories