|
[[File:RGraph-logo.png|frameless|right]]
<!-- Is this image OK to use here? It's the RGraph logo -->
'''RGraph''' is a HTML5 [[software library]] for [[chart]]ing written in native [[JavaScript]]. It was created by [[England|English]] [[programmer]] Richard Heyes in [[2008]]. RGraph started as an easy-to-use commercial [[Programming tool|tool]] based on [[HTML5]] [[Canvas element|canvas]] only. However now, it's freely available to use under the [[open-source]] [[MIT license]], and supports more than 50 chart types in both [[Scalable Vector Graphics|SVG]] and canvas.
<ref>{{Cite web |url=https://www.htmlgoodies.com/html5/other/robs-guide-to-html5-charting-libraries-rgraphs-and-highcharts.html |title=Rob's Guide to HTML5 Charting Libraries: RGraphs and Highcharts |website=HTMLGoodies |date=22 February 2013 |access-date=8 December 2019}}</ref><ref>{{Cite book |url=https://books.google.com/books?id=BA9QDwAAQBAJ |last=Hogan |first=Brian |date=30 October 2013 |title=HTML5 and CSS3: Level Up with Today's Web Technologies |publisher=Pragmatic Bookshelf |isbn=9781680503685}}</ref>
== Example code ==
An example of what the RGraph code looks like is below. This code is designed to be used on a canvas which has a black background like this:
<canvas id="cvs" width="600" height="250" style="background-color: #333">[No canvas support]</canvas>
<script>
data = [[45,56],[75,32],[39,47],[34,48],[46,47],[48,52]];
new RGraph.Bar({
id: 'cvs',
data: data,
options: {
shadow: false,
colorsStroke: 'rgba(0,0,0,0)',
grouping: 'grouped',
colors: [
'Gradient(white:#ccf:#ccf:#ccf:#ccf)',
'Gradient(white:#faa:#faa:#faa:#faa)'
],
backgroundGridVlines: false,
backgroundGridBorder: false,
textColor: 'white',
xaxisLabels: ['2007','2008','2009','2011','2012','2013'],
marginTop: 15,
marginRight: 5,
xaxis: false,
yaxis: false
}
}).draw();
</script>
== Supported chart types ==
Because RGraph was originally a canvas only library there are more types of charts based around the canvas tag than the SVG tag. See the list below to see the types that are supported.
{| class="wikitable"
|-
! Canvas charts !! SVG charts
|-
| Bar || Bar
|-
| Bipolar || Bipolar
|-
| Donut || Donut
|-
| Funnel || Funnel
|-
| Gantt || Gauge
|-
| Gauge || Horizontal bar
|-
| Horizontal bar || Line
|-
| Horizontal progress bar || Pie
|-
| Line || Radar
|-
| Meter || Rose
|-
| Odometer || Scatter
|-
| Pie || Semi-circular progress
|-
| Radar || Waterfall
|-
| Rose ||
|-
| Radial Scatter ||
|-
| Scatter ||
|-
| Semi-circular progress ||
|-
| Thermometer ||
|-
| Vertical progress bar ||
|-
| Waterfall ||
|}
The SVG Bar chart library can be configured to show a Vertical progress bar and the Horizontal bar chart can be configured to show Horizontal progress bars.
== Key features ==
== Ongoing development ==
New versions of RGraph are released every 2-3 months.
New versions of RGraph are released every 2-3 months - development is ongoing. Currently (December 2019) the focus is on unifying the X and Y axis drawing across all the canvas libraries that use axes. This means that the Bar, Gantt, Horizontal bar, Line, Scatter and Waterfall will all use the same code to draw their X and Y axes just like the [[SVG]] libraries currently do.
== License ==
| 