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>
<h4>new code:</h4>
<div id="placeholder2" class="bar-chart" style="width:700px;height:400px;"></div>
<h4>original code:</h4>
<div id="placeholder" class="bar-chart" style="width:700px;height:400px;"></div>
JavaScript
$(function () {
var dataFromServer = [{
"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 newData = [];
var newLabels = []; // only used to get index since newData has objects in it
var newTicks = [];
for (var i = 0; i < dataFromServer.length; i++) {
var datapoint = dataFromServer[i];
var tick = newTicks.indexOf(datapoint.name);
if (tick == -1) {
tick = newTicks.length;
newTicks.push(datapoint.name);
}
var index = newLabels.indexOf(datapoint.label);
if (index == -1) {
index = newLabels.length;
newLabels.push(datapoint.label);
newDataPoint = {
label: datapoint.label,
data: []
};
newDataPoint.data[tick] = [tick, datapoint.count];
newData.push(newDataPoint);
} else {
newData[index].data[tick] = [tick, datapoint.count];
}
}
for (var i = 0; i < newTicks.length; i++) {
newTicks[i] = [i, newTicks[i]];
}
newLabels = null;
var newOptions = {
xaxis: {
ticks: newTicks
},
grid: {
clickable: true,
hoverable: true
},
series: {
stack: true,
bars: {
show: true,
align: 'center',
barWidth: 0.5
}
}
};
$.plot($("#placeholder2"),...