Stack Flot chart tooltip with array content

Question

Below is my js code for flot stack chart,

I want to display label of d1[0] in tooltip in its stack and lable of d2[0] on that part of stack

Currently its not showing any tool tip.

Data Example :

d1 = [["Name1",10],["Name2",5]];
d2 = [["Name1",8],["Name2",10]];

Hence tooltip should show Name1 (10) and Name1 (8) in respective stack and Name2 (5) and Name2 (10) in its respactive stack.

function getTooltip2(label, x, y) {
    return "" + x + "( " + y +" )"; 
}

var d1 = [];
var d2 = [];
<?php 
for($i=0;$i<count($tchart)-1;$i++){
    echo "d1.push(['".$tchart[$i][0]."', ".$tchart[$i][1]."]);";
    echo "d2.push(['".$tchart[$i][0]."', ".$tchart[$i][2]."]);";
}
?>

var d4 = { label: "Within Benchmark", data: d1 };
var d5 = { label: "Out Of Benchmark", data: d2 };
var data =[d4,d5];

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

function plotWithOptions() {
    $.plot("#placeholder5", data, {

        valueLabels: {
            show: true
        },
        series: {
            stack: stack,
            lines: {
                show: lines,
                fill: true,
                steps: steps
            },
            bars: {
                show: bars,
                barWidth: 0.6,
                align: "center"
            }
        },
        xaxis: {
           mode: 'categories',
           tickLength: 0
        },
        tooltip: true,
        tooltipOpts: {
            content: getTooltip2,
            defaultTheme: false
        },
        colors: [ "#51a351", "#da4f49"]
    });
}
plotWithOptions();

have you seen this? http://stackoverflow.com/a/18190027/839456 — anurupr, Feb 10 '14 at 12:28
Yes, its working fine, thanks. But my requirement is like i want to show different series then x and y in tool tip. is it possible? — TechnoPulseLabs, Feb 10 '14 at 12:44
Yes, correct, but anyways currently I have put Jan in X axis it self and tool tip is also showing correct value. But Now I am facing issue in flot stack chart tool tip with same function. There are 2 series. — TechnoPulseLabs, Feb 10 '14 at 12:59

score 0 · Answer 1 · answered Feb 18 '14 at 06:09

Ok, I found it. Its same as we do it in other bar chart.

Below is the code I have used,

$.plot("#placeholder6", [d8,d9], {
    grid: {
            hoverable: true 
    },
        valueLabels: {
            show: true
        },
        series: {
            stack: stack,
            lines: {
                show: lines,
                fill: true,
                steps: steps
            },
            bars: {
                show: bars,
                barWidth: 0.6,
                align: "center"
            }
        },
        xaxis: {
           //show:false,
           mode: 'categories',
           tickLength: 0
        },
        yaxis: {
           //show:false,
           //mode: 'categories',
           //tickLength: 0
           tickDecimals:0
        },
        tooltip: true,
        tooltipOpts: {
            content: "%x (%y)",
            defaultTheme: false
        },
        colors: [ "#faa732", "#da4f49"]
    });

Stack Flot chart tooltip with array content

1 Answers1