Charts

Flot Charts

Flotcharts is a library used for drawing different kinds of charts.
For more info about it, please see www.flotcharts.org
To use it, you should include:
components/Flot/jquery.flot.js
components/Flot/jquery.flot.resize.js (to make it responsive)
I have only included the basic files but it has many extra modules for different types of charts which you can download from its page.
IE8 support is provided via excanvas.
You can use the following code to include excanvas for IE8 and below:
```
 <script src="path/to/components/Flot/flotcharts.js"></script>
```

A basic pie chart example would be like this:

var data = [
    { label: "social networks",  data: 38.7, color: "#68BC31"},
    { label: "search engines",  data: 24.5, color: "#2091CF"},
    { label: "ad campaigns",  data: 8.2, color: "#AF4E96"},
    { label: "direct traffic",  data: 18.6, color: "#DA5430"},
    { label: "other",  data: 10, color: "#FEE074"}
]

$('#piechart-placeholder').css({'width':'90%' , 'min-height':'150px'});
var my_chart = $.plot('#piechart-placeholder', data, {
 series: {
  pie: {
    show: true,
    tilt: 0.8,
    highlight: {
        opacity: 0.25
    },
    stroke: {
        color: '#fff',
        width: 2
    },
    startAngle: 2
  }
 },
 legend: {
   show: true,
   position: position || "ne", 
   labelBoxBorderColor: null,
   margin:[-30,15] //some offsetting
 },
 grid: {
   hoverable: true,
   clickable: true
 }
})

Chart tooltip example:

//pie chart tooltip example
//create the tooltip once
var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');

var lastIndex = null;
$('#piechart-placeholder').on('plothover', function (event, pos, item) {
   if(item) {
      if (lastIndex != item.seriesIndex) {
           lastIndex = item.seriesIndex;
           var tooltip_text = item.series['label'] + " : " + item.series['percent']+'%';
           $tooltip.show().children(0).text(tooltip_text);
           //or
		   //$tooltip.find('.tooltip-inner').text(tooltip_text);
       }
       $tooltip.css({top:pos.pageY + 10, left:pos.pageX + 10});
   } else {
      $tooltip.hide();
      lastIndex = null;
   }
 });

Another basic example:

 var d1 = [];//dataset 1 (random data)
 for (var i = 0; i < Math.PI * 2; i += 0.5) {
   d1.push([i, Math.sin(i)]);
 }
 var d2 = [];//dataset 2 (random data)
 for (var i = 0; i < Math.PI * 2; i += 0.5) {
    d2.push([i, Math.cos(i)]);
 }

 //we put the chart inside #sales-charts element
 $('#sales-charts').css({'width':'100%' , 'height':'220px'});
 var my_chart = $.plot("#sales-charts", [
    { label: "Domains", data: d1 },
    { label: "Hosting", data: d2 }
 ], {
    hoverable: true,
    shadowSize: 0,
    series: {
        lines: { show: true },
        points: { show: true }
    },
    xaxis: {
        tickLength: 0
    },
    yaxis: {
        ticks: 10,
        min: -2,
        max: 2,
        tickDecimals: 3
    },
    grid: {
        backgroundColor: { colors: [ "#fff", "#fff" ] },
        borderWidth: 1,
        borderColor:'#555'
    }
 });

Please note that when drawing charts inside a container which is initially hidden, such as a hidden tab pane or a modal dialog, dimensions are unknown and charts may not be drawn properly.
You should try drawing/redrawing your chart when the container is displayed:
```
$('#my-modal).on('shown.bs.modal', function() {
  my_chart.draw();
});

$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   //if( $(e.target).is('#my-desired-tab') ) my_chart.draw();
})
```

Sparklines

Sparkline plugin generates small inline charts.
For more info please see omnipotent.net/jquery.sparkline/
To use it, you should include:
components/jquery.sparkline/index.js
and excanvas for IE 8 and below:
```
 <script src="path/to/components/jquery.sparkline/index.js"></script>
```

A basic example could be like this:

$('.spark').sparkline('html', 
  {
    tagValuesAttribute: 'data-values',//the attribute which has data
    type: 'bar',
    barColor: '#FF0000',
    chartRangeMin: 0
  }
 );

Easy Pie Chart

Easy pie chart plugin generates animated pie charts.
For more info please see github.com/rendro/easy-pie-chart/
To use it, you should include:
components/_mod/easypiechart/jquery.easypiechart.js
and excanvas for IE 8 and below:
```
 <script src="path/to/components/_mod/easypiechart/jquery.easypiechart.js"></script>
```

A basic example could be like this:

$('.easypiechart').each(function(){
   $(this).easyPieChart({
       barColor: $(this).css('color'),//maybe take bar color from text color
       trackColor: '#EEEEEE',
       scaleColor: false,
       lineCap: 'butt',
       lineWidth: 8,
       animate: /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ? false : 1000,//don't animate for IE8 (too slow)
       size:75
   });
});

jQuery Knob

jQuery Knob is a touch friendly dial.
For more info please see: anthonyterrien.com/knob/
To use it, you should include:
components/jquery-knob/js/jquery.knob.js
and excanvas for IE 8 and below:
```
 <script src="path/to/components/jquery-knob/js/jquery.knob.js"></script>
```
A basic example could be like this:
```
 
    
 
```
```
 $(".knob").knob();
```
Please note that latest version of jQuery knob doesn't look good on IE8.
So you might want to include an older version it using IE conditional comments: