I need a lightweight javascript library to create a stacked line graph (a bit like what is used in financial graphs). The X axis will be dates and the Y axis will be ordinary float values.
There will be two sections of the graph:
Top graph which is a line graph. I want to be able to specify the color of a line segment (i.e. joining two dated points)
The bottom part is just a rectangle/bar which represents the value. Once again, I want to be able to specify the color of the bar for a particular date.
It would be cool if the library used JQuery (since I have used jQuery in the past) - but even plain old JS code library would be equally useful.
I recommend Google Chart API / Chart Tools (examples) and Google Visualization API (examples).
The former being less powerful than the latter, but also more low-tech, so possibly easier to use (and more portable across platforms. The basic Chart API generates static images for you).
But you can also use:
gRaphael
Bluff
PlotKit
CanvasGraphJS
Grafico
RGraph
Plotr
Or even use a more high-level library like ExtJS (examples).
look at JQPlot http://www.jqplot.com/
UPDATE: Here is a recent and very impressive chart library built by Baidu folks:
http://ecomfe.github.io/echarts/index-en.html
And this one is open source.
Another free option are the Google visualisations.
They could be an overkill for your needs. But you can provide to the users different kind of graphics as they all share the same dataset structure.
The good, you don't host them, they are on the Google's infrastructure and save you the bandwith. The bad, you don't host them... It is not opensource, you can't hack them if you want.
We use them in our web app and are quite happy from it.
Except they don't work with Android, as many use SVG/VML that is off by default for now.
Use raphaeljs and the complimentary charting library. The charting library link has a few examples that will show you what you can do - just view source them to see how easy it is.
Related
I'm about to develop a UI for medical research application. I need to make a time series line graph. Main issue is the amount of data:
5,000 points per graph, with a few of them displayed simultaneity. I’m expecting 50,000 points processed all together.
The question is what presentation library?
The main features I’m looking for are: Handles huge data sets, Zoom, annotations, live update.
I’m already looking into http://dygraphs.com/ and http://meteorcharts.com/
I wouldn't want any library that renders the data as DOM elements, or that uses SVG (from performance perspective)
Well, I think I'll give everyone my own answer to my question:
Dygraphs (http://dygraphs.com/) seems to be on the spot. The documentation, although a lot of apparent efforts, leaves a lot to be desired. But from performance, features and flexibility, it's the best I've seen. At least for my current project needs.
Way to go, Dygraphs!
Have you checked out D3? I'm using that for a lot of graph visualization. It looks like this example renders to svg.
My stuff renders to a SVG for force graph visualizations too, but it looks like D3 might be able to use either a canvas or SVG, but I'm not positive about what all can be rendered to which. Honestly, I'd give D3 a try even with SVG, it might be fast enough. I remember reading something about someone simulating thousands of particles using D3's force graph visualizations without issues. It's SUPER easy to get your data into the right format for it to use.
Good luck!
I am developing a very similar application.
I am currently using Flot for the chart rendering. It handles annotations and zoom, take a look at their plugin library.
I recommend this downsampling plugin which will speed up graph rendering. Rendering 5000 points on your graph is useless: you have less vertical pixels on your screen than that! so this library will only render those that actually have a visual importance.
This only gives you the graph. You may want some kind of dashboard to present all that... I am currently looking at Grafana, which is used for a totally different purpose but makes awesome dashboards. It may be possible to "rip out" their dashboarding features (it uses Flot as well).
Another option is Hightcharts, but that's not free.
Check raphael js Library
Raphaël is 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 am looking for opensource or unlicensed 3D charts.
if you have some link please share them.
Have you tried Google Charts?
https://developers.google.com/chart/
The only real open source(MIT license) 3D charts that I know of are these two
https://github.com/bkuzmic/raphael-charts-plugin
https://github.com/PuffyCoffee/3D-Pie-chart
The first one offers both a pie & bar option. The author is still actively working on it so it should improve over time.
There are other 3D charting tools that claim to be "free" and "open source". But their license is extremely restrictive. Basically, they only allow you to use their tool for free only if you use it for a personal websites with no ads and zero commercial purpose.
Try Highcharts. IBM, NASA, Siemens and others use it according to their Web site. It's pure JavaScript. I searched the Web quite a while for it. I am not quite sure if 3D charts are possible, however it should serve most needs.
Not really 3D, but you could use Flex SDK's data charts: http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/charts/
I don't recall what the status is on the data vis components - they weren't able to open them when they released the rest of the SDK, and I can't find anything on their current status.
I still have yet to come across any other package, Open Source or not, JS or Flash, that will do log-log plots as easily as I could with Flex Charting - some will do y axis, but not x and y.
Coming a little late to the party perhaps - but RGraph can be used under the MIT license and produces some nice 3D charts:
http://www.rgraph.net/docs/3d-javascript-charts.html
Where can I find tutorials to produce data representations on the web with gRaphael? There seem to be no documentation on line.
Many Thanks
I really would recommend against graphael just from personal experience. I looked at it and got stuck several times during my implementation (ex, simple things like axis labels require hacks like setting text at specific spots), and the physical x-axis scaling/ticks that is visible (at least for bar charts that I've tried) don't seem related to the data, as if there is some internal axis that you can't see. I could not find a single graph example that actually had even the minimum # of components a professional graph has (labels, legends, etc), so for me it's just a prettier 'sparklines'. All in all, a lot more trouble than it's worth, plus any documentation you find will be minimal at best.
I would look into jquery options (great documentation and easy browser support for js)
highcharts is #1 if it's for personal
use, very beautiful, interactive,
and easy to use
flot, nice looking though not as
interactive or as many options
jqplot, inspired by flot. this is my
current choice. there's a huge
amount of stuff you can do with
this. interactive and professional
looking, looks like a good sub for highcharts if the licensing fee is too much.
Flash charts (beautiful but flash is a no-no these days):
Open flash charts - It's not too bad
to implement and I used it before I
decided to switch to jqplot. Very
nice looking charts, but my graphs
needed to grab data from the server
more dynamically, and I decided js
was a better option to do it.
Amcharts - easily make good looking
graphs via XML data.
There doesn't seem to be that many beginner tutorials, but here's a couple of reasonably introductory text with examples:
http://www.treutech.com/42/visualizing-data-jqplot-graphael,
http://articles.sitepoint.com/article/graphael-javascript-graphs,
http://blog.jeremi.info/entry/creating-a-chart-with-raphael-js-from-a-google-spreadsheet
I know there has been several discussions on JavaScript chart/graphics libraries, and there is many out there. What I need is one that can:
Zooming and panning
Data point manipulation (like when click on a data point, highlight other data points within the data series with the same certain parameter of the clicked one)
Dynamically change data point values (e.g.: dragging a data point dynamically updating the line shape)
Error bar support, horizontally and vertically
Select data points on the chart
Seems like Flot may have most of the features, if not all(not sure about 3, and 4), but would like to see if I don't miss out on there nice libraries.
Check out the awesome Visualization API on Google's AJAX APIs Playground
Take a look at http://raphaeljs.com/ library.
It has a plugin called gRaphaël which is charting plugin.
Look good but personally didn't use it.
Good luck and share you expirience if you try it.
The Dojo Charting Engine has a pretty astonishing featureset. Sadly dojo seems to suffer from a general lack of evangelism.
I dont know if there are good introductory tuts, maybe the best way is to learn from examples.
Ideally I'd like to do as little preparation data work on the server as possible. The less I have to do to prep the data from the database to make a given chart, the happier I am and the more view I can make in the time.
Some of the things I'd like to chart are, for example:
The distribution of a series of response times
The number of occurrences per category (basic bar chart)
I'm sure there are others I haven't thought of yet.
Anything that helps me get from a series such as:
[1, 2, 2, 2, 3, 4, 5, 5, 3, 1] or more likely something like [1.2, 3.2, 3.1, 1.1, 4.3, 3.4] where it isn't just a case of counting the frequency of the item
to an actual distribution would be great.
Thanks.
EDIT: To clarify I guess I'm asking for more than just charting APIs, a search on Yahoo or Stack Overflow already finds answers to that. I'm looking for something that can help me turn data into visualizations with the least effort. So with the series above, something that could map it directly into some standard distributions such as a Gaussian distribution.
I like Google Charts API. It is brain-dead simple to use. You generate your data in the URL for an image, and the Google server spits back the GIF with the chart in it. You don't need JavaScript or Flash.
I use JS Charts, which is a Javascript based one, looked simple and easy enough for me to use. They even have support for xml data in addition to js. It is free and they have got some examples.
Works on IE and Chrome fine, so ideally should work on Firefox. as well.
On the Flash side, there is Open Flash Chart , they have got some helper classes for major languages.
Edit: based on the additional information in question i guess Google Visualization API (http://code.google.com/apis/visualization/) might work out for you.
jQuery Sparklines
I've used flot (http://code.google.com/p/flot/) with some good results. It's pure javascript, doesn't require flash. It uses an html canvas to draw the charts from javascripts. Works on msie with a plugin. Some examples: http://people.iola.dk/olau/flot/examples/
Take a look at amCharts. It's a Flash based library. You can pass data to it in XML or CSV format (or in case you use ASP.NET there's a control wrapper which supports data-binding).
Try the Google visualization API.
http://code.google.com/apis/visualization/
On http://www.drasticdata.nl there are some interesting flash based graph and treemap utilities.
The hierarchical bar chart or the dynamic treemap might be of interest for your task.
I've used flotr(http://code.google.com/p/flotr/) before, which is heavily inspired by the above mentioned flot, but instead of jquery it uses prototype. It works the same way as flot as in it is pure javascript.
I haven't used it extensively yet, but after some initial fiddling around i was quite impressed with Open Flash Chart (which i just noticed was already mentioned by Dinesh above)
My reports done with Fusion Charts always seem to impress. Fairly easy to work with and lots of charting options. Flash is the technology, so no real platform troubles for web display.
JS Charts does not support area charts