Flot – jQuery Chart | Rex's Personal Site

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:

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>

</div>

CSS:

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

.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
            }
        }
	});
});

$(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);
    }

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);

}

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31