Responsive & Animated Chart JavaScript Library – RGraph

Category: Chart & Graph , Javascript , Recommended | January 9, 2024
Author:heyesr
Views Total:27 views
Official Page:Go to website
Last Update:January 9, 2024
License:MIT

Preview:

Responsive & Animated Chart JavaScript Library – RGraph

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:

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

You Might Be Interested In:


Leave a Reply