About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 15 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Download
Get the latest version of RGraph (version 6.19, 28th September 2024) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
License
RGraph can be used for free under the GPL or if
that doesn't suit your situation there's an
inexpensive (£129) commercial license available.The arcTo function
The arcTo
function is used whilst drawing paths to the canvas
to draw a
circle or a partial circle to the canvas
. The function
draws the arc created by two lines that are defined by the coordinates
and radius given. Commonly the arc
function can be
used as an alternative to this function.
Arguments to the function
- The X1 coordinate
- The Y1 coordinate
- The X2 coordinate
- The X2 coordinate
- The radius
An example
<script>
window.onload = function ()
{
var canvas = document.getElementById("cvs");
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.arcTo(200,50,200,200,25);
context.lineTo(200,200);
context.stroke();
}
</script>
A rectangle with rounded corners
This is an example of using the arcTo
function to make a
rectangle with rounded corners. Simply include the function
before you create the canvas
2D context and it will be there for you to make
use of. It's just like the rect
function but
with an extra argument that stipulates the size of the rounded corners.
<script> // // This adds a roundedRect(x, y, width, height, radius) function to the drawing // context. The radius argument dictates how severe the corners are rounded. // // @param number x The X coordinate // @param number y The Y coordinate // @param number width The width of the rectangle // @param number height The height of the rectangle // @param number radius The radius of the corners. Bigger values mean more rounded corners // CanvasRenderingContext2D.prototype.roundedRect = function (x, y, width, height, radius) { // Because the function is added to the context prototype // the 'this' variable is actually the context // Save the existing state of the canvas so that it can be restored later this.save(); // Translate to the given X/Y coordinates this.translate(x, y); // Move to the center of the top horizontal line this.moveTo(width / 2,0); // Draw the rounded corners. The connecting lines in between them are drawn automatically this.arcTo(width,0,width,height, Math.min(height / 2, radius)); this.arcTo(width, height, 0, height, Math.min(width / 2, radius)); this.arcTo(0, height, 0, 0, Math.min(height / 2, radius)); this.arcTo(0, 0, radius, 0, Math.min(width / 2, radius)); // Draw a line back to the start coordinates this.lineTo(width / 2,0); // Restore the state of the canvas to as it was before the save this.restore(); } window.onload = function () { // And you use it like this. First get the canvas and context as normal var canvas = document.getElementById('cvs') var context = canvas.getContext('2d') // Start a path and draw a rounded rectangle. The roundedRect function can be likened to the rect function context.beginPath(); context.fillStyle = 'red'; context.roundedRect(5, 5, 100, 200, 25); context.stroke(); context.fill(); } </script>