Responsive & Animated Chart JavaScript Library – RGraph

Category: Chart & Graph , Javascript , Recommended | May 6, 2021
Author: heyesr
Views Total: 27 views
Official Page: Go to website
Last Update: May 6, 2021
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
  • 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:

05/06/2021

  • Update RGraph.rscatter.js

05/05/2021

  • Lower case some method names

You Might Be Interested In:


Leave a Reply