Sparkline Charts
Preview sample. Documentation here: http://omnipotent.net/jquery.sparkline/#s-aboutThis jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8, 9 & 10 as well as iOS and Android. Each example displayed below takes just 1 line of HTML or javascript to generate.
The plugin was written by Gareth Watts for Splunk Inc and released under the New BSD License.
| Graph | Type | Code |
|---|---|---|
| Inline line chart | { type: 'line', lineColor: '#37a000', fillColor: '#37a000', width: '150', height: '20' } | |
| Bar chart | { type: 'bar', barColor: '#37a000', negBarColor: '#c6c6c6', width: '150', height: '20' } | |
| Pie chart | { type: 'pie', sliceColors: ['#37a000', '#ffffff'], width: '150', height: '20' } | |
| Long inline chart | { type: 'line', lineColor: '#37a000', fillColor: '#37a000', width: '150', height: '20' } | |
| Tristate chart | { type: 'tristate', posBarColor: '#37a000', negBarColor: '#ffffff', width: '150', height: '20'} | |
| Discrete chart | { type: 'discrete', lineColor: '#37a000', width: '150', height: '20'}); } |