CODEWITHSUNDEEP
jqueryflot
agarwal_achhnera
agarwal_achhnera

Reputation: 2456

how to put label tooltip on Flot Chart

Hi I am trying to put tooltip on flot chart, below is my code can any body tell me where is the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
 <script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p id="choices">Show:</p>
 <p class="graphControls">
    <input type="button" value="stack">
    <input type="button" value="Bars">
    <input type="button" value="Lines">
    </p>
    <p><label><input id="enableTooltip" type="checkbox">Enable tooltip</label></p>
<script language="javascript"  type="text/javascript" >
var urlDataPart = "3 10 0 1 2 3 4 5 6 7 8 9 " +
                   "'Trans1' 20 23 20 40 12 56 10 70 20 30 " +
                   "'Trans2' 15 12 25 23 56 34 45 23 12 56 " +
                   "'Trans3' 12 45 23 12 34 89 12 70 34 30 ";

$(function () {
    var datasets=[];
    var data=urlDataPart.split(" ");
    var seriesNum = parseInt(data[0]);
    var pointNum = parseInt(data[1]);
    var count = 2;
    var intervals = [];
    for (var i = 0; i < pointNum; i++) {
        intervals[i] = data[count];
        count++;
    }

    for (var i = 0; i < seriesNum; i++) {
        var d1 = [];
        var label_str=data[count];


        count++;
        for (var j = 0; j < pointNum; j++) {
            if (j == 0) {
                d1.push([]);
            }
            d1.push([intervals[j], data[count]]);
            count++;
        }
        datasets[i] =  {label:label_str,data:d1};
    }

    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });

    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append('<br/><input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);
    var stack = true, Area=true,StackedBar = false, LineGraph = true,points=true;

    $(".graphControls input").click(function (e) {
             var line;
             e.preventDefault();
             stack=true;
             Area=true;
             StackedBar=false;
             LineGraph=true;
             points=true;
             StackedBar = $(this).val().indexOf("Bars") != -1;
             Area = $(this).val().indexOf("stack") != -1;
             if(StackedBar){
                points=false;
                LineGraph=false;
             }
             if(!Area && !StackedBar){
                stack=null;
             }
            plotAccordingToChoices();
    });


    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
    });

    function plotAccordingToChoices() {
        var data = [];
        var data1=[[0,0]];
        var flag=false;
        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
                flag=true;
        });

        if(!flag){
             $.plot($("#placeholder"), data1, {
                series:{
                    stack:true,
                    lines:{
                        show:true,
                        fill:true,
                        fillColor: { colors: [  { opacity: 0.7}, {opacity: 10 } ] }
                    },
                    points:{
                        show:true
                    },
                    grid: { hoverable: true, clickable: true },
                    yaxis: { min: 0 },
                    xaxis: { tickDecimals: 0 }
                }
            });
        }

        if (data.length > 0 && flag){
            $.plot($("#placeholder"), data, {
                series:{
                    stack:stack,
                    lines:{
                            show:LineGraph,
                            fill:Area,
                            fillColor: { colors: [  { opacity: 0.7}, {opacity: 10 } ] }
                    },
                    bars: { show: StackedBar, barWidth: .10 },
                    points:{
                        show:points
                    },
                    grid: { hoverable: true},
                    yaxis: { min: 0 },
                    xaxis: { tickDecimals: 0 }
                }
            });
         }
    }

    plotAccordingToChoices();
 }   


     );

    </script>

</body>
</html>

Upvotes: 0

Views: 1368

Answers (1)

Ryley
Ryley

Reputation: 21226

You've made a somewhat subtle error in your plot options. The grid, yaxis, and xaxis options are all nested inside of your series options. They should be top-level options like this:

$.plot($("#placeholder"), data1, {
        series: {
            stack: true,
            lines: {
                show: true,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.7
                    }, {
                        opacity: 10
                    }]
                }
            },
            points: {
                show: true
            }
        },  //added this to close the series options
        grid: {
            hoverable: true,
            clickable: true
        },
        yaxis: {
            min: 0
        },
        xaxis: {
            tickDecimals: 0
        }

    });//removed an extra bracket here

The key thing this does is enable the hoverable business, which was all you were missing.

In the future, please reduce your code sample to just the relevant parts. If you're seeing the error with just the basic plot call and placeholder div, just post that code. We don't need all your bits with creating the dataset and toggling (unless that is causing the error). You will often find that by eliminating complexity in other parts of your code, you'll discover the error you were having (perhaps not in this case, but still!).

Upvotes: 2

Related Questions