Author: | heyesr |
---|---|
Views Total: | 1,812 views |
Official Page: | Go to website |
Last Update: | April 11, 2025 |
License: | MIT |
Preview:

Description:
RGraph is a beautiful, responsive, animated charting & graphing JavaScript library that supports more than 60 chart types.
More Features:
- Open-source.
- Based on Canvas or SVG.
- Supports any types of data sources like CSV, Google Sheets, AJAX (JSON), etc.
- Supports canvas drawing.
Chart Types:
- Activity
- Bar
- Bipolar
- Fuel (Canvas Only)
- Funnel
- Gantt (Canvas Only)
- Guage
- Horizontal Bar
- Horseshoe
- Horizontal Progress Bar (Canvas Only)
- Line
- Meter (Canvas Only)
- Modaldialog (Canvas Only)
- ODO (Canvas Only)
- Pie
- Radar
- Rose
- Scatter
- Segmented
- Semi Circular Progress
- Trendline
- Thermometer (Canvas Only)
- Vertical Progress Bar (Canvas Only)
- Waterfall
- And more…
How to use it:
1. Download and include the following JavaScript files on the 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>
3. Happy coding. You can find the full documentation and demos in the zip.
Changelog:
04/11/2025
- v6.21
10/01/2024
- v6.19
01/09/2024
- v6.1.6
12/23/2023
- v6.1.5
12/21/2023
- Change name of labelsInBar* to labelsInbar on the Gantt, HBar and SVG HBar
12/17/2023
- Bugfix
12/16/2023
- Added adjusting to the SVG Bar chart
- Added Bar.getIndexByX(event) function which gets the relevant bar index for a click
- Added Bar.getValue(event) Gets the relevant value for the given coordinate (via an event)
- Added getHeight(value) method which gets the relevant height for a given value
- Added the RGraph.SVG.roundRect() function which prosduces a rouned corner rectangle
11/27/2023
- Add labelsAboveBackground property
11/27/2023
- Added cornerRadius rounding to the glass highlight effect
11/19/2023
- Added rounded corners capability to the gantt chart
11/12/2023
- Removed beveled option
- The HProgress and VProgress now have a corners option for rounded ends
- Add the option keyInteractiveHighlightChartLinewidth
- Added the option to have curved ends to the HProgress and VProgress
11/07/2023
- Added ability to have filled lines – normal and spline
11/05/2023
- Add support for filled vertical llines in regular andspline mode
11/05/2023
- In svg.create() function allow for spaces in attributes, Add background border drawing function
11/03/2023
- Fix labels above for stacked and grouped
10/31/2023
- Add a lineCap
10/30/2023
- Added backgroundborder properties
10/24/2023
- Changed afterbackground event to just background for consistency with other events
10/19/2023
- Add beforebackground and afterbackground events
10/17/2023
- Change RGraph.linearGradient to use the getArgs function
10/14/2023
- properties.backgroundBackdropColor
10/13/2023
- Fixed to make it possible to have none-zero minimum values
10/12/2023
- Added the Scatter chart method RGraph.Scatter.random for creating random data
10/10/2023
- Allow a custom linedash when using dashed/dotted background grids in bar/line/scatter/hbar
09/27/2023
- Update
09/05/2023
- Only set the opacity if its not been set by the user
09/04/2023
- If the event is mouemove then don’t fade the tooltip
08/31/2023
- Bugfixes
08/20/2023
- Added Scatter chart adjusting
08/18/2023
- Reduced the vertical size od the vounding box around text by 2 pixels
- Added Marimekko charts capability to the Scatter chart
- Added a callback option to the explodeSegment function
- Scatter and line charts had a chink missing from where the top of the Y axis meets the tickmark – fixed this
08/13/2023
- Added vertical centering property
08/10/2023
- Updated the create() function. Change all the .create() functions to the object variant
08/05/2023
- Minor changes
07/30/2023
- Added tooltipsPointerOffsetx and tooltipsPointerOffsety o Allow tooltipsOffsetting to work with fixed positioning
07/23/2023
- Added the RGraph.drawLine() function which follows on frrom the pathLine() function and draws the line to the canvas as well as pathing it. Also massaged the pathLine() function
07/22/2023
- Add funtion that handles the pathing of a line
07/20/2023
- Update
07/16/2023
- Updates to the lasso feature to better enable multiple charts with the lasso features
07/14/2023
- Add the trace effect to the SVG scatter chart
07/13/2023
- Bugfix
07/12/2023
- Update RGraph.line.js
07/08/2023
- Update RGraph.common.tooltips.js
07/07/2023
- Update RGraph.waterfall.js
07/03/2023
- Update RGraph.svg.common.tooltips.js
07/02/2023
- Update RGraph.bar.js
06/22/2023
- Update RGraph.hbar.js
06/18/2023
- Update RGraph.scatter.js
06/08/2023
- Update RGraph.semicircularprogress.js
05/30/2023
- Update RGraph.funnel.js
05/25/2023
- Update RGraph.pie.js
05/10/2023
- Update RGraph.pie.js
04/30/2023
- Update RGraph.svg.semicircularprogress.js
04/23/2023
- Update RGraph.svg.hbar.js
03/24/2023
- Update RGraph.line.js
03/13/2023
- Update RGraph.waterfall.js
02/22/2023
- Update RGraph.common.core.js
02/06/2023
- Update RGraph.waterfall.js
01/28/2023
- Update RGraph.pie.js
01/21/2023
- Update RGraph.common.core.js
01/18/2023
- Update RGraph.vprogress.js
01/16/2023
- Update RGraph.waterfall.js
01/13/2023
- Update RGraph.common.core.js
01/06/2023
- Update RGraph.line.js
01/05/2023
- Update RGraph.scatter.js
01/03/2023
- Update RGraph.scatter.js
01/01/2023
- Update RGraph.line.js
12/26/2022
- Update RGraph.svg.common.core.js
12/21/2022
- Update RGraph.hbar.js
12/14/2022
- Update RGraph.bar.js
12/11/2022
- Update RGraph.common.core.js
10/26/2022
- Update RGraph.svg.common.core.js
10/16/2022
- Update RGraph.svg.line.js
09/18/2022
- Update RGraph.bar.js
09/11/2022
- Update
08/03/2022
- Update RGraph.line.js
08/07/2022
- Added the wave() effect to the Line chart
07/27/2022
- Update RGraph.line.js
07/13/2022
- Update RGraph.waterfall.js
07/11/2022
- Update RGraph.line.js
07/04/2022
- Update RGraph.common.core.js
06/16/2022
- Update RGraph.common.tooltips.js
04/25/2022
- Update RGraph.vprogress.js
04/10/2022
- Update RGraph.hbar.js
04/04/2022
- Fix HBar scaling
04/01/2022
- Update RGraph.svg.bipolar.js
03/31/2022
- Update RGraph.svg.gauge.js
03/27/2022
- Add ClipTo functions
02/07/2022
- Implemented new options
01/18/2022
- Update RGraph.svg.common.core.js
12/20/2021
- Add the default for the text: property
12/15/2021
- Add support for the new text: option
12/04/2021
- Update RGraph.bar.js
12/03/2021
- Update RGraph.bar.js
11/28/2021
- Update RGraph.bar.js
11/06/2021
- Update RGraph.svg.semicircularprogress.js
11/04/2021
- Update RGraph.svg.semicircularprogress.js
10/27/2021
- Update RGraph.svg.waterfall.js
10/22/2021
- Update RGraph.semicircularprogress.js
10/10/2021
- Update RGraph.waterfall.js
10/09/2021
- Update RGraph.gantt.js
10/02/2021
- Update RGraph.scatter.js
09/21/2021
- Update RGraph.bar.js
09/19/2021
- Update RGraph.svg.line.js
09/16/2021
- Update RGraph.svg.common.table.js
09/15/2021
- Update RGraph.svg.common.csv.js
09/13/2021
- Add the HTMLTable import utility
09/02/2021
- Update RGraph.svg.common.core.js
08/31/2021
- Update RGraph.common.core.js
08/30/2021
- Update RGraph.svg.common.core.js
08/27/2021
- Update RGraph.svg.line.js
07/27/2021
- Update RGraph.hbar.js
07/20/2021
- Update RGraph.bar.js
07/13/2021
- Update RGraph.svg.hbar.js
07/10/2021
- Update RGraph.svg.common.tooltips.js
07/03/2021
- Update RGraph.line.js
05/29/2021
- Add trendline support
05/06/2021
- Update RGraph.rscatter.js
05/05/2021
- Lower case some method names