I have to build some chart in my page,I use extjs chart now,but I found it is rather heavy...
Through the google,there some jquery based lib,but I have no idea which is better,and it seems test them one by one is not a good idea,so I ask you guys if you have any experiences?
I just care the following points:
1)support drawing chart based json
data.
2)reload chart when data refreshed.
3)easily and readable coding
4)the less thrid-part lib needed,the
better.
flot
ticks all your boxes. I have been using it, seems pretty slick to me.
Flot supports column-line combined chart, thats actually why I used it, see here and here for a more comprehensive list of functionality.
I like Flot, which does most of the things you require.
Here's a good list of charting libraries for jQuery:
http://www.reynoldsftw.com/2009/02/6-jquery-chart-plugins-reviewed/
Related
Im trying to find any plugins, examples or related resources on how to built a Pareto Chart for an html page. I'd like to be able to built it out of html, style it w/ CSS and populate data via json. Im willing to build it out of scratch by using a combination of a line graph and bar graph, however want to be sure there isnt anything already out there for this.
Here is an example of the output i hope to produce
Based on my searches i can only seem to find How-To's, Examples, etc on how to build one in Excel, however nothing for the web.
Any ideas or suggestions are greatly appreciated.
Pareto charts come standard in quite a few JS charting libraries. Here's a demo of one in ZingChart.
You can view the docs for creating pareto charts here. I'm part of the ZingChart team, and you're welcome to reach out to us if you have any questions at support#zingchart.com.
I am not sure from your description whether you would like to build from scratch or if you want to use a charts package. Normally, I would avoid re-inventing the wheel, but I sometimes do a challenge to learn. Below are a few links to pre-made packages of javascript charts that can do pareto, found with a google search (javascript pareto chart -excel -matlab).
http://cyberpython.github.io/AwesomeChartJS/ is apache 2.0
one of the better paid-for versions is http://www.dundas.com/ but there are others.
Sorry that this is a list of links. I would like to be able to rattle off the method from my memory, but I do not do HTML charts as much as I would like to.
It seems some of the options aren't free and/or open source :(
For building from scratch, or at least basing on common libraries, d3 might be a good choice. I ran into a similar issue looking to generate histograms with a cumulative frequency line included in the chart, and to build my own based on some examples. I then investigated further for options for pareto charts and sorted histograms.
If you want to try it with d3, here's some examples to start from (they're not as pretty rendered like the other answers, but a charting/UI web developer can prettify it I'm sure):
a basic d3 pareto chart based off Excel example
a histogram-based pareto chart in d3 - at the time of this post, this d3 sample is incomplete
I'm looking to modify the out-of-the-box tooltips for dc.js, and it seems there is a solution using d3.js tooltips as in this question. However, I'm confused about how to implement this so that the tooltip is modified for all linked graphs in a dc.js dashboard. The examples in the GitHub repo lend themselves well to individual graphs, but I'm currently working with six linked graphs and need to modify tooltips on all graphs. Any help would be appreciated.
Here is a good example of using d3.tip with dc.js:
http://saraquigley.github.io/uc-trends/
http://saraquigley.github.io/uc-trends/javascript/expenses_all.js
The things I would do differently are
do the selectAlls that apply the tips (at the end of her code) in a chart.renderlet(function(chart) { ... }) instead of at top-level, so that they react to changes in the charts.
use chart.selectAll instead of d3.selectAll, for clarity and to be sure that you are only selecting elements in the particular chart rather than across the page.
Hope to work up an example for web/examples or the FAQ but HTH for now.
I'm looking for a JavaScript plugin which would help me to create charts. I would need stacked bar, bar, pie and line charts with drilldown and highlighting features.
Everything I found with these features are just flash and I would prefer using JavaScript.
Does someone have an idea or a suggestion?
Thank you by advance
-Yoann
You may want to look into the google charts api. It's not javascript per se, but it might be exactly what you need.
I have personally used the flot jQuery charting library and can recommend it. Very easy to use. You'll recognize flot from the reputation chart in your profile.
I've also used varioius pieces of Dojo's dojox charting stuff. These take a bit more effort to get going (especially if you're not already familar with dojo) but offer more options/flexibility.
You've probably seen amCharts when you found Flash charts with these features. Now there's amCharts JavaScript library with matching functionality.
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