// 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.column(0), // Get the first column which becomes the labels
data = csv.column(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 your OAuth ID (see the Sheets documentation for more details),
// 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', '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();
});
// 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();
});
<?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>');
?>
//
// This shows a 3D Bar chart that has a standard X-axis.
// The colors are gradients - which goes a bit further
// to creating a realistic 3D appearance. Smaller
// screens are accommodated by the responsive()
// function.
//
// The data array is a 2-dimension array which results
// in a grouped chart being displayed.
data = [[4,5,3],[5,2,1],[4,4,2],[8,16,11],[15,11,13],[2,5,1],[1,2,3]];
bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
variant: '3d',
colorsStroke: 'rgba(0,0,0,0)',
colors: [
'Gradient(#faa:#fbb)',
'Gradient(#aaa:#bfb)',
'Gradient(#aaf:#bbf)'
],
marginTop: 30,
marginLeft: 45,
marginBottom: 80,
xaxisColor: '#ddd',
xaxisTickmarks: false,
yaxisColor: '#ddd',
yaxisScaleUnitsPost: 'km',
yaxisTickmarks: false,
// Add and configure the tooltips. They have a
// Larger font size and a bit more padding than
// the default. They also use tooltip template macros
// so you only have to give a single tooltip template
// (ie a single string of text) and then RGraph will
// insert the relevant values.
names: ['Richard','Jamie','Lewis'],
tooltips: '<small><i>Results for <b>%{property:names[%{index}]}</b></i></small><br /><span style="font-size: 26pt; font-weight: bold">%{value},000m</span>',
tooltipsOffsetx: 3,
tooltipsCss: {
fontSize: '105%',
fontFamily: 'Arial, sans-serif',
fontWeight: 'bold',
paddingRight: '10px',
paddingLeft: '10px',
paddingTop: '10px',
paddingBottom: '10px',
textAlign: 'center'
},
shadow: false,
backgroundGridColor: '#eee',
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
}
}).draw()
// The responsive configuration has two options - one for
// screens which are at most 850 pixels wide and one for
// larger screens
.responsive([
{maxWidth: null, width: 600, height: 250, options: {textSize: 12,marginInner:10}},
{maxWidth: 850, width: 350, height: 200, options: {textSize: 8, marginInner: 2}}
]);
// 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:"Dave and Robbies 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();
