Charts not working on IE 11

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 Parth on 31st July 2014
I am using RGraph version: 2014-06-26.

The graphs are been loaded using Ajax call and data feed to it by JSON response. The graphs are working perfectly fine on IE 7, 8, 9, 10, Chrome and Firefox.

Recently I have upgraded my Internet Explorer along with Windows version. Now I have Windows 8.1 and IE 11 installed on my system.

The issue I am facing is with IE 11. When I load page with charts (around 9 charts on a page) it works fine initially. But when I refreshes the page for few number of time, after few refresh it displays blank space at the pace of graph. So the graph is not been plotted but instead it displays a blank space, like it is a place holder of the chart.

No javascript error found when getting response from Ajax. I think it is plotting issue, as the JSON response is been received properly with proper data.

Is that issue persists with anyone else on IE 11?

Anyone know why this issue occur? And its solution?
Posted by Richard on 31st July 2014
Nothing rings a bell. You could try setting the rendering engine to IE9/IE10 to see if that changes anything. What's the address of the page?





Richard
Posted by Parth Bhagat on 1st August 2014
I have tried introducing compatibility mode with change in doctype.

I have tried with below combinations:
Doctype:
<!DOCTYPE html>


Compatibility String:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

I am facing this issue on my development machine, i.e. my local machine.
I am using it with localhost:8080.

Note:
* Issue generated when performing refresh operation repetitively. When the page loaded initially it works fine. But as the page is a search page, case may occur that the user performs search multiple time, and that will generate the issue.
* Issue is generated on IE 11 only, not on IE 7, 8, 9 and 10. Not on Chrome and Firefox.
Posted by Parth on 4th August 2014
Any help on this?

I am not able to use javascript alert() and log() functions I am not able to tack where the things going on, where the function is stopped drawing on canvas, so I am not able to debug. I would appreciate if any hint on how to debug RGraph API is provided.
Posted by Richard on 4th August 2014
As I said - nothing rings a bell. And if you can't use alert() or console.log() you're going to have a hard time debugging the chart.


Richard
Posted by Parth on 5th August 2014
I found the issue why alert() and lot() was not working and sorted out. Now able to get alert() and log() function working. I have put some log() to trace where the issue is. From that I found that draw() function is been called multiple time. For example if there is a bar chart, draw() function is called once for the first time, and on each consequent ajax request to load that particular chart draw function is called multiple time. So, second time loading the chart RGraph.Bar.draw() function is called twice, for third time loading it will call RGraph.Bar.draw() trice and so on.

To trace why draw() function is called multiple time, I've put a break point and found that it is been called from event listener registered. RG.InstallEventListeners(). So for example if we are refreshing it for 4th time then first 3 times it will be called from event listener.

Here is the stacktrace:
RG.installEventListeners.RG.InstallEventListeners
draw.Draw
RG.redraw.RG.Redraw
RGraph.window_mouseup_event_listener

So, calling draw function multiple time can cause the issue of blank canvas been plotted?

I am able to get traces for bar height and canvas width and all when blank canvas is been plotted.
Posted by Richard on 5th August 2014
Instead of just clearing the canvas in your AJAX callback function, try resetting the canvas instead. You'll then have to create the object from scratch:

RGraph.reset(document.getElementById('cvs'));

var obj = new RGraph.Bar({
     id: 'cvs',
     data: [4,8,6,3,5,2,4], // Substitute this for your AJAX data
     options: {
     }
}).draw()

Richard
www.rgraph.net/feedback
Posted by Parth on 7th August 2014
This change worked, Thanks for the help.

Add a reply




« Back to message list