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 amd 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 2021. 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.
3d bar chart javascript, rgraph npm, rgraph examples, gauge chart javascript open source, bar chart html css javascript, rgraph demos, d3 based charting library, free 3d chart js
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…
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>
Responsive & Animated Chart, RGraph Plugin/Github
See Demo And Download
Official Website(heyesr): Click Here
This superior jQuery/javascript plugin is developed by heyesr. For extra Advanced Usages, please go to the official website.
Be First to Comment