Pie Chart


40,60,70
20,30,40

Composite Chart


4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7

Bar Chart


6,5,6,8,3,5,6,4,9,6,7,2,5,4,9,3

Bar Stacked Chart


  • Realtime chart generate by mouse speed

    update display every 500ms. Please move your mouse to see change.

  • Inline 5,6,7,9,9,5,3,2,2,4,6,7 & line graphs 5,6,7,9,9,5,3,2,2,4,6,7 & Inline with normal range 1,9,8,7,6,6,4,7,8,4,10,9,4

    $("#inline").sparkline('html', { type: 'line', width: '40px' });
    $("#inline-graphs").sparkline('html', { type: 'line', width: '100px' });
    $('#normalline').sparkline('html', { fillColor: false, normalRangeMin: -1, normalRangeMax: 6 });

  • Bar charts 5,15,7,2,4,10,12,5,4 and negative values 5,15,7,2,0,-10,-5,4,10,12,5,4,6 and stacked

    $("#bar").sparkline('html', { type: 'bar', barWidth: 6 });
    $("#negative-bar").sparkline('html', { type: 'bar', barWidth: 6 });
    $("#stacked-bar").sparkline('[ [1,4], [2, 6], [3, 2], [4, 1] ,[5,3],[3,8] ]', { type: 'bar' });

  • Tristate charts 1,1,0,1,-1,-1,1,-1,0,0,1,1 (think games won, lost or drawn)

    $("#sparktristate").sparkline('html', { type: 'tristate', posBarColor: '#428400', negBarColor: '#005fbf' });

  • Composite inline 1,2,3,4,5,4,3,2,1,5,6,9,4,3,5,1,2 & Composite bar 4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7

    $('#compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
    $('#compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], { composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10 });

    $('#compositebar').sparkline('html', { type: 'bar', barColor: '#aaf' });
    $('#compositebar').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], { composite: true, fillColor: false, lineColor: 'red' });

  • Discrete 1,2,3,2,1,5,6,7,8,9,8,6,4,3,2,5 and Discrete with threshold 4,6,7,7,4,3,2,-1,-6,-8,-6,9,4,5,2,6,4,5

    $("#discrete3").sparkline('html', { type: 'discrete', thresholdColor: '#ff0000' });
    $("#discrete2").sparkline('html', { type: 'discrete', thresholdValue: 0, thresholdColor: '#ff0000' });

  • Box Plot 4,27,34,52,54,59,61,68,78,82,85,87,91,93,100 & Pie charts 20,30,50,60 & Bullet charts 10,12,12,9,7

    $("#sparkboxplot").sparkline('html', { type: 'box' });
    $("#sparkpie").sparkline('html', { type: 'pie' });
    $("#sparkbullet").sparkline('html', { type: 'bullet' });