Inline Charts

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


line graphs
<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            
<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:
<span class="sparkline" data-plugin-options='{"type":"bar","barColor":"#D9534F","height":"26px","barWidth":"5","barSpacing":"2"}'>-3,1,2,0,3,-1</span>


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


Box
<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
<span class="sparkline" data-plugin-options='{"type":"pie","height":"26px"}'>20,50,80</span>


•     1    
•     1    
•     1    
•     1    
•     1    

<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!