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.18, 1st June 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.

# An interactive example of the canvas quadraticCurveTo function

Written by Richard Heyes, RGraph author, on 15th January 2013

[No canvas support]

This is a demonstration of how to use the `quadraticCurveTo` function of the `canvas` `api`. A quadratic curve is a type of curve that is available to you with `canvas` along with the `bezierCurveTo` function. The example here should help you to understand them because the control points (the coordinates that you give to the `quadraticCurveTo` function ) are illustrated and you can drag them around with your mouse - showing the effect on the curve. The resulting code is shown below.

This is the code that can be used to achieve the curve (the points are color-coded to match the output above):

The `quadraticCurveTo` function takes four arguments - ie two sets of XY coordinates. The curve is actually made up of three points - but the first point is the current point in your path. If you're starting a new path with the `quadraticCurveTo` function then you need to use the `moveTo` function to move to the start point.

• Start point
This is the `moveTo` call in the example above. The curve starts from this point.

• Control point
This is the first set of coordinates that you give to the `quadraticCurveTo` function. This control point dictates the shape of the curve.

• End point
This is the second set of coordinates given to the `quadraticCurveTo` function. This is where the curve ends.