Features: * Multiple Data Representations: Treemaps, Radial Layouts, HyperTrees/Graphs, SpaceTree-like Layouts, and more... * Major Browsers Support: IE6+, Firefox2+, Safari3+, Opera9.5+ * Open Source: Licensed under the BSD License * Library Agnostic: You may use the JIT with your favorite DOM manipulation framework * Extensible: All visualization classes are mutable, so you can easily add/override any method you want. * Composable: Visualizations can be combined in order to create new visualization methods.
jQuery Google Charts 1.0
Copyright (c) 2008 Massimiliano Balestrieri
Examples and docs at: http://maxb.net/blog/
Licensed GPL licenses:
http://www.gnu.org/licenses/gpl.html
Basic usage:
var api = new jGCharts.Api();
jQuery('
')
.attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}))
.appendTo("#bar1");
Html:
Basic scripts (use packed version in production):
via
http://www.ajaxline.com/best-jquery-plugins-june-2009
google.visualization.Query.setResponse({
version: '0.6',
status: 'ok',
sig: '202289222',
table: {
cols: [{
id: 'A',
label: 'Name',
type: 'string',
pattern: ''
},
{
id: 'B',
label: 'Value',
type: 'number',
pattern: '#0.###############'
}],
rows: [{
c: [{
v: 'One'
},
{
v: 1.0,
f: '1'
}]
},
{
c: [{
v: 'Ten'
},
{
v: 10.0,
f: '10'
}]
}]
}
});
( pretty printed by http://jsbeautifier.org/ )
Represents a query that is sent to a data source.
google.visualization.Query(dataSourceUrl, opt_options)
Parameters
<script type="text/javascript" src="http://willarson.com/code/sparklines/processing.js"></script>
<script type="text/javascript" src="http://willarson.com/code/sparklines/sparklines.js"></script>
<script>
var setup_sparklines = function() {
var opts = {};
var data = [100,500,300,200,400,500,400,400,100,200];
new Sparkline('simple1', data).draw();
};
</script>
<p> A simple sparkline. </p>
<pre><code>var data = [100,500,300,200,400,500,400,400,100,200];
new Sparkline('simple1', data).draw();</code></pre>
<canvas width="300" height="50" id="simple1" ></canvas>
<script>
setup_sparklines();
</script>
http://willarson.com/code/sparklines/sparklines.html
A simple sparkline.
var data = [100,500,300,200,400,500,400,400,100,200];
new Sparkline('simple1', data).draw();
Eric Rodenbeck is Stamen's founder and creative director. He is a 14-year veteran of the interactive design field, and has spent this time working to extend the boundaries of online media and live information visualization.
Eric led the interactive storytelling and data-driven narrative effort at Quokka Sports, illustrated and designed at Wired and Wired Books, and was a co-founder of the design collective Umwow. He has lectured and spoken at Yale University, the University of Southern California, numerous O'Reilly technology conferences, Esther Dyson's PC Forum, and South by Southwest, among others. Eric studied architecture at Cooper Union in New York City and received a B.A. in the History and Philosophy of Technology from The New School for Social Research. He sits on the Board of Directors of the Kenneth Rainin Foundation.Resources: