RGraph Beautiful JavaScript charts for Websites – RGraph is an open-source JavaScript charts library for websites. It started in 2008 and was initially canvas only.
Now it has support for over 60 responsive chart types across SVG and the artboard, the ability to import multiple data sources (including CSV files, Google spreadsheets, and AJAX documents for server data usage), animation, JSON, and AJAX support, and more. RGraph is licensed under the MIT License.
First created in 2008 with Canvas, RGraph now supports both canvases as well as SVG charts. He started using SVN to control sources and only moved to GitHub in 2022. It wasn’t a complete migration by any means – but as my knowledge of GitHub grows, he will become attached to it more and more and will use it as intended.
More features:
- Open-source.
- Based on Canvas or SVG.
- Supports any type of data source like CSV, Google Sheets, AJAX (JSON), etc.
- Supports drawing on canvas.
Types of charts:
- Activity
- Bar
- Bipolar
- Fuel (Canvas Only)
- Funnel
- Gantt (Canvas Only)
- Guage
- Horizontal Bar
- Horseshoe
- Horizontal Progress Bar (Canvas Only)
- Line
- Meter (Canvas Only)
- Modal dialog (Canvas Only)
- ODO (Canvas Only)
- Pie
- Radar
- Rose
- Scatter
- Segmented
- Semi Circular Progress
- Thermometer (Canvas Only)
- Vertical Progress Bar (Canvas Only)
- Waterfall
- And more…
Must Read: A Wrapper For Google Charts Library Written In Angular
How to make use of it:
1. Download and embody the next JavaScript files on the web page.
<!-- Core (SVG) --> <script src="./libraries/RGraph.svg.common.ajax.js"></script> <script src="./libraries/RGraph.svg.common.core.js"></script> <script src="./libraries/RGraph.svg.common.csv.js"></script> <script src="./libraries/RGraph.svg.common.fx.js"></script> <script src="./libraries/RGraph.svg.common.key.js"></script> <script src="./libraries/RGraph.svg.common.sheets.js"></script> <script src="./libraries/RGraph.svg.common.tooltips.js"></script> <!-- SVG Charts --> <script src="./libraries/RGraph.svg.activity.js"></script> <script src="./libraries/RGraph.svg.bar.js"></script> <script src="./libraries/RGraph.svg.bipolar.js"></script> <script src="./libraries/RGraph.svg.funnel.js"></script> <script src="./libraries/RGraph.svg.gauge.js"></script> <script src="./libraries/RGraph.svg.hbar.js"></script> <script src="./libraries/RGraph.svg.horseshoe.js"></script> <script src="./libraries/RGraph.svg.line.js"></script> <script src="./libraries/RGraph.svg.pie.js"></script> <script src="./libraries/RGraph.svg.radar.js"></script> <script src="./libraries/RGraph.svg.rose.js"></script> <script src="./libraries/RGraph.svg.scatter.js"></script> <script src="./libraries/RGraph.svg.segmented.js"></script> <script src="./libraries/RGraph.svg.semicircularprogress.js"></script> <script src="./libraries/RGraph.svg.waterfall.js"></script> <!-- Core (Canvas) --> <script src="./libraries/RGraph.common.annotate.js"></script> <script src="./libraries/RGraph.common.context.js"></script> <script src="./libraries/RGraph.common.core.js"></script> <script src="./libraries/RGraph.common.csv.js"></script> <script src="./libraries/RGraph.common.dynamic.js"></script> <script src="./libraries/RGraph.common.effects.js"></script> <script src="./libraries/RGraph.common.key.js"></script> <script src="./libraries/RGraph.common.moment.js"></script> <script src="./libraries/RGraph.common.sheets.js"></script> <script src="./libraries/RGraph.common.starburst.js"></script> <script src="./libraries/RGraph.common.tooltips.js"></script> <!-- Canvas Charts --> <script src="./libraries/RGraph.activity.js"></script>) <script src="./libraries/RGraph.bar.js"></script> <script src="./libraries/RGraph.bipolar.js"></script> <script src="./libraries/RGraph.fuel.js"></script> <script src="./libraries/RGraph.funnel.js"></script> <script src="./libraries/RGraph.gantt.js"></script> <script src="./libraries/RGraph.gauge.js"></script> <script src="./libraries/RGraph.hbar.js"></script> <script src="./libraries/RGraph.horseshoe.js"></script> <script src="./libraries/RGraph.hprogress.js"></script> <script src="./libraries/RGraph.line.js"></script> <script src="./libraries/RGraph.meter.js"></script> <script src="./libraries/RGraph.modaldialog.js"></script> <script src="./libraries/RGraph.odo.js"></script> <script src="./libraries/RGraph.pie.js"></script> <script src="./libraries/RGraph.radar.js"></script> <script src="./libraries/RGraph.rose.js"></script> <script src="./libraries/RGraph.rscatter.js"></script> <script src="./libraries/RGraph.scatter.js"></script> <script src="./libraries/RGraph.segmented.js"></script> <script src="./libraries/RGraph.semicircularprogress.js"></script> <script src="./libraries/RGraph.thermometer.js"></script> <script src="./libraries/RGraph.vprogress.js"></script> <script src="./libraries/RGraph.waterfall.js"></script> <!-- Canvas Drawing API --> <script src="./libraries/RGraph.drawing.background.js"></script> <script src="./libraries/RGraph.drawing.circle.js"></script> <script src="./libraries/RGraph.drawing.image.js"></script> <script src="./libraries/RGraph.drawing.marker1.js"></script> <script src="./libraries/RGraph.drawing.marker2.js"></script> <script src="./libraries/RGraph.drawing.marker3.js"></script> <script src="./libraries/RGraph.drawing.poly.js"></script> <script src="./libraries/RGraph.drawing.rect.js"></script> <script src="./libraries/RGraph.drawing.text.js"></script> <script src="./libraries/RGraph.drawing.xaxis.js"></script> <script src="./libraries/RGraph.drawing.yaxis.js"></script>
2. Create a canvas for the chart.
<canvas id="example" width="600" height="450"> </canvas>
Links point to the RGraph website
- Homepage
- Download RGraph
- SVG documentation
- Canvas documentation
- Demos of charts
- News and updates
- About RGraph and its author
- Get help with RGraph
See Demo And Download
Official Website(heyesr): Click Here
This superior jQuery/javascript plugin is developed by heyesr. For extra advanced usage, please go to the official website.
