Inline Charts

Inline 10,8,9,3,5,8,5
<span class="sparkline" data-plugin-options='{"barColor":"#D9534F","height":"26px"}'>10,8,9,3,5,8,5</span>


line graphs 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10
<span class="sparkline" data-plugin-options='{"barColor":"#D9534F","height":"26px"}'>8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>

Bar charts 9,6,5,6,6,7,7,6,7,8,9,7       9,6,5,6,6,7,7,6,7,8,9,7       9,6,5,6,6,7,7,6,7,8,9,7
<span class="sparkline" data-plugin-options='{"type":"bar","barColor":"#D9534F","height":"26px","barWidth":"5","barSpacing":"2"}'>9,6,5,6,6,7,7,6,7,8,9,7</span>


Negative values: -3,1,2,0,3,-1
<span class="sparkline" data-plugin-options='{"type":"bar","barColor":"#D9534F","height":"26px","barWidth":"5","barSpacing":"2"}'>-3,1,2,0,3,-1</span>


Stacked: 0:2,2:4,4:2,4:1
Stacked <span class="sparkline" data-plugin-options='{"type":"bar","barColor":"#D9534F","height":"26px","barWidth":"5","barSpacing":"2"}'>0:2,2:4,4:2,4:1</span>


Discrete 4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5
<span class="sparkline" data-plugin-options='{"type":"discrete","lineColor":"blue","height":"26px"}'>4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span>


Discrete with treshold 4,6,7,7,4,3,2,1,4
<span class="sparkline" data-plugin-options='{"type":"discrete","lineColor":"blue","thresholdColor":"red","thresholdValue":"4","height":"26px"}'>4,6,7,7,4,3,2,1,4</span>


Bullet 10,12,12,9,7
<span class="sparkline" data-plugin-options='{"type":"bullet","height":"26px"}'>10,12,12,9,7</span>


Box 4,27,34,52,54,59,61,68,78,82,85,87,91,93,100
<span class="sparkline" data-plugin-options='{"type":"box","height":"26px"}'>4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span>


Pie Chart 1,1,2 1,5 20,50,80
<span class="sparkline" data-plugin-options='{"type":"pie","height":"26px"}'>20,50,80</span>


•        
•        
•        
•        
•        

<span class="easyPieChart" data-percent="86" data-easing="easeOutBounce" data-barColor="#ef1e25" data-trackColor="#dddddd" data-scaleColor="#dddddd" data-size="60" data-lineWidth="6">
    <span class="percent"></span>
</span>


NOTE   Javascript functions placed on app.js (do not edit, recommended)
No page level scripts needed!