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.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 chartData = [{
label: "01-02", // the labels should be the innumber/outnumber columns
data: [
[0, 3],
[1, 19],
[2, 15],
[3, 5],
[4, 11]
] // "count" column for 01-02 type
}, {
label: "00",
data: [
[0, 8],
[1, 6],
[2, 12],
[3, 10],
[4, 1]
]
}, {
label: "087",
data: [
[0, 12],
[1, 34],
[2, 4],
[3, 2],
[4, 13]
]
}, {
label: "084",
data: [
[0, 21],
[1, 20],
[2, 12],
[3, 10],
[4, 1]
]
}, {
label: "080",
data: [
[0, 3],
[1, 12],
[2, 42],
[3, 53],
[4, 13]
]
}];
// "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,
lineWidth: 0,
fillColor: {
colors: [{
opacity: 1.0
}, {
opacity: 1.0
...