CODEWITHSUNDEEP
jqueryflot
Chi Chieh Peng
Chi Chieh Peng

Reputation: 23

How to Add the Stack Effect to bar chart in jQuery flot

I have a problem with jquery flot

at first I got the following chart http://design2u.me/blog/example/bar/index.html

The code follows: 

<script type="text/javascript">
$(function () {
    // generate a dataset
        var d1 = []; d1.push([3,100]);
        var d2 = []; d2.push([3,66]);
        var d3 = []; d3.push([3,33]);

        //announce a dataset
        var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];      
        var placeholder = $("#placeholder");

        // plot it
        var plot = $.plot(placeholder, data, {
                stack:true,
                bars: { show: true, barWidth: 4, fill: 0.5 },
                xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10  },
                yaxis: { min: 0, max: 120 },
        });
});
</script>

However, I need the different part to be stacked and I already add the property

stack:true,

By trying and erroring, I found that if I change the plot function as following : 

var plot = $.plot(placeholder, data, {
            series: {
                stack:true,
                bars: { show: true, barWidth: 4, fill: 0.5 },
                xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10  },
                yaxis: { min: 0, max: 120 },
            }
        });

then I got the following result : http://design2u.me/blog/example/bar/index2.html

the bars has stacked successfully, but it become too wide ...

I hope the bars only in the center, How can I fix this problem ? Thanks a lot !

Upvotes: 2

Views: 2187

Answers (2)

Chi Chieh Peng
Chi Chieh Peng

Reputation: 23

I found a simple way to solve my problem.

By fixing the following code :

//announce a dataset
        var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];

into

//announce a dataset
        var data = [{ stack: true, data: d1, color: "#f21d1d" },{ stack: true, data: d2, color: "#1d61f2" },{ stack: true, data: d3, color: "#5bc91a" }];

and the problem solved. Resuling in this working wxample : http://jsfiddle.net/divaka/q8srK/

Thanks for each replying.

Upvotes: 0

Ryley
Ryley

Reputation: 21226

Well, I think it's probably a bug in flot. If you have more than one data point per series, it would work better I think. As it is, the only way I could figure out how to do this is to add a "dummy" line to force the x-axis to be the correct width and leave the bars to the same width also:

First, add a new data set to your data:

{
data: [[0, 0], [10, 0]],
bars: {
    show: false
},
lines: {
    show: false
}}

The [0,0] is your x-axis min and the [10,0] is your y-axis min.

Then I slightly changed your plot options, so your $.plot call looked like this:

var plot = $.plot(placeholder, data, {
    series: {
        stack:true,
        bars: {
            show: true,
            barWidth: 1,
            fill: 0.5,
            align: 'center'
        }
    }
});​

Resulting in this working example: http://jsfiddle.net/ryleyb/92v2h/

Upvotes: 1

Related Questions