Question

I am using Flot to plot graphs for my client side php’s. In one graph i need Percentage Stack Graph, and i have found out that there is a plugin in Flot called Percentage Stack Plugin.

I want my Graph to be something like this.

But when i implement the plugin i get something like this.

I tried their example and its working fine. I think this problem is with the JSON data i pass.

My JSON looks like this.

  [{"data":[[-64.483189655172,74.483189655172]],"label":"machine_52"},{"data":[[-142.91077586207,152.91077586207]],"label":"machine_23"},{"data":[[-220.57456896552,230.57456896552]],"label":"machine_90"},{"data":[[-304.05043103448,314.05043103448]],"label":"machine_48"},{"data":[[-388.56163793103,398.56163793103]],"label":"machine_98"}]

X values are Uptime percentage and Y values DownTime Percentage. is those values should be less than 100 for ploting the graph.

My JS code looks like this.

    <script language="javascript" type="text/javascript">  

$(document).ready(function(){
$.getJSON('barLine.txt', function(json) {

    $.plot($("#placeholder"),json, { series: {
        stackpercent: true,
        bars: { show: true, barWidth: 0.6, fillColor: {colors:[{opacity: 1},{opacity: 1}]}, align: "center" }
    },
    xaxis: {max:100},
    yaxis:{tickSize : 1}});
});
});

</script>     

How can fix this bug

Answer 1

OK… How does the stackpercent plugin change your data? What it does is add up the y values of everything with the same x value, and then create percentages based off of that.

For your case, what you want to do is have two series, one with all the uptime values, one with all the downtime values. You line them up per machine, so that x = 0 in both series is the data for one of your machines.

Your data will look like this:

[
     {"label":"Down Time ","data":[[0,64],[1, 142],[2,220],[3,304],[4,388]],"color":"#B41722"},
     {"label":"Running Time","data":[[0, 74], [1, 152],[2,230],[3,314],[4,398]],"color":"#6A9A3C"} 
]

So you can see I’ve taken your machine_52 data and split it into values in two series, the -64.xxxxx value is now [0,64] and it’s corresponding 74.xxx is in the 2nd series as [0,74].

Then to connect that to the particular machine, you specify the xaxis.ticks option like this:

ticks: [[0,'Machine 52'],[1,'Machine 23'],[2,'Machine 90'],[3,'Machine 48'],[4,'Machine 98']]

The result looks like this: http://jsfiddle.net/ryleyb/uSVvu/