Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render this bar chart with flot

Tags:

flot

Can you render a bar chart like this using flot?

Example chart

Do I need to create the dataset manually to get this result, instead of using mode: 'time' ?

like image 244
Morri Avatar asked Nov 10 '11 12:11

Morri


1 Answers

Actually pretty easy to produce using flot.

var options = {
     series: {
         bars: {
             show: true,
             barWidth: 15778463000, // 1/2 year in milliseconds
             align: 'center'
         },
     },
     yaxes: {
         min: 0
     },
     xaxis: {
         mode: 'time',
         timeformat: "%y",
         tickSize: [1, "year"],
         autoscaleMargin: .10 // allow space left and right
     }
 };

 $(function() {
     $.plot($('#placeholder'), [[[1230768000*1000, 100], //[seconds * 1000 = milli, y value]
                                [1262304000*1000, 200],
                                [1293840000*1000, 300]]], options);
 });

Produces:

enter image description here

like image 59
Mark Avatar answered Jan 09 '23 02:01

Mark