CODEWITHSUNDEEP
jquerychartsflot
ryanzec
ryanzec

Reputation: 28040

Flot Stacked Bar

flot screenshot

So I have the above flot stacked bar using flot. Right now I also have a hover effect where when over any bar within that the main bar, it shows the number for that part. What I want to show is the percentage for part that they are over in reference to the current bar instead of the number however I don't see anywhere how I can get to total of the bar (ie, looking for the number that is around 4200 based on this bar).

Upvotes: 1

Views: 2063

Answers (1)

Richard
Richard

Reputation: 22016

In order to get the total you will need to look at the data and find the elements in the series that correspond to the clicked item, then sum their values.

       <div id="placeholder" style="width:600px;height:300px;"></div>
    <div id="clickdata" ></div>


<script id="source">
$(function () {
    var d1 = [];
    for (var i = 0; i <= 10; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);

    var d2 = [];
    for (var i = 0; i <= 10; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);

    var d3 = [];
    for (var i = 0; i <= 10; i += 1)
        d3.push([i, parseInt(Math.random() * 30)]);

    var stack = 0, bars = true, lines = false, steps = false;

    function plotWithOptions() {
       return $.plot($("#placeholder"), [ d1, d2, d3 ], {
            grid: { clickable: true },
            series: {
                stack: stack,
                lines: { show: lines, fill: true, steps: steps },
                bars: { show: bars, barWidth: 0.6, hoverable: true, clickable: true }
            }
        });

    }

    var plot = plotWithOptions();

    function getTotalForIndex(index) {
        var total = parseFloat(d1[index][1]) + parseFloat(d2[index][1]) + parseFloat(d3[index][1]);
        return total;
    }

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ". which has total value "+ getTotalForIndex(item.dataIndex));
            plot.highlight(item.series, item.datapoint);
        }
    });
});
</script>

Upvotes: 5

Related Questions