Flot Official Site:

http://www.flotcharts.org/

Reference (Document):

https://github.com/flot/flot/blob/master/API.md

Flot Animator Plugin:

http://www.codicode.com/art/jquery_flot_animator.aspx

Notes:

1. Data pairs must be two Number.

Examples:

HTML:

<script src="<?=BASEURL?>assets/plugins/flot/jquery.flot.min.js"></script>
<script src="<?=BASEURL?>assets/plugins/flot/plugins/jquery.flot.tooltip.min.js"></script>


<div class="chart-container">
	<div id="single_report" class="chart"></div>
</div>

 CSS:

.chart-container {
	width: 100%;
	height: 350px;
	min-height: 350px;
}
.chart {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2em;
}

 Javascript:

Width tooltip plugion: https://github.com/krzysu/flot.tooltip

$(document).ready(function(){
	//report.init();
	var d1 = [[1,2,'Item 1'], [2,4,'Item 2'], [3,2,'Item 3'], [4,1,'Item 4'], [5,6,'Item 5'], [6,3,'Item 6']];
	var d2 = [[1,1], [2,2], [3,2], [4,1], [5,2], [6,1]];
	var labels = [[1,'1/12'], [2,'2/12'], [3,'3/12'], [4,'4/12'], [5,'5/12'], [6,'6/12'], [7,'7/12']];

	$.plot($("#single_report"), [
		{
			label: 'Clicks', 
			data:d1, 
			bars: {show:true}
		}, 
		{
			label: 'Visitors', 
			data:d2, 
			lines:{show:true}, 
			points: {show:true}
		}
	], {
		series: {
			//lines:{show:true}, 
			//points: {show:true}
		}, 
		xaxis: {
			ticks: labels, 
			tickDecimals: 0, 
			tickFormatter: function(val, axis){
				return val + 'test';
			}
		}, 
		grid: {
            hoverable: true
        }, 
        tooltip: true, 
        tooltipOpts: {
        	//%s: label | X: %x | Y: %y | 3rd value of data array: %ct(Custom tooltip)
            content: '%s: %y clicks of %ct',
            shifts: {
                x: -60,
                y: 25
            }
        }
	});
});

 Data converter:

    function to_flot_data($raw){
        $data = array();
        $labels = array();

        foreach($raw as $key => $item){
            $date_name = date('m/d', strtotime($item->date_name));

            array_push($data, array($key+1, $item->clicks, $date_name));
            array_push($labels, array($key+1, $date_name));
        }
        return array('data'=>$data, 'labels'=>$labels);
    }