Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show value within the bar - jQuery plot horizontal stacked bar chart

I would like to show the value within the bar on the flot bar chart (horizontal and stacked), something like this :

|-------------------------------------------
|                 5                 |   1  |
|-------------------------------------------
|
|------------------------------------
|           3         |       2     |
|------------------------------------

I saw this post : Show value within bar on flot bar chart The values appears only inside the first stacked bar. The second value is the current total, not the corresponding value of the current bar, eg :

|-------------------------------------------
|                 5  6               |     |
|-------------------------------------------
|
|------------------------------------
|           3 5        |            |
|------------------------------------

Do someone know a good plugin for this functionality? Also, I would like to increase the font size inside the bar.

Thank you!


Here the code :

<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.pie.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.barnumbers.js"></script>

var data = [
        {label: 'Label 1', color:"#80FF80", data: [[1,5], [2,3]]},
        {label: 'Label 2', color:"#FF8080", data: [[1,1], [2,2]]}
];

//reverse data for horizontal
for (series in data){
    var s = data[series];
    for (i=0;i<s.data.length;i++){
            var tmp = s.data[i][0];
        s.data[i][0] = s.data[i][1];
        s.data[i][1] = tmp;        
    }
}

var options = {
    series: {
        stack: 0,
        lines: {show: false, steps: false },
        bars: {
            show: true, 
            barWidth: 0.5, 
            align: 'center', 
            horizontal: true, 
            showNumbers: true
        },
    },
    yaxis: {ticks: [[1,'Category 1'], [2,'Category 2']]},
};

$.plot($("#flot-example-2"), data, options);
like image 283
Shad Gagnon Avatar asked Oct 11 '12 15:10

Shad Gagnon


2 Answers

I've updated flot-barnumbers to support stacked bars, see the updated examples. If you need any other features, shoot me an email or open an issue, I only saw this question by chance.

like image 120
dinosaurwaltz Avatar answered Mar 03 '23 10:03

dinosaurwaltz


It seems that flot-barnumbers doesn't support stacked bar chart. That's why value labeled improperly. I'd recommend to use jqBarGraph, which is jQuery plugin to implement stacked bar charts.

http://workshop.rs/jqbargraph/

I hope that it helps.

like image 31
Won Avatar answered Mar 03 '23 12:03

Won