I want to do some simple bar graphs - what can I use to do this. Any libraries - jQuery related maybe...
Thanks!
Printable View
I want to do some simple bar graphs - what can I use to do this. Any libraries - jQuery related maybe...
Thanks!
Check this: http://designmodo.com/jquery-charts-graphs/
Or try the free Google Charts: https://developers.google.com/chart/
:wave:
I was trying out TufteGraph - which requires jQuery.enumerable.js - and that breaks other parts of my code - stuff in my SlickGrid editors, for some reason (can't bind keydown events....).
Do you know if Google Charts is costly in terms of size of api, for example?
In that designmodo link - have you used any of these yourself and found them lightweight and non destructive?
I am not sure about the merits or demerits. Because I have not used any of them yet. But I would certainly use one of them in my ongoing project soon.
Google's seems to be good, but I am worried whether they would take out the "FREE" tag after 2 or 3 years. But they assure that they won't do it till 2015 (check out the terms of service page).
:wave:
I use jqPlot for all my charts. On desktop as well as iPad/mobile.
http://www.jqplot.com/
http://www.jqplot.com/deploy/dist/examples/
https://bitbucket.org/cleonello/jqplot/wiki/Home
Your best option is to clone the bitbucket repository and build/minify the latest sources yourself with Ant.
https://groups.google.com/forum/m/#!...0/oevxEOqfumEJ
omg - jqPlot is so, so cool!!!
this small amount of code makes this graph (from the "slickgrid" data source that's behind it). Of course I had to loop through the row of data to build the s1 array - and I'm passing the ticks "headings" in from the sql that builds that slickgrid...
Made this graph!!Code:var gPlot = $.jqplot('acs-graph-space', [s1], { animate: !$.jqplot.use_excanvas,
seriesDefaults: { renderer: $.jqplot.BarRenderer, label: strLabel, pointLabels: { show: true} },
axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks },
yaxis: { max: maxP}
},
highlighter: { show: false },
legend: { show: true, location: 'ne', xoffset: 12, yoffset: 12 }
});