This question already has answers here:
Closed 12 years ago.
I want to have a JavaScript pie chart, I already have one with PlotKit, but it's a too large library and my bandwidth is low. I want a good and low weighted one in JavaScript (or better, in jQuery).
Google supplies a webservice returning charts. More info here :
http://code.google.com/intl/nl-NL/apis/chart/
i used this http://www.jqplot.com/index.php library on one of my projects. powerful and easy to use!
And here is an example with pie charts: http://www.jqplot.com/tests/pieTests.php
There is a growing number of Open
Source and commercial solutions for
pure JavaScript charting that do not
require Flash. In this response I will
only present Open Source options.
There are 2 main classes of JavaScript
solutions for graphics that do not
require Flash:
Canvas-based, rendered in IE using ExplorerCanvas that in turns relies on
VML
SVG on standard-based browsers, rendered as VML in IE
There are pros and cons of both
approaches but for a charting library
I would recommend the later because it
is well integrated with DOM, allowing
to manipulate charts elements with the
DOM, and most importantly setting DOM
events. By contrast Canvas charting
libraries must reinvent the DOM wheel
to manage events. So unless you intend
to build static graphs with no event
handling, SVG/VML solutions should be
better.
For SVG/VML solutions there are many
options, including:
Dojox Charting, good if you use the Dojo toolkit already
Raphael-based solutions
Raphael is a very active, well
maintained, and mature, open-source
graphic library with very good
cross-browser support including IE 6
to 8, Firefox, Opera, Safari, Chrome,
and Konqueror. Raphael does not depend
on any JavaScript framework and
therefore can be used with Prototype,
jQuery, Dojo, Mootools, etc...
There are a number of charting
libraries based on Raphael, including
(but not limited to):
gRaphael, an extension of the Raphael graphic library
Ico, with an intuitive API based on a single function call to create
complex charts
Disclosure: I am the developer of one
of the Ico forks on github
(http://github.com/uiteoi/ico).
by Jean Vincent
And other than this:
Top 5 jQuery Chart Plug-ins
If it is OK to use other than jQuery than EJS Charts are also very slick.
Here are some links to sites with JQuery charting plug-ins:
http://www.jscharts.com/
http://www.reynoldsftw.com/2009/02/6-jquery-chart-plugins-reviewed/
http://www.1stwebdesigner.com/resources/top-jquery-chart-libraries-interactive-charts/
and THIS SO thread, which is asking essentially the same question:
Pie chart with jQuery
EDIT: Added some other options
I recently used Flot to do some bar charts
http://people.iola.dk/olau/flot/examples/
and we're using Raphael for some pie charts and other stuff
http://raphaeljs.com/
Related
I'm creating a web portal with maps in SVG format and set in the HTML code using <object> tag in order to preserve the possibility of interactivity. My main problem is how to create and support an interactive SVG format in the browser?
As far as I have researched there are several options:
SMIL animation directly in SVG,
CSS animation,
JavaScript libraries.
It seems to me that this last option has the most potential. There are many libraries (Snap.svg, svg.js, Velocity.js, d3.js, jVectorMap.js, GreenSock ....) to use, so I would appreciate if someone could give some tips on which of them to use.
Do I need to use them within the SVG directly using the <script> tag or using an external .js file? To my knowledge, jQuery can't be used directly within SVG.
In fact, all three variants work more or less with different advantages and drawbacks.
1. SMIL
SMIL is easy to use inside of your SVG and allows modifying attributes of your SVG object directly. However, if you want/need to support Internet Explorer or Edge, you don't have much luck (see CanIUse).
Chrome 45 deprecated SMIL in favor of CSS animations and Web animations. But the Chrome developers recently suspended their intent (see this StackOverflow answer).
2. CSS Animations
These are a good alternative for animation of SVGs. The implementation is normally very fast and smooth, as far as I saw it. Browser support is better especially with Microsoft Browsers. So I would really recommend it.
If you need some more user interaction, you get to the limits of CSS animations quickly. Some interaction is possible, but if you want more, you need JavaScript.
3. JavaScript libraries
jQuery really have serious problems with SVGs, but I think it is better doing without jQuery (for both, jQuery and your software) because if it would support SVGs, it would be even larger and slower. However, if you already have jQuery included, it is possible to select elements and then animate them without jQuery.
Other libraries are more specialized for SVG and work really great (I myself worked with d3.js with good results).
Recommendation
If you don't need to support Microsoft browsers, then SMIL can be an easy and compact way to define certain animations.
If you need those browsers, I would recommend trying CSS animations. But if that seems too static, one of the JavaScript libraries may help.
I am looking for an html5/css/javascript chart library that supports the "follows" on line charts with mobile.
To be precise on what am I refering to by "follows" on line charts, here are good examples:
http://code.shutterstock.com/rickshaw/examples/extensions.html
https://google-developers.appspot.com/chart/interactive/docs/gallery/trendlines
even slightly different, this one would be nice also
http://www.flotcharts.org/flot/examples/tracking/index.html
I have made some tests using the extensive comparison provided here. Unfortunately, I was not able to find a line chart demo with "follows" that worked "out-of-the-box" with both Chrome and Chrome Android. Chrome is my targeted browser for now, I am writing a non commercial app just for fun.
It seems that most of these implementations are based on :hover css selector which is not available for mobile. I tried to bind the :hover logic with the "touchmove" but it was not straightforward (with rickshaw at the very least).
My question is: am I missing a library or an option in the existing libraries or should I keep on trying to implement my custom logic ?
You missed amCharts in your list, it does support "follows", for example:
http://www.amcharts.com/javascript-charts/line-with-duration-on-value-axis/
Note, you should set chart.panEventsEnabled = true in order touch events to work on mobile.
Disclaimer - I am the author of amCharts and amMap.
you can try echarts, it's really good at rendering large data and does supoort "follow", here's the example and the code
http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-dataZoom-all
I would like to replicate this D3js Dynamic Tree example using Raphael. I am not able to use this example in IE8 since it doesn't support SVG. I need to find a alternative to this problem.
I have already been trying this using d34raphael but there is not much documentation for me to get something working except for only a couple of basic examples.
Any suggestions on how to convert this Dynamic tree into Raphael would be much appreciated.
You can build this visualization with Protovis. The example on the Protovis page page isn't dynamic but there are some examples of dynamic trees in the tests.
Protovis has pretty good MSIE 7/8 support through a VML rendering add-on: Protovis-MSIE (disclaimer: I am the author of this).
I really want something that is eye catching and modern. I like how Digg does the Digg swarm (http://labs.digg.com/swarm/)
Have a look at
http://raphaeljs.com/
a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
I don't know if it is the best.
Take a look at flot; http://code.google.com/p/flot/. You can check out some pretty cool-looking implementations of flot, here.
Flot is a pure Javascript plotting
library for jQuery. It produces
graphical plots of arbitrary datasets
on-the-fly client-side.
The focus is on simple usage (all
settings are optional), attractive
looks and interactive features like
zooming and mouse tracking.
The plugin works with Internet
Explorer 6/7/8, Firefox 2.x+, Safari
3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas
Javascript emulation helper is used
for IE).
Protovis is an option.
Edit:
The team behind Protovis has since created D3, so this is likely a better option than Protovis.
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).