Bar chart plugin for Flot


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

 

Download plugin

news

  • 2010-09-20 : Bug correction & Refactoring
  • 2011-10-27 : Horizontal bar add

 

 

   

25 Comments

  2. Alex

    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

    Reply

    • admin

      try something like :

      $(function () {

      var d1 = [];
      for (var i = 0; i < = 10; i += 1) d1.push([i, parseInt(Math.random() * 30)]); var d2 = []; for (var i = 0; i <= 10; 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
      }
      });

      });

      Reply

  9. kondareddy

    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.

    Reply

  10. German

    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!

    Reply

  12. Christos

    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

    Reply

  13. Carlo

    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}}]

    Reply

    • admin

      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.

      Reply

Leave a Reply to German Cancel reply

Your email address will not be published. Required fields are marked *