Search code examples
sparklines

Jquery sparklines: Possible to have different tooltips?


I'm using JQuery Sparklines (http://omnipotent.net/jquery.sparkline) to display a line graph where each tick in the graph corresponds to an hour interval of the current day. I've formatted the tooltip as such:

<span style=\"color: {{color}}\">&#9679;</span> {{offset:names}} - {{y}}{{suffix}}</span>

where offset:names corresponds to the hour of the day (0 = 00:00, 1 = 01:00) etc.

The graph updates with live data. The problem is that if a point is in the future, I don't want to display the {{y}} value in the tooltip - just the time of day. Is it possible to do this? If not is there another way to get the same effect?


Solution

  • Found it! Using tooltipFormatter, I did something like this:

    sparkOpts.CurrentTimeGroup = currentTimeGroup;
      sparkOpts.tooltipFormatter = function(sparklines, options, point)
      {
        if(point.x <= options.mergedOptions.CurrentTimeGroup)
          return "<div class=\"jqsfield\"><span style=\"color: " + point.color + "\">&#9679;</span>" + options.get("tooltipValueLookups").names[point.x] + " - " + point.y + options.get("tooltipSuffix") + "</div>";
        else
          return "<div class=\"jqsfield\"><span style=\"color: " + point.color + "\">&#9679;</span>" + options.get("tooltipValueLookups").names[point.x] + "</div>";
      };