Flot Official Site:
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:
1 2 3 4 5 6 7 |
<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:
1 2 3 4 5 6 7 8 9 10 11 |
.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
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 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$(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:
1 2 3 4 5 6 7 8 9 10 11 12 |
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); } |