How to plot time values in Flot Graph

问题:

I am using Flot Graph Api to plot graphs, I want to plot time values in bar charts.

My table look like some thing similar to this

My X-Axis should be list of Reasons and Y-Axis should be time variables. My Graph should be some thing like this.

but i get something like this, because of the Json object is packed wrongly.

How to plot graph for time values in

My plot JS code is

    <script language="javascript" type="text/javascript">  
$(document).ready(function(){
$.getJSON('ReasonByTime.txt', function(json) {
   //succes - data loaded, now use plot:
       var plotarea = $("#placeholder");
       var dataBar=json.data;
        $.plot(plotarea , [
            {
                data: dataBar,
                bars: { show: true},
                legend: {show: true},
                yaxis: {
                    mode: 'time',
                    timeformat: "%y/%m/%d",
                        min: ( new Date('2012/01/01') ).getTime(),
                        max: ( new Date('2020/01/01') ).getTime(), 
                        minTickSize: [1, 'hour']
                }
            }          
        ]
    );
});

});

and my current Json object is like this.

  {"data":[[0,5202],[0,19620],[0,82920],[0,240],[0,75720],[0,3060],[0,72840]],"label":"Tea break"}

Since i'm new to flot i'm struck up with this work, i did some research but i can't able to solve my problem. Can someone help me out.

回答1:

The problem isn't with the JSON, but with your data itself. Your x-axis values are all zero, so Flot is correctly plotting all the bars on top of one another.

回答2:

Thanks to DNS, the problem is the all my x-axis values are zero, so i changed my JSON in the following format,

  [{"data":[[0,5202]],"label":"Over Time"},{"data":[[1,19620]],"label":"Shift Start"},{"data":[[2,82920]],"label":"Maintenance break"},{"data":[[3,240]],"label":"Lunch break"},{"data":[[4,75720]],"label":"BreakDown"},{"data":[[5,3060]],"label":"Break"},{"data":[[6,72840]],"label":"Tea break"},{"data":[[6,79260]],"label":"Power Failure"}]

Now i get my graph like this,