RGraph: Difference between revisions

Revision as of 11:54, 30 December 2019

Latest revision as of 15:07, 18 July 2025

(48 intermediate revisions by 23 users not shown)

Line 1:

{{Short description|HTML5 software library for charting written in native JavaScript}}

[[File:RGraph-logo.png|frameless|right]]

{{Infobox software

| name = RGraph

| title = RGraph

| logo =

| logo caption =

| logo_size =

| logo_alt = RGraph: Beautiful JavaScript charts for websites

| screenshot = <!-- Image name is enough -->

| caption =

| screenshot_size =

| screenshot_alt =

| collapsible =

| author =

| developer = [[Richard Heyes]] and community

| released = {{Start date and age|2008|09|01|df=yes}}

| latest release version = 6.22

| latest release date = {{Start date and age|2025|06|24|df=yes}}<ref name="Releases">

{{cite web

|url=https://www.rgraph.net/download.html#stable

|title=Download the RGraph software

|website=rgraph.net

|access-date=11 March 2021

}}</ref>

| latest preview version =

| latest preview date = <!-- {{Start date and age|YYYY|MM|DD|df=yes/no}} -->

| discontinued = no

| programming language = [[JavaScript]]

| repo = {{URL|https://github.com/heyesr/rgraph}}

| operating system =

| platform = [[Web platform|Web]]

| size =

| language =

| language count = <!-- DO NOT include this parameter unless you know what it does -->

| language footnote =

| genre = [[Data visualization]], [[JavaScript library]]

| license = [[GNU General Public License]]

| alexa =

| website = {{URL|www.rgraph.net}}

| standard =

| AsOf =

}}

'''RGraph''' is an [[HTML5]] [[software library]] for [[chart]]ing written in native [[JavaScript]]. It was created in 2008. RGraph started as an easy-to-use commercial [[Programming tool|tool]] based on [[HTML5]] [[Canvas element|canvas]] only. It's currently freely available to use under the [[open-source]] [[GNU General Public License|GPL]] 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>

<!-- 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.

RGraph is suitable for all websites. The size of the [[JavaScript]] files and the code to make a chart is small and can be further reduced by using techniques such as [[minification (programming)|minification]] and [[data compression|compression]].

<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 ==

Some of the key features of RGraph include:

* Responsive support (changing the chart based on the browser size) (Canvas, SVG)

* Accessible or native canvas text (selectable/copyable text) (Canvas)

* 3D chart support (Canvas, SVG)

* Animated charts (Canvas, SVG)

* Events (for example onclick, onmousemove, ondraw) (Canvas, SVG)

* Dynamic updates (dynamic, interactive charts) (Canvas, SVG)

* Download as image (Canvas)

* Interactive adjusting (Canvas)

* Tooltips (Canvas, SVG)

* Annotation (draw on the chart with your mouse) (Canvas)

* Context menus (canvas)

== Data import tools ==

RGraph has data import utilities to help you retrieve your data and produce charts with it. These consist of a CSV file import utility for connecting to CSV files on your server, a Google Sheets import utility for connecting to a Google Sheets spreadsheet, AJAX functions for

retrieving data via AJAX and documentation about importing data from server-side databases.

== Ongoing development ==

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 ==

RGraph is publisheddual licensed using the [[Openopen Source]]source [[MITGNU licenseGeneral Public License]] 2.0 and therefore free-to-use for any purposecommercial.

== Mentions ==

In July 2014, [[Salesforce]] made RGraph available to be plugged into the [[Data reporting|reporting]] and [[Dashboard (business)|dashboard]] tools on its mobile platform. Salesforce1RGraph is among six third-party [[Data visualization|visualization]] tools available inside the dashboards, together with [[Google Charts]], [[D3.js]], [[CanvasJS]], [[Chart.js]], and [[HighCharts]]Highcharts.<ref>{{Cite web |url=https://www.zdnet.com/article/salesforce-adds-analytics-tools-to-salesforce1-mobile-app/ |archive-url=https://web.archive.org/web/20141223160812/http://www.zdnet.com/article/salesforce-adds-analytics-tools-to-salesforce1-mobile-app/ |url-status=dead |archive-date=December 23, 2014 |title=Salesforce adds analytics tools to Salesforce1 Mobile App |website=[[ZDNet]] |date=3 July 2014 |access-date=8 December 2019}}</ref>

In a book "''Android Cookbook: Problems and Solutions for Android Developers''," RGraph is recommended as an alternative to creating [[Android (operating system)|Android]] charts in pure [[Java (programming language)|Java]].<ref>{{Cite book |url=https://books.google.com/books?id=AdPTDgAAQBAJ |last=Darwin |first=Ian |date=10 May 2017 |title=Android Cookbook: Problems and Solutions for Android Developers |publisher=[[O'Reilly Media]] |pages=271–274 |isbn=9781449374495}}</ref>

== See also ==

In Ian F. Darwin's book "''Android Cookbook: Problems and Solutions for Android Developers''," RGraph is recommended as an alternative to creating [[Android (operating system)|Android]] charts in pure [[Java]].<ref>{{Cite book |url=https://books.google.com/books?id=AdPTDgAAQBAJ |last=Darwin |first=Ian |date=10 May 2017 |title=Android Cookbook: Problems and Solutions for Android Developers |publisher=[[O'Reilly Media]] |page=271-274 |isbn=9781449374495}}</ref>

{{Portal|Free and open-source software}}

* [[JavaScript framework]]

* [[JavaScript library]]

== References ==

Line 124 ⟶ 61:

== External links ==

* {{officialOfficial website|https://www.rgraph.net/}}

* {{GitHub|heyesr/rgraph}}

[[Category:Data and information visualization software]]

[[Category:JavaScript libraries]]

[[Category:JavaScript visualization toolkits]]

[[Category:JavaScript]]

[[Category:Visualization API]]

[[Category:Charts]]