RGraph allows you to put colourful, high quality data
visualizations and dashboards on your
website. It provides more than 60 different types of graphics
(eg Bar, Line and Pie charts etc.) that render across a wide variety of devices
(eg desktops, mobiles, tablets) and provides over 700 examples to
get you started.
Free for commercial use...
Are you running a commercial website? Perhaps your company
website or web application? Want to use RGraph on it? Go right ahead!
RGraph is free for any sort of commercial use.
...and free for non-commercial use too!
RGraph is also free for non-commercial use - so if you want to use it
on your websites then go right ahead. Blogs, charity sites,
educational sites, NGOs - all types of websites are allowed.
RGraph is Free and Open Source
RGraph is Free and Open Source and uses the MIT license - so you can do exactly
what you want with it. You don't need permission or to
crawl through a massive license agreement. Help yourself
and have fun with RGraph!
Open
RGraph is Open Source and uses the MIT licence
HTML5
RGraph uses native browser technologies
Dynamic
Easily integrate and update with JavaScript
Usable
Easy to use and create attractive visualisations that are meaningful
Versatile
Over 60 different charts are available for you to use on your websites
Docs
Plenty of documentation to get you going and to use as a reference
// Create the CSV object and pass it the file location of the CSV file and a function that
// creates the bar
new RGraph.CSV('/sample.csv', function (csv)
{
var labels = csv.getCol(0), // Get the first column which becomes the labels
data = csv.getCol(1), // Get the second column which becomes the data
numrows = csv.numrows, // Get the number of rows in the CSV
numcols = csv.numcols; // Get the number of cols in the CSV
// Create the bar
var bar = new RGraph.Bar({
id:'cvs',
data: data,
options: {
backgroundGridVlines: false,
backgroundGridBorder: false,
title: 'An example of using the CSV reader',
colors: ['#000'],
axes: false,
marginTop: 35,
shadow: false,
colorsStroke: 'rgba(0,0,0,0)',
textSize: 14,
labelsAbove: true,
labelsAboveSpecific: labels,
labelsAboveSize: 14,
labelsAboveOffset: -35,
labelsAboveColor: 'white'
}
}).wave();
}
// Create a new RGraph Sheets object using 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('1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E', function (sheet)
{
var labels = sheet.get('A2:A7'); // Get the labels from the spreadsheet
var key = sheet.get('B1:E1'); // Use the column headers (ie the names) as the key
var data = [
sheet.get('B2:E2'), // January
sheet.get('B3:E3'), // February
sheet.get('B4:E4'), // March
sheet.get('B5:E5'), // April
sheet.get('B6:E6'), // May
sheet.get('B7:E7') // June
];
// 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,
xaxisLabels: labels,
xaxisLabelsOffsety: 5,
colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'],
colorsStroke: 'rgba(0,0,0,0)',
shadow: false,
xaxis: false,
marginLeft: 50,
marginBottom: 70,
key: key,
keyBoxed: false,
keyPosition: 'margin',
keyTextSize: 12,
axesColor: '#aaa'
}
}).wave();
});
// Fetch the getdata.html file from the server
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,
hmargin: 10,
tickmarks: 'endcircle',
linewidth: 2,
xaxisLabels: json.labels,
tooltips: json.labels,
colors: ['Gradient(red:#a00)'],
shadow: true,
shadowOffsetx: 3,
shadowOffsety: -3,
shadowBlur: 3
}
}).draw();
});
<?php
// This makes the code a bit clearer
define('LF', "\n");
// Make a string out of the data
$myData = join(',', array(78,16,26,23,25,51,34,64,84,84));
// Print out the HTML <script> tags for the RGraph libraries
print('<script src="RGraph.common.core.js"></script>' . LF);
print('<script src="RGraph.line.js"></script>' . LF);
// Print out the <canvas> tag
print('<canvas id="cvs" width="600" height="200">[No canvas support]</canvas>' . LF . LF);
// Print out the HTML <script> tag that contains the JavaScript code that creates the Line
print('<script>' . LF);
print(' var data = [' . $myData . '];' . LF . LF);
print(' var line = new RGraph.Line({' . LF);
print(' id: "cvs",' . LF);
print(' data: data,' . LF);
print(' options: {' . LF);
print(' xaxisLabels: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"],' . LF);
print(' }' . LF);
print(' }).draw();' . LF);
print('</script>');
?>