Sparkline Charts

Sparkline - This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

Examples

Line Chart

                        
<span id="inlinesparkline-example1"></span>
                        
                    
                        
$('#inlinesparkline-example1').sparkline([1, 4, 4, 7, 25, 3, 8, 9, 5, 1, 15, 5, 9, 10], {
    type: 'line',
    barColor: 'green',
    height: '100px',
    width: '300px'
});

Bar Chart

                        
<span id="inlinesparkline-example2"></span>
                        
                    
                        
$("#inlinesparkline-example2").sparkline([70, 80, 65, 78, 58, 80, 40, 80, 70, 50, 75, 65, 80, 70, 65, 90, 65], {
    type: 'bar',
    height: '100',
    barWidth: 10,
    barSpacing: 4,
    barColor: '#C7FCC9',
    negBarColor: '#81d4fa',
    zeroColor: '#81d4fa'
});

Pie Chart

                        
<span id="inlinesparkline-example3"></span>
                        
                    
                        
$("#inlinesparkline-example3").sparkline([50, 60, 80, 110], {
    type: 'pie',
    width: '150',
    height: '150',
    sliceColors: ['#f4511e', '#ffea00', '#c6ff00', '#00e676', '#1de9b6', '#00e5ff', '#651fff', '#f50057']
});