I am looking for a time range selector like the draggable google analytics time line section element.
Google provides the time line selection via a three block. This can be achieved with Jquery UI and many others. But the draggable timeline selection seems to be more difficult to achieve.
[ Shame about the image restriction for new users, perhaps someone could upload the image of google analytics time range selection via a draggable area ]
I do not want to use flash/flex for this and am looking for a javascript version. Im sure there is a javascript library out there but can not find it.
Check out the Highcharts master-detail example; the library uses jQuery and is pure JavaScript.
Related
I spent a lot of time looking for JS script for interactive svg maps.
I already found https://imagemappro.com/demo-mall/ and https://mapplic.com/maps/world?location=de. Those two look good and work well. But both of them are using JQ.
I don't want to include JQ to one page, one time use, If possible.
Basically I'm looking for a script that (does not matter if paid):
Have a good API that allows me to select SVG elements and zoom into it etc.
Allow to click into the element and display a popup on top of it with some content.
Responsive and mobile friendly.
Support Drag, zoom.
NO JQ dependency.
Have to support custom SVG.
Allow me to link into an area, or some API hook that allows it.
Thanks for any sugestions.
Mm, tough question. With D3.js library you can do all that but it will require some learning to properly script it.
If you have WordPress then probably easier map plugin than Mapplic (that I still like most) is MapSVG. They offer world maps for free (with named country shapes e.g they have IDs) that you can use without buying MapSVG etc.
Other than that Google and GitHub search would give you various options, this library appears to be widely used (and you can have links in the SVG):
https://github.com/bumbu/svg-pan-zoom
Common problem: I'm writing a web app with Dojo that has Google Earth front and centre (via the plugin), and I want to display Dojo dialog boxes (such as confirmations and forms) over the Google Earth display. The dijit.Dialog widget is inevitably rendered underneath the Earth display, even when the dialog has a very large z-index, and the Earth container (and internal elements) have negative z-indexes.
This question is relevant - it seems due to the IFramey nature of the plugin that a shim is required - but I was wondering if there was anything more specific to Dojo? This is a common problem that ExtJS seems to have solved, and I would have thought Dojo would have as well.
That link was relevant after all. I had a play around with the JavaScript for a while, and eventually dug into extending the dijit.Dialog widget. Simply adding a _shim attribute and updating it occasionally was enough to get everything to work seamlessly! Based on my experiences with attempting similar things with Adobe Flex, this is like a dream come true.
You can take a look at the source of my Shimmy Dialog on Bitbucket.
I need some help or concept from all of you. I want to create a timeline chart with web technology to display tasks that have start and end date on web browser. What technology or concept to create a timeline graphic chart on the browser would be helpful?
Using preexisting tools:
You could build a calendar using a number of calendar plugins that exist, like FullCalendar for jQuery, or any of these other plugins.
Timeline sliders exist, also for jQuery, like Timeline JS, jQuery Timelinr, Timeglider or Tiki-Toki, of which I think the last sounds more aptly suited to your cause.
you could try http://functionn.blogspot.com/2012/03/timeline-javascript-library-for.html
or any of the following:
http://functionn.blogspot.com/search/label/timelines
:)
If you want a super-simple, non-interactive, way of displaying timeline data in a few lines of HTML, you can use the Google Charts API to do it. Here's a self-contained example: https://gist.github.com/KorkyPlunger/16c540f7b622b8906c1351e44bf1bf3c
I started to create a script that allows me to split a big image into small pieces,to zoom, drag , etc.
I want to know what are the possibilities to load the small images just in the active area like in Google Maps (visible). I thought to try to determine the approximate location of one element with some calcules and to determine the element with document.elementFromPoint, but it's not a cross browser solution.
Another solution could be: loading from the beginning just the images from active area and when the user drag or zoom the script must calculate the elements that are new in active area.
see here what I mean active and inactive area: http://i.stack.imgur.com/mRY5K.jpg
PS: I searched the entire site but I did not found an answer. I read also this topic : How does Google Maps work? , but I would like to develop myself the script. (I don't need the complexity of Google Maps, just few features)
Look into DeepZoom. Its an opensource project that does exactly what you want. Its written for .net... but i think it might be what your looking for
DeepZoom is created by SeaDragon and is built for silverlight but they also have a Javascript implementation too called SeaDragon Ajax
I'm thinking about creating a tool to visualize scientific data on a website. For this, the user enters some query string and out comes a simple (x,y)-plot (similar to this)
I know that using Matplotlib, one can generate graphics on the fly for python. However, this doesn't solve the need for some custom java-script code to display the info boxes. I also came across google chart tools, which are very close to what I need. The problem here is, that the code needs to be fetched from google, which my employer won't like.
What would be the best OSS library for python, Java, PHP (or Java-script) out there to meet my requirements?
Thanks,
Chris
If you need dynamic elements without flash or Java applet then JavaScript is the best choice. To create plots you could use HTML5 canvas element.
Capturing mouse events is JS is trivial...