Charts do not render in HTML5 canvas tag


« 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 Aneeba K on 10th August 2014
Hi,
I have just started with Rgraph Library. I am trying to run a basic example,I see the canvas in the browser but no graph renders in it. Please help me asap.

I am trying this code:

<!DOCTYPE html>
<html>
<head>
<title>RGraph: HTML5 canvas graph library - a basic example</title>
<script src="libraries/RGraph.common.core.js" ></script>
<script src="libraries/RGraph.bar.js" ></script>
</head>
<body>
<h1>RGraph: HTML5 canvas graph library - A basic example</h1>
<!-- This is the canvas that the graph is drawn on -->
<canvas id="myBar" width="1000" height="250" style="border: 1px solid gray">[No canvas support]</canvas>
 
<!--This creates and displays the graph.
We can call this from the window.onload event,
allowing you to put it in your pages header. -->
<script>
window.onload = function ()
{
var bar = new RGraph.Bar('myBar', [12,13,16,15,16,19,19,12,23,16,13,24]);
bar.Set('chart.colors', ['red']);
bar.Set('chart.title', 'A basic graph (big, but basic)');
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May',
     'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Draw();
}
</script>
</body>
</html>


Please help me find the problem. I have saved this file in the same directory as Rgraph
Posted by Richard on 11th August 2014
What does your browsers JavaScript console say?





Richard
Posted by Aneeba K on 11th August 2014
It gives an error:

Uncaught ReferenceError: jQuery is not defined
Posted by Richard on 11th August 2014
You haven't included jQuery. Add this tag after the RGraph libraries:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>





Richard
Posted by Aneeba K on 11th August 2014
Still it doesn't work, now the console says:


Failed to load resource: net::ERR_FILE_NOT_FOUND file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Uncaught ReferenceError: jQuery is not defined /C:/Users/Aneeba%20Khalil/Desktop/RGraph3_2014-07-27-table/RGraph/libraries/RGraph.bar.js:289
Posted by Richard on 11th August 2014
As its a local file you can do this:

<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>

Or you can download the file and put it in the RGraph directory so that you can refer to it like this:

<script src="libraries/jquery.min.js"></script>



Richard
Posted by Aneeba K on 11th August 2014
It worked, I copied the jquery.min.js file in libraries.

Thank you so much richard :-)

Add a reply

 




« Back to message list
RGraph on social media