Create bar chart in cakephp

  1. First add the  2 js files in page where you want ‘jquery.flot.min.js’, ‘graph.js’.
  2. after include the js.

var graphData = [{
data: [[0,0],[1,10],[2,0],[3,0],[4,18],[5,15],[6,18],[7,5],[8,3],[9,1],[10,0],[11,8],[12,6],[13,1],[14,0],[15,0],[16,0],[17,0],[18,6],[19,3],[20,1],[21,8],[22,0],[23,11],[24,0],[25,2],[26,0],[27,11],[28,11],[29,5]],
color: ‘#ef4a01’
}];

$.plot($(‘#graph-lines’), graphData, {
series: {
points: {
show: true,
radius: 5
},
lines: {
show: true
},
shadowSize: 0
},
grid: {
color: ‘#646464’,
borderColor: ‘transparent’,
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: ‘transparent’,
ticks: <?php echo $test2?>
}
});

function showTooltip(x, y, contents) {
$(‘<div id=”tooltip”>’ + contents + ‘</div>’).css({
top: y – 16,
left: x + 20
}).appendTo(‘body’).fadeIn();
}

var previousPoint = null;

$(‘#graph-lines, #graph-bars’).bind(‘plothover’, function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$(‘#tooltip’).remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, y + ‘ visitors’);
}
} else {
$(‘#tooltip’).remove();
previousPoint = null;
}
});

 

barchart

3.     add the html lines

<div>
<div id=”graph-lines”></div>
</div>