Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm looking for large-scale world maps that I can shade by country. Google Charts has an API for this but it only allows you to generate a small map (440x220 px). Does anyone know of a way to generate such maps with an open-source library?
I work on a library which provides functionality similar to described in the question. It's called jVectorMap. This is a jQuery plugin, which allows to place world map components on web pages using SVG in modern browsers and VML in IE 6-8. You can customize it in many ways, changing look and behavior of map. Unfortunately documentation is not ready yet. You can check out example and code here http://jvectormap.owl-hollow.net/.
In the meantime, google released Geochart Maps, an update to the geomap. It creates SVG maps, and you can make them whatever size you want, with aspect ratio or not.
I developed a plugin to build maps using this API for wordpress.
Check it out at http://cmoreira.net/interactive-world-maps-demo/
With the Wikipedia SVG Maps you can "shade" countries by simply using CSS.
Some examples of using such maps (SVG, CSS, HTML, JS) can be found here. That will export either a full map, or just the stylesheet which can be applied to a local copy of the map. I'd recommend using Opera for the best viewing experience, but it should work in all the browsers that support SVG.
These days, I would recommend using either Polymaps or d3. The former is a full-fledged "slippy maps" library that works with SVG. The latter is a visualization library that works with SVG and has a growing amount of geo features. If you don't need pan, zoom, and other "slippy" features, then try d3, like this example: http://mbostock.github.com/d3/ex/choropleth.html
The Geomap, from the Google Visualization API, can be sized as large as you want; however, it uses Flash instead of SVG.
Wikipedia has a lot of SVG Maps, but it is not a library.
As its author, I recommend http://www.makeclickablemap.com for SVG based mapping.
It has growing number of countries and a beautiful easy to use interface to edit your maps that you can embed anywhere using an iframe.
Check amMap: http://www.ammap.com - we have SVG maps of most countries of the world and a API for making these maps interactive, zoomable, etc.
Disclaimer - I am the author of the amMap.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I want to create a time series line graph in D3, with a smaller version of the graph below that allows the user to zoom in on certain sections of the chart, like a Google Finance graph.
The closest example I've found is this swimlane chart:
http://bl.ocks.org/1962173
Does anyone have any examples of doing this with a line graph in D3?
NB: I definitely want a small version of the graph with a resizeable brush on top, not a purely draggable/zoomable x-axis, like this example.
Ideally, I'd like to use Rickshaw, but the Rickshaw examples only seem to have a range slider. So a Rickshaw example would be even better.
NVD3 is a very cool project that has a number of reusable charts written upon D3. See here for an example of a line chart with a view finder, along with source code.
Update: The NVD3 example now also links to an example of Mike Bostock's (creator of D3) which demonstrates similar functionality, the ability to zoom/focus on a selection of the data, implemented purely with D3.js.
dygraphs does exactly what you want in this demo:
http://dygraphs.com/gallery/#g/range-selector
How about HighStock, HighCharts lesser known sibling?
I know you're intent on using D3, but Humble Finance has to be worth a mention as it does exactly what you want with just javascript and canvases.
If you're really intent on using D3, I guess you will have to create something of your own which has to be a waste of time given how good and suitable humble finance is.
Tip for trying Humble Finance: the zip download doesn't include flotr2 which it requires, however it can easily be download from here (obviously you then have to add the required flotr2 files to the Humble Finance directory in the right place).
Edit:
Ignore Humble Finance, I tried using it a lot and it drove me round the bend. The code base seemed to be quite messy and you had to end up added far to many libraries to your page to get it to work, it's then very hard to make even minor alterations to the chart. I'm now using D3, but i found it's SVG rendered too slowly with lots (lots and lots) of points on the curve. I ended up using D3 to draw the axes, setup the scales and render the timeframe changing thing, and drawing the curve using a canvas. That seems to work pretty well. Sorry i don't have the example anywhere viewable.
Have you seen Crossfilter? Another offering based on D3, which has similar properties to Google Finance's interface.
I'm not familiar with either of the frameworks you mention but wondered if it was an option for you to use google charts instead? Using this you would be able to what they do in google finance and the example for how to do it could be taken from their website.
If you're looking for other frameworks to look into I can recommend Emprise Charts - I'm pretty sure you would be able to do something similar there and their development team are very helpful.
Rickshaw now supports this!
See example and Rickshaw.Graph.RangeSlider.Preview.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am in search for jquery timeline plugin with years on the horizontal axis.
I have seen one in the past. I am not able to find it. Did search for jquery timeline plugins.
Here are 2 that I had stored in my bookmarks. They aren't jquery plugins, but they could be adapted to be jquery plugins. Eric Meyer's structured timeline and timeplot. I also found this service called Tiki-Toki which offers timelines as a web service.
Or you could just use something like HighCharts if that will work for your situation.
Have a look at this http://timeline.verite.co/. Its real good. Plus you could have JSON or Google Spreadsheets as data sources.
There’s jQuery Timelinr, if you need only years.
For more data, esp. scientific use, have a look at Timeglider or SIMILE Timeline (without jQuery).
TimeGlider may be useful, and free for non-commercial use.
Two more:
Advanced Event Timeline With PHP, CSS & jQuery at Tutorialzine
Dipity, to create your timeline online
I developed a simple jQuery plugin for this purpose, although it displays the years (or century or decade--anything of your choosing) on the vertical axis. See http://www.technotarek.com/timeliner/ and http://www.technotarek.com/timeliner/timeliner.html
A great timeline control that I have been using recently is the CHAP Almende Timeline. It is simple on the surface and to use, but offers plenty of customisability. Seems fairly lightweight, and is able to handle large amounts of events on most browsers (for some reason some browsers choke a bit on large data sets when you zoom out too far). This works quite nicely on tablet touch screens too, if that is useful to you.
CHAP Almende timeline is also regularly updated by Jos de Jong at https://github.com/almende/chap-links-library and he is pretty quick to address any issues.
For anyone that will end up on this post, like me, on its search to jquery timeline plugins, (although it is an old question):
http://timeline.verite.co/
http://timeglider.com/jquery/
http://www.csslab.cl/ejemplos/timelinr/latest/horizontal.html
Cheers!
I made this one, but this is just for navigation, I'm not sure what's the use case of the timeline you're looking for:
jQuery-Timeline Plugin
http://timeline.verite.co/ is good time Line JS
You can try this enhanced jquery timelinr, it integrated jquery timelinr, cufon and animate.css. Good for simple timeline show.
Check this out for various Timeline JavaScript libraries: http://functionn.blogspot.com/search/label/timelines#.ULj4aU_Mjs4
Alternatively, I would recommend you using:
http://functionn.blogspot.com/2012/03/timeline-javascript-library-for.html
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I want to build an image scroller that works like google map. When the website first loads, there will be a viewing box in the middle of the page that contains part of an image. A user can click and drag the image, that is scrolling, to inspect other areas of the image. If the user happens to scroll beyond the perimeter of the image, the box will load an adjacent image. I also want to overlay these images with markers that the user can click on to zoom in for more details.
Is there a library that does what I want already? Or something close to what I want so that I can start to customize it? Or if I have to build from scratch, any suggestions on the general approach to take?
I like using jquery library, so anything built with jquery would be awesome.
I don't think this does everything you're looking for, but might be a good place to start: SpryMap
Take a look at the Overscroll jQuery plugin.
I've used OpenLayers for projects similar to this and it works great!
Not based on jQuery though.
It provides free maps but you can have your own images as well.
Just for some design ideas to take into account when writing/finding your solution:
There are two ways of doing this, one with multiple chopped up images that preload when the user scrolls near them, and the other which is simpler and loads one big image.
If your image(s) are very big, you should opt for a solution that preloads segments as this will be a lot more user friendly if you can do it seamlessly.
The big image will slow down some computers/mobile devices significantly!
If you built something yourself, it probably couldn't be pure jQuery. You'd want to write a server script that either processes your big images into segments that you cache, or serves segments on the fly. That's the point at which you could start using jQuery to control what gets loaded ans when.
I think CraftMap seems to provide what you are asking for. But I'm unsure if it supports zooming.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
We are looking for a nice javascript-based library for a web charting application we have been asked to do. The charts will be accessible and should actually be nice to interact with via mobile devices (iOS, Android, and the like). The user will be able to drill-down into some datasets, so the snappier (both processing graphics and loading data) and the more interactive, the better.
Nowadays, there are countless options out there, and many aspects to look at. Based on my research, I have put together the following list. Apologies beforehand for any mistake, it is not intended to be 100% complete or accurate.. but I think that still useful:
https://spreadsheets.google.com/pub?key=0As7T_22rXSbtdF9YeklwcUVXSEdwQnN0a0FvcWpoU2c&output=html
What is your opinion? Do you have any experiences in such kind of application? Maybe some candidate I am missing?
We are narrowing down the choice, but I am still not sure as for what choice is the best bet. Some questions that pop-up in my mind:
Different ways of rendering the chart (SVG/VML versus HTML 5 canvas). Which one is more suited to browsers in mobile devices? Which one is more suited to user interaction?
Making it look good. Which libraries allow to easily tweak appearance? Is CSS really powerful for this?
You missed out Sencha Touch
first of all, if mobile support is a must-have for you, discard SVG as a solution. It's not widespread supported. Canvas in the other hand, is not supported by old versions of IE, but can be simulated via VML with the exCanvas.js library.
About making it looking good, CSS has nothing to do with these libraries. CSS affects DOM elements, and canvas content is binary data. Canvas is, as the word says, a blank canvas for you to draw in via a Javascript API. Once you draw a line in a canvas element, that information is just pixels in the canvas.
BTW, is a good list the one you collected, and I'm pretty sure it's quite complete. The only intruder in it is Dundas. First of all, is a .Net library, and generates the charts in the server. Second, is deprecated. Dundas is no longer selling components, they're totally engaged with their dashboards solution.
Hope I'd help.
I've chosen Flot for several projects now and it has worked well. It's well documented with lots of examples, configurable, looks great, and is extensible. It is dependent on jQuery.
You might also want to add dhtmlxChart to your list.
It's a Canvas based JavaScript charting library that supports different chart types: line, pie, area, bar, radar, etc. dhtmlxChart is distributed under GPL v2 (commercial license is needed to use it in a proprietary project).
(Disclaimer: I work for DHTMLX)
I know this is an old question, but we had to do a similar research recently.
We focused our study on mobile charting libraries (Android and iOS, native or hybrid -with Cordova-) supporting line / area charts. All the information has been gathered from the websites of the respective chart libraries and no personal test has been made (yet).
Here's the result:
https://goo.gl/0tVC6a
I hope it helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Any suggestion for a JavaScript interactive drawing library? Just need to draw lines, polygons, texts of different colors. IE/Firefox/Opera/Safari compatible.
Raphael is pretty cool for that, and works across browsers since it uses VML (for MSIE) and SVG (for everything else).
John Resig's Processing.js is a nice framework for that.
You can use the canvas object directly to draw in 2D. IE requires the excanvas library.
http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas
Try http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm. It's the best I've found (without resorting to SVG) and works in most browsers without add-ins.
Drawing text with the canvas tag is a big pain. Your options are to use regular divs absolutely positioned in the right places, or find/write a font layout engine (example), or wait for a new standard to be implemented that lets you draw text. SVG deals with this much better.
In IE you have ExplorerCanvas to simulate the canvas API with IE's own VML markup. However, native VML can do text on a path and such things much like SVG. I think theoretically if you want complex text handling you'd want SVG and VML like the Raphael library that Dan mentioned.
You might also consider Flash for a moment before starting.
As mentioned above, canvas is the way you should go. IE doesn't support it natively, so you'll need to download ExCanvas to ensure cross-browser compatibility. I'd recommend looking at Ajaxian for some projects that use the canvas tag.
Checkout the jQuery Drawing plugin, and you can also look at the Mozilla Canvas reference and tutorial.
Also mxGraph. This doesn't use excanvas for IE. Excanvas is way slower than using VML, specifically, re-using the same VML nodes rather than deleting, adding DOM nodes for redrawing. This is often a overlooked point, but excanvas on IE performance is just awful.
Depending on how cross-browser you need to be and your goal of doing the output, you might look into the Canvas element and the related javascript.
Canvas
D3.js
D3.js is a JavaScript library for manipulating documents based on
data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s
emphasis on web standards gives you the full capabilities of modern
browsers without tying yourself to a proprietary framework, combining
powerful visualization components and a data-driven approach to DOM
manipulation.
Take a look at this discussion too.