Question

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).

Answer 1

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>