Home/ Questions/Q 9314987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T02:16:25+00:00

Hi I am trying to put tooltip on flot chart, below is my code

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0