Using tooltips in your charts

  Read comments...

Summary
This page tells you how you can use tooltips in your charts. They can show descriptions about data or can even contain new charts.

[No canvas support]
Tooltip effect:

 

Introduction to tooltips

Tooltips are a very effective and straight forward way to extend your charts and add more information to them, without overloading the user.

 

What can they hold?

At the base level, tooltips are DIVs, so they can hold a multitude of HTML - images, videos etc. See below for information on showing charts in tooltips.

 

How can I specify them?

You can specify them by including the tooltips code and then using the tooltips property. For example:

  1. Include the RGraph libraries.
    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.line.js"></script>
    
  2. Define your chart and set the tooltips property.
    <script>
        window.onload = (function ()
        {
            var line = new RGraph.Line({
                id: 'cvs',
                data: [64,34,26,35,51,24],
                options: {
                    hmargin: 10,
                    linewidth: 2,
                    shadowOffsetx: 0,
                    shadowOffsety: 0,
                    shadowColor: 'green',
                    shadowBlur: 25,
                    color: ['green'],
                    tickmarks: 'endcircle',
                    labels: ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev'],
                    tooltips: [
                        '<b>Winner!</b><br />John',
                        'Fred',
                        'Jane',
                        'Lou',
                        'Pete',
                        'Kev'
                    ]
                }
            }).draw();
        };
    </script>
    

 

What can I specify?

The tooltips that you specify are usually strings (which can contain HTML). They can however also be functions which are called when they're about to be displayed. The function should return the text that is used as the tooltip. You have the option to either specify one function per data point, or just one function for all of the tooltips. You can mix functions and strings if you wish. These functions are passed the numerical, zero-indexed tooltip index and the return value is used as the tooltip text. So to summarise:

 

Can I show charts in tooltips?

[No canvas support]

You can, and with the custom event support that RGraph has, it's reasonably easy. Simply attach your function that creates the chart to the ontooltip event. This allows the tooltip HTML to be created and added to the page so that the code that creates the chart can run. The sequence is:

  1. Specify the HTML for the tooltip as normal (including the <canvas> tag).
  2. Use the ontooltip RGraph event so that a function is called when a tooltip is shown.
  3. This function should subsequently create the chart.

The tooltip DIV is to be found in the RGraph registry - RGraph.Registry.get('chart.tooltip'). And if you want it the numerical zero indexed count of the tooltip is to be found in the __index__ property: RGraph.Registry.get('chart.tooltip').__index__

<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.tooltips.js" ></script>
<script src="RGraph.common.dynamic.js" ></script>
<script src="RGraph.bar.js" ></script>
<script src="RGraph.line.js" ></script>

<style>
    .RGraph_tooltip {
        background-color: white ! important;
    }
</style>

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

<script>
    window.onload = (function ()
    {
        var labels = ['Gary','Pete','Lou','Ned','Kev','Fred'];

        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4.5,28,13,26,35,36],
            options: {
                tooltips: function (idx)
                {
                    return labels[idx] +
                           's stats<br/><canvas id="__tooltip_canvas__" width="400" height="150">='
                           '[No canvas support]</canvas>';
                    },
                hmargin: 10,
                tickmarks: 'endcircle',
                colors: ['blue'],
                ymax: 100,
                labels: labels
            }
        }).draw();
        
        line.ontooltip = CreateTooltipGraph;
    })
      

    
    /**
    * This is the function that is called by the ontooltip event to create the tooltip charts
    * 
    * @param obj object   The chart object
    */
    function CreateTooltipGraph(obj)
    {
        RGraph.text2.domNodeCache['__tooltip_canvas__'] = [];

        // This data could be dynamic
        var line  = new RGraph.Line({
            id: '__tooltip_canvas__',
            data: [5,8,7,6,9,5,4,6,3,5,4,4],
            options: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                hmargin: 5,
                tickmarks: 'endcircle',
                backgroundGridAutofit: true
            }
        }).draw();
    }
</script>

If you want to see more source code, simply view the source of this page and look at the code that creates the bar chart. There's also a basic stripped-down example here.


 

Can I customise the appearance of tooltips?

Yes. You can either use the default CSS class RGraph_tooltip, or you can specify a specific CSS class that a charts tooltips should use with the property tooltipsCssClass. The two charts on this page have different looking tooltips by using this method - the bar chart overrides the CSS class name and sets it to bar_chart_tooltips_css. For example:

obj.set({
    tooltipsCssClass: 'bar_chart_tooltips_css'
});
<style>
    .bar_chart_tooltips_css {
        background-color: white ! important;
        border: 2px solid black ! important;
        padding: 3px;
    }
</style>

Customising the default appearance of tooltips in JavaScript

If you want to set the default style that's used for tooltips you do do so in JavaScript. All of the styles are applied to the tooltip by copying them from the RGraph.tooltips.style object. Remember to use the JavaScript names of the CSS properties (capitals instead of hyphens). You only need to set this once (eg after your call to draw() ) and then these defaults are used for every tooltip after that.

RGraph.tooltips.style.fontFamily      = 'Arial';
RGraph.tooltips.style.fontSize        = '10pt';
RGraph.tooltips.style.fontWeight      = 'normal';
RGraph.tooltips.style.textAlign       = 'center';
RGraph.tooltips.style.backgroundColor = 'rgb(255,255,239)';
RGraph.tooltips.style.color           = 'black';
RGraph.tooltips.style.borderRadius    = '5px';
RGraph.tooltips.style.boxShadow       = 'rgba(96,96,96,0.5) 0 0 5px';

These defaults are used for ALL tooltips - if you want to customise just one charts tooltips (and you have multiple charts with tooltips on the page) then use the CSS class method mentioned above.

 

What tooltip effects are available?

The default effect is for the tooltip to fade in. From May 2012 onwards tooltips have changed their appearance and the number of effects has been reduced to just fade and none.

 

Can I override the tooltip function?

You can by stipulating tooltips.override. This should be a function object that handles everything with regard to showing the tooltip. Highlighting the chart is still done for you - the override function is only concerned with showing the tooltip. The override function is passed these arguments:

Note: Although "id:xxx" strings are not expanded for you, you can easily do this yourself by using the RGraph.getTooltipText('id:xxx') function.

<script>
    function tooltip_override (obj, text, x, y, idx)
    {
        alert('In tooltip override function...');
    }
    myObj.set({
        tooltipsOverride: tooltip_override
    });
</script>
Share RGraph
X

Comments