Using Flot with multiple with orderbars.js and categories
I am having trouble creating multiple bars with flot. There is a plugin
that can be downloaded here:
http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js that
makes graphs with multiple bars per x category like this:
http://www.pikemere.co.uk/blog/tutorial-flot-how-to-create-bar-charts/
(see under the customized bar charts). However, his example is a bit
different in that it uses the time function rather than categories.
Here is my code:
<!doctype html>
<head>
<script language="javascript" type="text/javascript"
src="/flot/jquery.js"></script>
<script language="javascript" type="text/javascript"
src="/flot/jquery.flot.js"> </script>
<script language="javascript" type="text/javascript"
src="/flot/jquery.flot.categories.js"></script>
<script language="javascript" type="text/javascript"
src="/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data1 = [
{
label: "Male" ,
data: [["True", 1],["False", 2]] ,
bars: {
show: true,
barWidth: 0.13,
order: 1
}
},
{
label: "Female" ,
data: [["True", 3],["False", 4]],
bars: {
show: true,
barWidth: 0.13,
order: 2
}
}
];
$.plot($("#placeholder"), data1, {
xaxis: {
mode: "categories"
},
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px"></div>
</body>
</html>
With the above code, the graph displays, but without any bars. If I remove
the order:1 and order:2, it displays correctly, except with the bars
overlapping each other rather than being offset by each other (I think it
just ignores the orderbars plugin).
This is a very simplified example of what I really want to do, but if
someone knows how I can get it to do what I want fairly simply, I would be
very much appreciative.
To sum up, what I want is to have two sets of two bars. The first set with
"True" under them and the second second set with "False" under them. I do
not want to use numbers to represent the values, if possible as it will
greatly complicate my more complex situation. But if I must, I would still
like to know how to do it that way.
No comments:
Post a Comment