My Bar chart with tooltips isn't working

« 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 Lorenzo on 9th June 2014
I wrote a simple php file to create a bar chart with data coming from a CSV file. It runs well, thanks your very fine script . Anyway, I'm not able to add to the chart a tooltips event to see the single numeric data when the mouse pass over the single column of the chart . This is the code I wrote (after recalling all the needed scripts):

window.onload = function ()
         * This fetchs the CSV file and shows the Bar chart
         var csv = new RGraph.CSV(/sample.csv', function (csv)
             // Get the first column which becomes the labels
             var labels = csv.getCol(0);
             // Get the number of rows in the CSV
             var numrows = csv.numrows;

             // Get the number of cols in the CSV
             var numcols = csv.numcols;
             // Get the second column which becomes the data
             var data = csv.getCol(1);
             // Create the chart
             var bar = new RGraph.Bar('cvs', data)
                 .set('labels', labels)
   .set('tooltips.event', 'onmousemove')
   .set('tooltips', data)
                 .set('title', 'Sample chart')
                 .set('colors', ['red'])
                 .set('strokestyle', 'white')
                 .set('noxaxis', true)
                 .set('shadow', true)
   .set('shadow.offsetx', 0)
                 .set('shadow.offsety', 0)
                 .set('shadow.blur', 10)
                 .set('shadow.color', '#aaa')
   .set('gutter.bottom', 20)
                 .set('gutter.left', 40)
                 .set('gutter.right', 15)
   .set('background.grid.autofit.numhlines', 10)
                 .set('background.grid.autofit.numvlines', 30)
   .fadeIn({'duration': 250});

I think the problem is in this line of the code:
.set('tooltips', data)

In fact, it seems the data can not be read. If I try to change in this line the word data with the expression "data" (with the marks), then the tooltips event works , but, obviously, when I move the mouse over the chart I see the same word "data", not the real numeric data.

Can someone help me please ? Thanks.


Posted by Richard on 9th June 2014
Try adding:


As the first line in your callback - it will show you the data (if any) and, importantly, the types (ie strings or numbers).

Oh and if you're trying to request the sample.csv file from the domain it won't work - AJAX doesn't work cross domains.

Posted by Lorenzo on 9th June 2014
Maybe I didn't understand.
Everything works but the tooltips event. The script do create correctly the bar chart reading the data (numbers) from a CSV file. The sample.csv is only for example, I use a CSV file located on my server abd created with a PHP file with "fputcsv" function. It runs well, as the script get the data from it and do create the chart. I'm not able to let the script put on the chart the numeric data at the top of the columns when I move the mouse over the columns, like this:

If in the line:

.set('tooltips', data)

I change the word "data" (without the marks) with a sequence [1],[2],[3],[4] etc, then the tooltips event works. I would like the script get the real values from the CSV file (through the var data) and put them on the chart when I move the mouse.


Posted by Richard on 9th June 2014
Try using a static array first:

obj.set('tooltips', ['A', 'B', 'C', 'D']);

And check that you've included the tooltips file (RGraph.common.tooltips.js).


Add a reply

« Back to message list