Zooming using slider - javascript

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.

Related

How can I scroll a Sheild UI chart horizontally at a time based speed

I was wondering if anyone can offer any advise/examples of using Shield UI charts to show a horizontally scrolling graph over a time period.
I am open to suggestions about how to achieve this but would like to see real-time (per second or less accuracy) scrolling, either by frequent updating of a single graph or perhaps better, simply moving a vertical line marker from left to right across the y-axis to demonstrate the movement of time, relative to a static background chart.
May you specify some more details about what you want to achieve as it is not quite clear? Can you give some image/example how it should look like?
I think you should look at that demo, probably it is something near to what you have asked.
http://demos.shieldui.com/web/line-chart/forex-data
There as you can see you can dynamically rebind chart and simulate live data. Scrolling starts after it is filled with data. Probably that is something similar to what you want to achieve.

Image Map Area Highlight and Zooming with iScroll 4

In my Cordova project, I have a slider with multiple zoomable images (by iScroll) and I would like to use map to highlight some area always. But I have tried many libraries like imagemapster.js, maphilight.js but these libraries prevent images' zooming feature. Is there any library that I can use to highlight area only.
Any help or idea. Thanks in advance!
I got figured it out. For someone like me, here is my solution.
I used imagemapster.js for highlighting map areas. But I applied imagemapster first and then I grab those whole element and then applied iScroll(version 4) for zooming. First, i was doing backward, that's why I can't zoom in or out anymore. Cheer!

Is it possible to combine jquery-ui range slider with scrollbar?

I would like to create a jquery-ui slider which is a combination of the "range slider" and "slider scrollbar" examples. Is this possible?
So it would have 3 manipulation points as below:
I want to use the slider to control a canvas. If you move an end it would zoom in/out of the canvas. If you slide the whole bar it would pan.
To answer your question: Yes, this is possible. To answer the underlying but inevitable "How", please take a look at this answer.

Highchart multiple threshold colors

I'm taking a look at this Highcharts fiddler: http://jsfiddle.net/YWVHx/97/
I'd like to do a very similar chart but it's not working out how I want it to. My current fiddler is this: (see edit below!)
The main functional differece is in the first fiddler, he's using a range, whereas I'm using just actual values (and timestamps).
What's not working for me:
The labels are jacked up. If I try to mouse over a point on mine it's way off; it seems to be 'stuck' on the left. If you try to mouse over you should see the same issue.
I can't zoom in. On his chart you can't zoom in either, but on another chart I was messing around with, it seems like all I needed to do to add zooming was put in:
chart: {
zoomType: 'x'
},
But that doesn't seem to be working here.
The points are so big that the bottom part in green looks too 'blobby'. How can I just remove those point markers?
In summary, how can I have this map have just lines with no blobs, with zooming, and labels that follow your mouse?
EDIT: I have a new version, where the labels work and the blobbiness is removed. However the zoom still doesn't work. How can I enable the zoom?
http://jsfiddle.net/qprmjm67/
Turns out that there's a much easier way to do this, using zones.
stackoverflow makes me put code to put a link. So I'm typing fake code here.
http://jsfiddle.net/2f1c659L/

Raphael charts with Jquery qtip

How to integrate raphael charts with jquery qtip since qtip provides very nice configurable tool tips out of the box?.
I have found the implementation of the stacked area graph in this url http://grafico.kilianvalkhof.com/documentation/#stack . When I started playing with this implementation for the customizing the tool tip on this area chart. But things like applying styles on the text and changing the orientation of the tool tip seemed very difficult .finally I managed to change the text and color of the text on tool tip ,change the size and more . But all customization resulted in tool-tip drifting from its position when the size of the text is increased. But I want all the features available in QTIP for the tool tip .Please any body has clue on this? all ideas are welcome Below is the graph i have generated with the tool tip
I am able to solve this problem by using Jquery FLOT instead of Grafico and Raphael
Jquery FLOT is really cool, easy to use and customize and it has lot online help.
I able to generate stacked area chart with tool-tip as per my requirement.

Categories