How to set x axis value as tooltip in flot charts textual data

I tried with following code in Flot char to draw a chart. Chart is plotting as expected but not tooltip

$(function() {

        var data = [["Aug 06",2],["Aug 07",1],["Aug 08",1.5],["Aug 09",0],["Aug 10",0],["Aug 11",0],["Aug 12",0]];
    var options = {

      series: {
        lines: { show: true,
          lineWidth: 1,
          fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
        },
        points: { show: true, 
          lineWidth: 2 
        },
        shadowSize: 0
      },
      grid: { hoverable: true, 
        clickable: true, 
        tickColor: "#eeeeee",
        borderWidth: 0,
        hoverable : true,
        clickable : true
      },
      tooltip : true,
      tooltipOpts : {
        content : "Your sales for <b>%x</b> was <span>$%y</span>",
        defaultTheme : false
      },
      xaxis: {
            mode: "categories",
            tickLength: 0 
        },
        yaxis: {
                  min: 0
                } ,
      selection: {
        mode: "x"
      }
    };
        $.plot("#section-chart", [ data ], options);

        // Add the Flot version string to the footer

        $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

When hover the values, tooltip shows "Your sales for %x was $2" instead it should shows Your sales for Aug 06 was $2 Here how should i pass x axis values as tooltip in flot chart? What i have done wrong on this. kindly advice ?

Answers:

Answer

The easiest way to solve your problem is to replace the content string with a callback:

tooltipOpts : {
        content : getTooltip,
        defaultTheme : false
      },

I defined getTooltip to get your desired output:

function getTooltip(label, x, y) {
    return "Your sales for " + x + " was $" + y; 
}

It works, as you can see in the updated jsFiddle, but you may want to consider the advice of captain, in comments, and see what's best in your case.

Answer

The solution is using tooltipOpts -> content method with a callback function to properly return dynamic data to the label.

I figured out that passing a 4th argument to the callback function of the "tooltipOpts" actually gives you the whole data object from which the chart/graph is constructed from. From here, you can easily extract the X axis labels, using the second argument of this same function as the index of the label to extract.

EXAMPLE:

Data object I'm passing to the plot function:

[
    {
        data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
        points: { show: true, radius: 3},
        splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
    }
],
{
    colors: ['#0cc2aa'],
    series: { shadowSize: 3 },
    xaxis: {
        show: true,
        font: { color: '#ccc' },
        position: 'bottom',
        ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
    },
    yaxis:{ show: true, font: { color: '#ccc' }, min:1},
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
    tooltip: true,
    tooltipOpts: {
        content: function(data, x, y, dataObject) {
            var XdataIndex = dataObject.dataIndex;
            var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
            return y + ' impressions for all of your posts on ' + XdataLabel;
        },
        defaultTheme: false,
        shifts: { x: 0, y: -40 }
    }
}

Chart rendered from the above data object:

enter image description here

As you can see on the image preview, the logic used to render the label's content dynamically form the actual data is this:

tooltipOpts: {
    content: function(data, x, y, dataObject) {
        var XdataIndex = dataObject.dataIndex;
        var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
        return y + ' impressions for all of your posts on ' + XdataLabel;
    },
    defaultTheme: false,
    shifts: { x: 0, y: -40 }
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.