Graph > Inline Charts

JQuery Sparklines Modified for easier usage

Sparklines are light weight, easy to use, inline charts. We have modified sparklines so you can use it with just data-* values, without the use of javascript


  • Inline Graphs   90,30,60,40,60,70,50,40,70,60,90,50  also change width, height, and color   4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7

    <span data-sparkline-type="line" data-sparkline-width="50px" data-sparkline-height="18px">90,30,60,...</span>

  • Compose inline charts and Composite Bar charts 

    <span data-sparkline-type="compositeline" data-sparkline-height="15px" data-sparkline-line-val="[9,8,7...]" data-sparkline-bar-val="[4,1,5...]"></span>

  • Discrete bars    4,6,7,7,4,3,2,1,4,4   and with threshhold   4,6,7,7,4,3,2,1,4,4

    <span data-sparkline-type="discrete" data-sparkline-height="18px" data-sparkline-width="30" data-sparkline-threshold="4">4,6,7,...</span>

  • Nifty Bar Charts    50,40,70,60,90,50   with negatives and thicker bars   5,6,7,2,0,-4,-2,4 and stacked bars   1:3, 5:3, 2:7,9:1,5:6

    <span data-sparkline-type="bar" data-sparkline-width="50px" data-sparkline-bar data-sparkline-height="15px">50,40,70,...</span>

  • Box plots  10,12,12,9,7   and bullet plots   4,27,34,52,54,59,61,68,78,82,85,87,91,93,100

    <span data-sparkline-type="compositebar" data-sparkline-line-width="1.5" data-sparkline-line-val="[6,4,7...]" data-sparkline-bar-val="[4,1,5...]"></span>

  • Pie Charts   3,5,2

    <span data-sparkline-type="pie" data-sparkline-offset="90" data-sparkline-piesize="18px">3,5,2</span>

Examples below are done without any javascript!

Pie Chart


3,5,2
30,20,15,35

Composite Chart


Bar Chart


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

Bar Stacked Chart


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

Composite Line with fills


4,3,3,1,4,3,2,2,3

Line chart variation


6,4,3,5,2,4,6,4,3,3,4,5,4,3,2,4,5,

+ 39.57

-12.45

Easy Pie Charts Simplified for faster production

Easy Pie Charts gives you a nice animation twist to your pie charts - they are also dynamic, which will make it a really nice ajax based live charts for your project

<div class="easy-pie-chart txt-color-blue easyPieChart" data-percent="36" data-size="180"> data-pie-size="50"> <span class="percent percent-sign txt-color-blue font-xl semi-bold">36</span> </div>

  •    
    49
       
  •    
    36
       
  •    
    46
       
  •    
    56
       
  •    
    66
       
  •    
    76
       
  •    
    86