Charts and graphs
UI Elements
Sparkline

Sparkline

Small inline charts directly in the browser using data supplied in scripts.

Sparkline charts

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.

Graph Type Code
Inline line chart { type: 'line', lineColor: '#f6a821', fillColor: '#f6a821', width: '150', height: '20' }
Bar chart { type: 'bar', barColor: '#f6a821', negBarColor: '#c6c6c6', width: '150', height: '20' }
Pie chart { type: 'pie', sliceColors: ['#f6a821', '#ffffff'], width: '150', height: '20' }
Long inline chart { type: 'line', lineColor: '#f6a821', fillColor: '#f6a821', width: '150', height: '20' }
Tristate chart { type: 'tristate', posBarColor: '#f6a821', negBarColor: '#ffffff', width: '150', height: '20'}
Discrete chart { type: 'discrete', lineColor: '#f6a821', width: '150', height: '20'}); }