<!DOCTYPE html>
<html>
<head>
<!--[if lte IE 8]><script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div
id="placeholder"
style="width:400px;height:400px;"></div>
</body>
</html>
$(function () {
console.clear();
var source = [{
value: 15,
color: "green",
label: "Item 0"
}, {
value: 5,
color: "grey",
label: "Item 1"
}, {
value: 7,
label: "Item 2"
}, {
value: 1,
label: "Item 3"
}];
var generatedLabels = [];
var colorMap = {};
var dataArray = [];
var defaultColor = "lightblue";
$.each(source, function(index, item) {
generatedLabels.push(item.label);
var color = item.color || defaultColor;
var colorData = colorMap[color];
if(!colorData) {
colorData = {
color: color,
data: []
}
colorMap[color] = colorData;
dataArray.push(colorData);
}
colorData.data.push( [index, item.value] );
});
var data = dataArray;
var labels = generatedLabels;
var barWidth = 0.8;
var remainingBarSpace = 1 - barWidth;
var leftAlignmentDueToCenterLabels = barWidth / 2;
var options = {
series: {
bars: {
show: true,
barWidth: barWidth,
align:'center',
lineWidth: 0
}
},
yaxis: {
min: 0,
tickDecimals: 0,
tickLength: 0,
tickFormatter: function (val, axis) {
return val + "% ";
}
},
xaxis: {
min: 0 - remainingBarSpace - leftAlignmentDueToCenterLabels,
max: labels.length + remainingBarSpace - leftAlignmentDueToCenterLabels,
tickLength: 0,
show: true,
tickSize: 1,
tickFormatter: function (val, axis) {
return labels[val] || "";
}
//ticks: [[1, "F1"], [2, "F2"], [3, "F3"], [4, "F4"] ]
},
grid: {
show:true,
borderWidth: {top: 0, right:0, left:2, bottom:2 }
}
};
var placeholder = $("#placeholder");
var plot = $.plot(placeholder, data, options);
});
/* canvas {
border: 1px solid green;
} */