# 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:
  `assets/js/flot/jquery.flot.js`
  `assets/js/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/assets/js/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:
  `assets/js/jquery.sparkline.js`
  and `excanvas` for IE 8 and below:

       <script src="path/to/assets/js/query.sparkline.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:
  `assets/js/jquery.easypiechart.min.js`
  and `excanvas` for IE 8 and below:

       <script src="path/to/assets/js/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
         });
      });

- Android's default browser has a problem with latest version of easy pie chart, not rendering properly.
  https://github.com/rendro/easy-pie-chart/issues/81
  You can use an older version of the plugin `jquery.easy-pie-chart-older.js` and the problem does not exist.

### jQuery Knob

- jQuery Knob is a touch friendly dial.
  For more info please see: anthonyterrien.com/knob/
- To use it, you should include:
  `assets/js/jquery.knob.min.js`
  and `excanvas` for IE 8 and below:

       <script src="path/to/assets/js/jquery.knob.min.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 I included the older version and you can include it for IE only using the following conditional comments: