Flot side by side bars plugin
As you can see on this example, there are three bars for the same x value. Bars are side by side located. But for each bar the tooltip display the right x value.
Vertical bars
Horizontal bars
news
- 2010-09-20 : Bug correction & Refactoring
- 2011-10-27 : Horizontal bar add
How to resize one of the plugins of the Flot library? | Jisku.com - Developers Network
[…] I need to start using one of the extra-plugins that allows to display bars side by side. Since this is just a non-official plugin chart, I’m […]
Hi,
I found a missing semicolon at the end of orderbars plugin.
It is:
})(jQuery)
it should be :
})(jQuery);
I’ve noticed this when I was obfuscating my code.
Regards
I just add the semilicon
Thanx
Funciona de maravilla,
muchas gracias por la informacion
How can i set the category’s names?
nice plugin..
Its good plugin.
Hey how to set different colors for the bars manually.
try something like :
Awesome… it works.. Thanks…
Is it possible combine this plugin with “Categories” plugin?
http://www.flotcharts.org/flot/examples/categories/index.html
Thanks
I didn’t try but if think you can obtain the same result using “ticks” attribute
Good tip. It works!
Thanks
Hi i want to design side by side bars and stacked(same as above example but it shoulb stacked one above the other) using flot plugin can you help me how i can pass the json data as input fot the side by side and stacked bar. pls help me on this, thnks in adv.
I’m not sur to understand what you want to do, but pkoltermann did a fork of this plugin that work with stacked plugin.
https://github.com/pkoltermann/SideBySideImproved
Hi, this is an excellent plugin but it doesn’t allow to change colors.
I’ve seen the answer above but no luck, I’ve tested it with the same from this demo and doesn’t work.
I hope you can find a workaround for this or add a pretty simple demo with other colors to use as a reference.
Thanks and keep up the good work!
No need of fix… the way to change colors for each bar is using the “fillColor” property
you’re faster than me
Hello, thanks for this plugin,
I have a small issue How can I display legand of my series ?
Thanks
Thanks I find a solution it’s to use label with a string value.
Cordially,
Hello ,
Awesome plugin !
Made my life a lot easier .
Do you know if there is a possibility to create bars with stripes inside .
I need something to separate 2 bigger categories of bars . This screenshot may helps :
http://prntscr.com/bz06he
I need to separate the upper color from the non-opacity color with stripes or something
Maybe you can use stack bars plugin like this one :
https://github.com/skeleton9/flot.stackpercent
or the core stack plugin :
http://www.flotcharts.org/flot/examples/stacking/index.html
Great Plot Plugin, it has help a lot.
Playing with different data, i found sometimes bars overlaps with other bars corresponding for other x-axis value.
Can bars autwidth so they don’t overlap?
Canvas width: 700px
here sample data.
[{“label”:”Poder judicial (con SCJ)”,”data”:[[2015,54.1000],[2016,0.0000]],”bars”:{“show”:true,”horizontal”:false,”barWidth”:0.2,”order”:0}},{“label”:”Poder judicial (sin SCJ)”,”data”:[[2015,54.8000],[2016,0.0000]],”bars”:{“show”:true,”horizontal”:false,”barWidth”:0.2,”order”:1}},{“label”:”Suprema Corte de Justicia (SCJ)”,”data”:[[2015,26.7000],[2016,25.0000]],”bars”:{“show”:true,”horizontal”:false,”barWidth”:0.2,”order”:2}},{“label”:”Consejo del Poder Judicial”,”data”:[[2015,20.0000],[2016,45.0000]],”bars”:{“show”:true,”horizontal”:false,”barWidth”:0.2,”order”:3}},{“label”:”Tribunal Constitucional”,”data”:[[2015,23.1000],[2016,23.0769]],”bars”:{“show”:true,”horizontal”:false,”barWidth”:0.2,”order”:4}},{“label”:”Tribunal Superior Electoral”,”data”:[[2015,20.0000],[2016,20.0000]],”bars”:{“show”:true,”horizontal”:false,”barWidth”:0.2,”order”:5}}]
Hi,
It’s not yet in the plugin but it’s à good idée for an enhancement.
Can you share a working example where the x-axis has string and not numbers.
Thanks in advance
Try something like :
$(function () {
var d1 = [];for (var i = 0; i < 5; i += 1) d1.push([i, parseInt(Math.random() * 30)]); var d2 = []; for (var i = 0; i < 5; i += 1) d2.push([i, parseInt(Math.random() * 30)]); var ds = new Array(); ds.push({ data:d1, bars: { show: true, barWidth: 0.2, order: 1, lineWidth : 2, color : "#ff0000"}}); ds.push({ data:d2, bars: { show: true, barWidth: 0.2, order: 2, color : "#00ff00" } }); //Display graph $.plot($("#placeholder1"), ds, { grid:{ hoverable:true }, xaxis :{ ticks: [[0, "Zone0"], [1, "Zone1"], [2, "Zone2"], [3, "Zone3"], [4, "Zone4"]] } }); });
The important point is the "ticks" property.