Sparkline Charts

Preview sample. Documentation here: http://omnipotent.net/jquery.sparkline/#s-about

This 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.

696K +28%

Visitors this Month

321M +10%

Total users

789K +29%

Social users

5489$ +24%

Total Sales

Sparklines Example chart

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'}); }