Multi Bar Chart with Values at Top (Flot)
This is an example of a multi-bar chart.
The values at the top are not well situated. They need a fix
HTML
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<script src="http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js"></script>
<script src="http://www.lowthercastle.org/packages/hanalei_google_analytics/js/jquery.flot.valuelabels.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.stack.js"></script>
<div id="placeholder" class="bar-chart" style="width:700px;height:400px;"></div>
JavaScript
$(function () {
// I need chartData and chartTicks to be created dynamically from mysql query manipulation (with PHP / and JS ??)
// Below is how the output of these two should look like in order for the chart to work:
// First item in the arrays is the index (position) in x-axis/yaxis, and the second is the value
var data =[{
"name": "1st Online Soultions",
"label": "01-02",
"count": "577",
"customerid": "129"
}, {
"name": "Bookngo",
"label": "01-020",
"count": "62",
"customerid": "129"
}, {
"name": "Boutixury",
"label": "07",
"count": "31",
"customerid": "14"
}, {
"name": "Cruise Village",
"label": "07",
"count": "160",
"customerid": "25"
}, {
"name": "Bookngo",
"label": "07",
"count": "106",
"customerid": "129"
}];
var reduced,
chartData = Object.keys(reduced = data.reduce(function(a, b) {
if(a[b.label]) {
a[b.label].push([a[b.label].length, parseInt(b.count, 10)]);
} else {
a[b.label] = [[0, parseInt(b.count, 10)]];
}
return a;
}, {})).map(function(key) {
return {
label: key,
data: reduced[key]
};
});
// "name" column
var chartTicks = [ [0, "1st Online Solutions"], [1, "Bookngo"], [2, "Boutixury"], [3, "Cruise Village"], [4, "Globe Hotels"] ];
////////////////////////////////
var chartOptions = {
xaxis: { ticks: chartTicks },
grid: { clickable: true, hoverable: true },
series: { stack: true, bars: { show: true, align:'center', barWidth: 0.5 } }
};
$.plot($("#placeholder"), chartData, chartOptions);
//tooltip code
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
...