Custom Tooltip on JQPlot Line Chart

Question

I am trying to get a custom tool tip for the line graph as I want the tool tip to describe the points in greater detail rather than the value of that point. (Image attached further explaining what I am on about)

I have given an attempt on how to do it.

Below is my code:

<script type="text/javascript">        $('#page3a').live('pageshow', function () {
        var s1 = [1, 2, 3, 4, 5];
        var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];

        var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {

            animate: true,
            seriesDefault: {
                showMarker: false,
                pointLabels: { show: true }
            },

            grid: {
                drawBorder: false,
                drawGridlines: false,
                background: '#eafaff',
                shadow: false
            },
            axesDefaults: {
                show: false,

                showTicks: false,
                showTickMarks: false

            },

            highlighter: {
                show: true,
                sizeAdjust: 8,
                tooltipLocation: 'n',
                tooltipAxes: 'piered',
               formatString:'%s',
                fadeTooltip: true,
                tooltipFadeSpeed: "fast",
                useAxesFormatters: false

            }

        });
    });</script>

Any help would be greatly appreciated. :)

score 7 · Answer 1 · answered Sep 05 '13 at 08:59

There is a configuration option that allows you to provide a custom callback method that is called to retrieve the tooltip contents:

highlighter: {
    tooltipContentEditor: function (str, seriesIndex, pointIndex) {
        return str + "<br/> additional data";
    },

    // other options just for completeness
    show: true,
    showTooltip: true,
    tooltipFade: true,
    sizeAdjust: 10,
    formatString: '%s',
    tooltipLocation: 'n',
    useAxesFormatters: false,
}

score 3 · Accepted Answer · answered Feb 15 '13 at 10:24

I have made slight edits to nick_w's answer. But I have the desired effect now, just pasting the code to help others in the future.

<script type="text/javascript">     

   $('#page3a').live('pageshow', function () {
          var s1 = [1, 2, 3, 4, 5];
          var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];

          var lineGraph1 = $.jqplot('lineGraph1', [s1, s2], {

              animate: true,
              seriesDefault: {
                  showMarker: false,
                  pointLabels: { show: true }
              },

              grid: {
                  drawBorder: false,
                  drawGridlines: false,
                  background: '#eafaff',
                  shadow: false
              },
              axesDefaults: {
                  show: false,

                  showTicks: false,
                  showTickMarks: false

              }
          });

          $('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) {

              var mouseX = ev.mouseX; //these are going to be how jquery knows where to put the div that will be our tooltip
              var mouseY = ev.mouseY;
              $('#chartpseudotooltip').html(s2[pointIndex] );
              var cssObj = {
                  'position': 'absolute',
                  'font-weight': 'bold',
                  'left': mouseX + 'px', //usually needs more offset here
                  'top': mouseY + 'px',
                  'background-color': 'white',
                  'z-index':'1'
              };
              $('#chartpseudotooltip').css(cssObj);

          });

          $('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) {
              $('#chartpseudotooltip').html('');
          });
      });</script>

To call this script the following was added to my content div.

<div id="lineGraph1" style="margin-top: 20px; margin-left: 160px; width: 350px; height: 350px">
        <div id="chartpseudotooltip"></div>

AnthonyLeGovic · Answer 3 · 2013-02-13T15:12:01.873

2

If you always want text "Message" before the point value, you just need to add it in formatString :

highlighter:{
  show: true,
  formatString: 'Message %s',
  //other stuff like sizeAdjust...
}

You can use your s2 variable too if it corresponds to ticks you want to display :

axes: {
   yaxis: {
       ticks: s2,
       tickRenderer: ...
   }
}

edited Feb 13 '13 at 15:12

answered Feb 13 '13 at 13:54

AnthonyLeGovic

2,335
1
13
22

