Display (Show) value in Bar using jQuery Flot stacked bar Chart

Last Reply 23 days ago By Rockstar8

Posted 24 days ago

Hi,

Below is code for stacked flot chart

How to display value in the bar in flot stacked bar chart

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if IE]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]--> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.stack.js"></script>
  <title>Flot stacked bar example</title>
</head>
<body>
  <div id="placeholder" style="width:550px;height:200px;"></div>
</body>
</html>

 

$(function () {
    var css_id = "#placeholder";
    var data = [
        {label: 'foo', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
        {label: 'bar', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
        {label: 'baz', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
    ];
    var options = {
        series: {stack: 0,
                 lines: {show: false, steps: false },
                 bars: {show: true, barWidth: 0.9, align: 'center',},},
        xaxis: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five']]},
    };

    $.plot($(css_id), data, options);
});

 

 

Posted 24 days ago Modified on 23 days ago

Hi Rockstar8,

Check the example.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script>
<script src="Scripts/jquery.flot.barnumbers.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var css_id = "#placeholder";
        var data = [{ label: 'foo', data: [[1, 300], [2, 300], [3, 300], [4, 300], [5, 300]], labels: { position: "middle" }, color: 'orange' },
                    { label: 'bar', data: [[1, 800], [2, 600], [3, 400], [4, 200], [5, 0]], labels: { position: "middle" }, color: 'yellow' },
                    { label: 'baz', data: [[1, 100], [2, 200], [3, 300], [4, 400], [5, 500]], labels: { position: "middle" }, color: 'green' }
                    ];

        var options = {
            series: {
                stack: 0,
                lines: { show: false, steps: false },
                bars: {
                    // horizontal: true,
                    show: true,
                    barWidth: 0.9,
                    align: 'left',
                    numbers: { show: true }
                }
            },
            xaxis: { ticks: [[1, 'One'], [2, 'Two'], [3, 'Three'], [4, 'Four'], [5, 'Five']] }
        };

        $.plot($(css_id), data, options);
    });
</script>
<div id="placeholder" style="width: 400px; height: 300px;">
</div>

jquery.flot.barnumbers.js

(function ($) {
    var options = {
        bars: {
            numbers: {
            }
        }
    };

    function processOptions(plot, options) {
        var bw = options.series.bars.barWidth;
        var numbers = options.series.bars.numbers;
        var horizontal = options.series.bars.horizontal;
        if (horizontal) {
            numbers.xAlign = numbers.xAlign || function (x) { return x / 2; };
            numbers.yAlign = numbers.yAlign || function (y) { return y + (bw / 2); };
            numbers.horizontalShift = 0;
        } else {
            numbers.xAlign = numbers.xAlign || function (x) { return x + (bw / 2); };
            numbers.yAlign = numbers.yAlign || function (y) { return y / 2; };
            numbers.horizontalShift = 1;
        }
    }

    function drawSeries(plot, ctx, series) {
        if (series.bars.numbers.show || series.bars.showNumbers) {
            var ps = series.datapoints.pointsize;
            var points = series.datapoints.points;
            var ctx = plot.getCanvas().getContext('2d');
            var offset = plot.getPlotOffset();
            ctx.textBaseline = "top";
            ctx.textAlign = "center";
            alignOffset = series.bars.align === "left" ? series.bars.barWidth / 2 : 0;
            xAlign = series.bars.numbers.xAlign;
            yAlign = series.bars.numbers.yAlign;
            var shiftX = typeof xAlign == "number" ? function (x) { return x; } : xAlign;
            var shiftY = typeof yAlign == "number" ? function (y) { return y; } : yAlign;

            axes = {
                0: 'x',
                1: 'y'
            }
            hs = series.bars.numbers.horizontalShift;
            for (var i = 0; i < points.length; i += ps) {
                barNumber = i + series.bars.numbers.horizontalShift
                var point = {
                    'x': shiftX(points[i]),
                    'y': shiftY(points[i + 1])
                };
                if (series.stack != null) {
                    point[axes[hs]] = (points[barNumber] - series.data[i / 3][hs] / 2);
                    text = series.data[i / 3][hs];
                } else {
                    text = points[barNumber];
                }
                var c = plot.p2c(point);
                ctx.fillText(text.toString(10), c.left + offset.left, c.top + offset.top)
            }
        }
    }

    function init(plot) {
        plot.hooks.processOptions.push(processOptions);
        plot.hooks.drawSeries.push(drawSeries);
    }

    $.plot.plugins.push({
        init: init,
        options: options,
        name: 'barnumbers',
        version: '0.4'
    });
})(jQuery);

Screenshot

Refer below links for more details.

https://stackoverflow.com/questions/4892160/show-value-within-bar-on-flot-bar-chart


Posted 23 days ago
dharmendr says:
https://stackoverflow.com/questions/4892160/show-value-within-bar-on-flot-bar-chart

 https://the.chuntering.dev/flot-barnumbers/ - working