
Back to the top
// 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.col(0), // Get the first column which becomes the labels
data = csv.col(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'],
xaxis: false,
yaxis: false,
marginTop: 35,
shadow: false,
colorsStroke: 'rgba(0,0,0,0)',
textSize: 14,
labelsAbove: true,
labelsAboveSpecific: labels,
labelsAboveSize: 14,
labelsAboveOffset: -35,
labelsAboveColor: 'white'
}
}).wave();
}
// To connect to your Gooogle Sheets spreadsheet 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: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();
});
// 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,
marginInner: 10,
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>');
?>