Author: | heyesr |
---|---|
Views Total: | 0 views |
Official Page: | Go to website |
Last Update: | September 21, 2023 |
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:
09/21/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