Displaying information for tooltips with JSON data

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Sam G. on 2nd May 2013
Hi all, I'm fairly new to php and mysql and especially RGraph. So far, RGraph has been excellent and really great to use. I am a little stuck on the tooltips. I'm displaying a graph with json data for clicks and impressions (putting together an internal marketing report for my company) and I would like to display multiple lines that on tooltip hover they display the corresponding date, clicks and impressions. I'm not sure the best approach to go about this or if this is possible with RGraph.

Thanks so much for your assistance on this matter!
Posted by RGraph support on 2nd May 2013
Hi there,

This example uses AJAX and JSON to show a single line:

www.rgraph.net/docs/basic-ajax-json.html

To have it show multiple lines you can pass the Line chart constructor multiple datasets as one big array like this:


// These datasets could be retrieved via AJAX/JSON (eg the new RGraph.AJAX.getJSON()
// function (as yet unreleased))

dataset1 = [12,15,13,16,19,18,14,17];
dataset2 = [13,16,13,14,12,15,15,12];

myLine = new RGraph.Line('cvs', [dataset1, dataset2]);




Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Sam G. on 2nd May 2013
Hi Richard, thanks for the quick response, but I did an awful job explaining my issue.

I have been able to get multiple lines on a graph to display properly with the correct data from the database for each. My issue is the tooltip itself. I would like to display the total impressions, clicks and the date on the tooltip hover. So far I've only been able to display the corresponding date.

I've been asked by my designers to remove the x and y axes labels and to display all the information on the tooltip, therefore presenting me with this problem...

Any thoughts?
Posted by RGraph support on 2nd May 2013
Hi there,

The tooltips are simply strings of HTML so you just concatenate the data/labels together with HTML tags to format the data. For example:


tooltips = [];
tooltips[0] = '<b>' + labels[0] + </b><br />' + 'Data: ' + data[0];
tooltips[1] = '<b>' + labels[1] + </b><br />' + 'Data: ' + data[1];

myLine.Set('chart.tooltips, tooltips);



Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Sam G. on 2nd May 2013
Hi Richard,

That definitely makes a lot of sense now. I'm getting really close. Right now when I hover over the tooltip, it displays the entire array. What am I doing wrong? Below is my code I'm working with, perhaps you'd be able to help out...

var jsonArrayLastMonthSEMClicks = [<?php echo $printClicksLastMonthSEM ?>];
var arrayOfNumbersLastMonthSEMClicks = jsonArrayLastMonthSEMClicks.map(Number);
var dataLastMonthSEMClicks = [arrayOfNumbersLastMonthSEMClicks];
var jsonArrayLastMonthSEMImpressions = [<?php echo $printImpressionsLastMonthSEM ?>];
var arrayOfNumbersLastMonthSEMImpressions = jsonArrayLastMonthSEMImpressions.map(Number);
var dataLastMonthSEMImpressions = [arrayOfNumbersLastMonthSEMImpressions];
var tooltips = [];
tooltips = '<strong>Total Clicks: </strong>' + dataLastMonthSEMClicks + '<br /><strong>Total Impressions: </strong>' + dataLastMonthSEMImpressions;

I appreciate the help.
Posted by RGraph support on 2nd May 2013
Hi there,

These lines:

// Here you make the tooltips variable an array

var tooltips = [];

// But here you make it a string and also you concatenate the
// dataLastMonthSEMImpressions variable to it - which is an array

tooltips = '<strong>Total Clicks: </strong>' + dataLastMonthSEMClicks + '<br /><strong>Total Impressions: </strong>' + dataLastMonthSEMImpressions;


So try this:

tooltips[0] = '<strong>Total Clicks: </strong>' + dataLastMonthSEMClicks + '<br /><strong>Total Impressions: </strong>' + dataLastMonthSEMImpressions[0];


Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Sam G. on 2nd May 2013
No luck, the tooltip still displays the entire dataLastMonthSEMClicks array.

Without a screenshot it's looking like this:

Total Clicks: 5,13,13,17,9,3,5,9,6,7,16,13,6,8,13,9,18,13,15,6,12,11,14,8,5,8,1,1
Total Impressions: 395,632,574,583,487,233,269,508,475,498,585,451,226,250,581,598,695,596,586,260,347,693,738,659,608,522,253,293

Thank you for your patience and ideas!

- Sam
Posted by RGraph support on 2nd May 2013
Hi there,

It's coming out like that because the variable that you're using to build the tooltip is an array - so all of the values are being concatenated separated by commas.

So instead of using "dataLastMonthSEMClicks", you need to use something like dataLastMonthSEMClicks [0] (or whatever the correct index is).





Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer

Add a reply




« Back to message list