Want to easily add JavaScript charts to your website?
RGraph is a JavaScript charting library that makes fast and pretty charts for the web - it makes it easy to add interactive charts to your website- 100% Free and Open Source
- Easy to use
- Over 50 styles of responsive charts
- Built on HTML5 technology
- Great online documentation
- Data import tools [more info]
- Support straight from the developer
- First released in 2008
Benefits of using RGraph to show charts on your website
- Open Source
- Charts can be responsive
- Very versatile
- 900+ demo pages available
- 300+ pages of docs
- 50+ chart types
- Integrates easily
- Cross-browser
- Support direct from the author
- First established in 2008
- Open Source
- Charts can be responsive
- Very versatile
- 900+ demo pages are available
- 300+ pages of docs
- 50+ chart types
- Integrates easily
- Cross-browser
- Support direct from the author
- First established in 2008
In the download archive there are roughly 1000 demo pages which you can look at for either ideas or demonstrations of how things are done. About 70 of these are shown in the demos section on the website to give you an idea of what RGraph can do.
Open SourceRGraph uses the MIT license so it's completely unrestricted
HTML5 techRGraph uses SVG, canvas and JavaScript
Pure JavaScriptFast client-side JavaScript is used for easy integration
50+ chartsThere are lots of chart types and features available
Over 50 HOWTO guides
Authentic-looking 3D charts
RGraph can make authentic-looking 3D Bar charts (as you can see above), Pie and Donut charts, Horizontal Bar charts and progress bars. There are lots of examples across both SVG and canvas of other types of charts. The configuration of these 3D charts is very easy to understand.
Read more about the 3D chart support in RGraph...
Six ways to easily connect to and import your data
- CSV file connector
- Google Sheets connector
- AJAX connector
- HTML table connector
- Server-side databases
- Query-string data
1. CSV file connector
The csv
import utility in RGraph makes it easy
to fetch csv
files and parse the data contained within them. It
works via ajax
, making a request to your server
for the file and then parsing it into a usable
format.
View the CSV connector documentation page...
// Create the CSV object and pass it the location // of the file to be read along with a function that creates // the Bar chart. The function is given the data from the // file as an argument. new RGraph.CSV('/sample.csv', function (csv) { // Get the first column of the data which is used as the labels var labels = csv.column(0), // Get the second column of the data which is used as the data data = csv.column(1), // Get the number of rows in the file numrows = csv.numrows, // Get the number of columns in the file numcols = csv.numcols; // Create the Bar chart var bar = new RGraph.Bar({ id:'cvs', // Pass the data to the chart that was retrieved from the file data: data, options: { backgroundGridVlines: false, backgroundGridBorder: false, title: 'An example of reading a CSV file', colors: ['#000'], xaxis: false, yaxis: false, marginTop: 35, shadow: false, colorsStroke: 'rgba(0,0,0,0)', textSize: 14, labelsAbove: true, // Use the labels that were retrieved from the data file labelsAboveSpecific: labels, labelsAboveSize: 14, labelsAboveOffset: -35, labelsAboveColor: 'white' } }).wave(); }
2. Google Sheets connector
If you keep your data in a Google Sheets spreadsheet
(a free, cloud-based spreadsheet web-application) then by using
the Google Sheets connector you can fetch that data and use
it to create your RGraph charts. There are javascript
versions of the connector (one for canvas
and one
forsvg
but they're virtually identical) and also
a php
version should you prefer to
connect to Google Sheets behind-the-scenes.
View the Google Sheets connector documentation page...
// To connect to your Gooogle Sheets spreadsheet create a new RGraph Sheets // object using your OAuth ID (<a href=\"/canvas/sheets.html#Setting-up-a-chart-thats-integrated-with-google-sheets\">see the Sheets documentation for more details</a>), // the ID of the spreadsheet and the callback function that creates the chart. // The RGraph.Sheets object is passed to the callback function as an // argument so it doesn't need to be assigned to a variable when it's created new RGraph.Sheets('YOUR OAUTH ID', 'SPREADSHEET ID', function (sheet) { var labels = sheet.get('A2:A7'); // Get the labels from the spreadsheet var key = sheet.get('B1:E1'); // Use the column headers (the names) as the key var data = sheet.get('B2:E7'); // Get the data // Create and configure the chart using the information retrieved above // from the spreadsheet var bar = new RGraph.Bar({ id: 'cvs', data: data, options: { backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, xaxisLabels: labels, xaxisLabelsOffsety: 5, xaxisColor: '#aaa', yaxisColor: '#aaa', colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'], colorsStroke: 'rgba(0,0,0,0)', shadow: false, marginLeft: 50, marginBottom: 70, key: key, keyBoxed: false, keyPosition: 'margin', keyTextSize: 12 } }).wave(); });
3. AJAX connector
You can use the ajax
functions in RGraph to fetch
resources from your web-server. If you have your own ajax
routines (eg the jquery
functions) then
they will work just as well.
View the AJAX functions documentation page...
// Fetch the getdata.html file from the server. Remember that // AJAX doesn't usually work across domains so the resource should // be on the same web-server as the HTML file that contains your // RGraph chart. RGraph.AJAX.getJSON('/getdata.html?json', function (json) { // Create a chart using the information from the JSON data var bar = new RGraph.Bar({ id: 'cvs', data: json.data, options: { marginLeft: 25, marginRight: 25, marginTop: 25, marginBottom: 25, marginInner: 10, xaxisLabels: json.labels, tooltips: json.labels, colors: ['Gradient(red:#a00)'], shadow: true, shadowOffsetx: 3, shadowOffsety: -3, shadowBlur: 3 } }).draw(); });
4. HTML table connector
The html
table connector allows you to import
data directly
from a <table>
that's on the same page. If
you want to, instead of
giving it the id
of a table you can also give
it the entire html
as a string. Once parsed
there's an easy-to-use api
that allows you to get
hold of the data.
View the HTML table utility documentation page...
// Fetch the data from an HTML table on the same page. // Pass the function the ID of the table and a callback // function which creates the chart. RGraph.HTMLTable('myTable', function (table) { // Fetch the data and the labels from the table var data = table.column(1); var labels = table.column(0); // Another way of fetching your data and labels // that you might want to use, using the first row of // the column as the label (this works in a similar // way with the row() method): // // var data2 = table.column('data'); // var labels2 = table.column('labels'); // Create a chart using the information from the table data var bar = new RGraph.Bar({ id: 'cvs', data: data, options: { marginLeft: 25, marginRight: 25, marginTop: 25, marginBottom: 25, marginInner: 10, xaxisLabels: labels, colors: ['Gradient(red:#a00)'], shadow: true, shadowOffsetx: 3, shadowOffsety: -3, shadowBlur: 3 } }).draw(); });
5. Server-side databases
Integrating with server-side data-retrieval is quite straight-forward and is just a matter of outputting the correctly formatted data and putting it in the right place on the page so that RGraph can make sense of it. View the server-side databases installation page...
<?php // Create some empty arrays and connect to the database $data = []; $labels = []; $mysqli = new Mysqli("[hostname]","[username]","[password]","[database]"); // Ensure that the database connection was successful if ($mysqli->connect_error) { printf('Error connecting to database: (%s) %s', $mysqli->connect_errno), $mysqli->connect_error, ); exit; } // Perform the MySQL query to get the data that's needed for the chart $result = $mysqli->query( 'SELECT `age_days`, COUNT(`id`) AS `count` FROM accounts GROUP BY `age_days` ORDER BY `age_days` DESC' ); // Fetch the resultant data that the SQL query produces while($row = $result->fetch_assoc()) { $labels[] = $row['age_days']; $data[] = $row['count']; } // Make strings out of the data and labels so that // they can be output as part of the HTML page $data_str = sprintf('[%s]', join(', ', $data)); $labels_str = sprintf('["%s"]', join(' days", "', $labels)); ?> <!-- Print out the <script> tags for the RGraph libraries --> <script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script> <!-- Print out the <canvas> tag --> <canvas id="cvs" width="700" height="300"></canvas>[No canvas support]</canvas> <!-- Print out the HTML <script> tag that contains the JavaScript code that creates the chart. Here is where we use the PHP variables that were created above. --> <script> new RGraph.Bar({ id: "cvs", data: <?php echo $data_str ?>, options: { xaxisLabels: <?php echo $labels_str ?> } }).draw(); </script>
6. Query-string data
If you have data being passed to your page via the query-string (perhaps from an external source) then the query-string functions can help you retrieve it and parse it into a format that's usable by the RGraph charts. View the query-string documentation page...
// Get a JSON object from the query string (you might need to URLencode // the query string when it's created). The entire URL might look like this: // // /script.html?myData={"data":[48,56],labels:["Dave","Robbie"],title:"Results"} var myData = RGraph.GET.json('myData'); // Create and configure the chart using the object retrieved above // from the query string var bar = new RGraph.Bar({ id: 'cvs', data: myData.data, options: { backgroundGridBorder: false, backgroundGridVlines: false, xaxis: false, yaxis: false, xaxisLabels: myData.labels, title: myData.title, titleSize: 18 } }).wave();