Hi Anthony, Thank you for your message. I don't think I have explained the questioned properly. I am trying to create a line graph using jQplot, I am using s1 to generate the line graph, but I am trying to use s2 data to be displayed instead of s1 on the tooltip. For example if I hover over the first tooltip, it would give me more meaningful description of that point. That is why I tried to use s2 to do that. – Joz Feb 14 '13 at 10:33
I know with pieRenderer you can pass information such a ["Information about data", 10] then I can use the pieRenderer to to plot using the y value, but when I hover over, highlighter only displays the X value. I have tried to do this with the line graph, and it doesn't work. Is there a special renderer for linegraphs where I could do this? – Joz Feb 14 '13 at 10:34
First sorry for misunderstanding. You can display s2 as ticks of your xaxis (or yaxis) as I said thanks to axes: {xaxis(or yaxis): {ticks: s2}}. Then in your highlighter option you can define which axes to display in tooltip with `tooltipAxes: x`(or y if you display ticks on yaxis) option. [Jqplot highlighter documentation](http://www.jqplot.com/docs/files/plugins/jqplot-highlighter-js.html#$.jqplot.Highlighter.tooltipAxes) – AnthonyLeGovic Feb 14 '13 at 11:13
I have modified my code as you have stated, but the graph is no longer plotting. Below is the code, I am not sure if I implemented your solution right. – Joz Feb 14 '13 at 13:57

score 0 · Answer 4 · answered Feb 14 '13 at 13:58

<script type="text/javascript">        $('#page3a').live('pageshow', function () {
        var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]];
        var s2 = [["Message 1"], ["Message 2"], ["Message 3"], ["Message 4"], ["Message 5"]];

        var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {


            seriesDefault: {
                showMarker: false,
                pointLabels: { show: true }
            },

            grid: {
                drawBorder: false,
                drawGridlines: false,
                background: '#eafaff',
                shadow: false
            },
            axes: {

                xaxis: {ticks: s2}


            },

                highlighter: {
                show: true,
                sizeAdjust: 8,
                tooltipLocation: 'n',
                tooltipAxes: 'x',
                formatString: '%s',


            }

        });
    });</script>

axes: { xaxis: {renderer: $.jqplot.CategoryAxisRenderer, ticks: s2, tickRenderer: $.jqplot.CanvasAxisTickRenderer}}. Be sure of loading jqplot.canvasAxisTickRenderer.min.js. I'm not at home so I haven't tested it yet. — AnthonyLeGovic, Feb 14 '13 at 15:15
[Fiddle here](http://jsfiddle.net/AnthonyLeGovic/XLGFq/2/). The result is -I think- not exactly what you want as the tooltip are always displayed. What I think at the beginning (use s2 as ticks) isn't working (maybe it will?) as it is the index of the element which is display — AnthonyLeGovic, Feb 14 '13 at 15:40

score 0 · Answer 5 · edited May 23 '17 at 12:14

0

What about something like this (adapted from jqplot tooltip on bar chart)?

$('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) {

    var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
    var mouseY = ev.pageY;
    $('#chartpseudotooltip').html(s2[pointIndex] + ', (' + data[0] +', ' + data[1] + ')');
    var cssObj = {
        'position' : 'absolute',
        'font-weight' : 'bold',
        'left' : mouseX + 'px', //usually needs more offset here
        'top' : mouseY + 'px',
        'background-color': 'white'
    };
    $('#chartpseudotooltip').css(cssObj);

});

$('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) {
    $('#chartpseudotooltip').html('');
});

This will draw a small tooltip of the form Message X, (x_value, y_value) when the mouse passes over a data point. You can then style the tooltip further to suit.

In this example the tooltip was as follows:

 <div id="chartpseudotooltip"></div>

edited May 23 '17 at 12:14

Community

1
1

answered Feb 15 '13 at 06:22

nick_w

14,758
3
51
71

I have tried to implement your method but I cant get the tooltip to work. The following pastebin has the code which I tried to implement, is this what you meant? http://pastebin.com/HrLrSDB4 – Joz Feb 15 '13 at 09:21
You aren't actually binding the events - that code isn't being called. Try moving it to be the last thing you do in the `live` handler, just after the graph is created. – nick_w Feb 15 '13 at 09:38
Thank you for your solution, I have made slight edits to the code, but I have got the desired solution. – Joz Feb 15 '13 at 10:19

score 0 · Answer 6 · answered Feb 08 '14 at 10:59

You can get the answer here jsfiddle

var line1=[['10/17/2013',21],['1/30/2014',3],['11/1/2013',12],['10/2/2013',3],['11/5/2013',18]];

   var line2=[['10/17/2013',41],['1/30/2014',33],['11/1/2013',12],['10/2/2013',63],['11/5/2013',18]];

var plot1 = $.jqplot('linegraph1', [line1,line2],{
  seriesDefaults: {
    lineWidth: 1,
     markerOptions: {
        show: true,             // wether to show data point markers.
        style: 'filledCircle',  // circle, diamond, square, filledCircle.
        size: 2            // size (diameter, edge length, etc.) of the marker.
    }},
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,

          tickOptions:{
            formatString:'%b&nbsp;%#d',
        showGridline: false
          }
      },
      yaxis:{min:0,numberTicks:25,
        tickOptions:{

        showGridline: false
          }
      }
    },
    legend :
    {
        "show" : true,
        location: 'se'
    },
    series : [
        {
            label : "line1",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Blue: %s <br/>custom tooltip<span></div>"}

        },
        {
            label : "line2",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Orange: %s <br/>custom tooltip<span></div>"},

        }
    ],
   highlighter: {
      show: true,
       sizeAdjust: 25.5,
       tooltipLocation: 's'
    }
  });

Custom Tooltip on JQPlot Line Chart

6 Answers6