Must Watch!
MustWatch
Importing data from CSV
Importing data from a CSV file using the CSV connector
// sample sentence: $.get("http://qt.gtimg.cn/r=2&q=r_hk" + theCode, function(data, status){process(data);})
<script>
/* This fetches the CSV file and shows the Bar chart */
var csv = 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 columns in the CSV
var bar = new RGraph.Bar({ // Create the chart
id:'cvs',
data: data,
options: {
backgroundGridVlines: false,
backgroundGridBorder: false,
title: 'A chart 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();
});
</script>
Simple Line Chart
Simple Line Chart
Line Chart from datafile
local server Line Chart from datafile
y axis
y axis default color black
to change default color:
axisColor: '#864', textColor: '#ccc',
drawing api yaxis
drawing api yaxis
script src="./rchart/RGraph.drawing.yaxis.js"
yminpct = 100 - (theMax-theMin)*100/theMax,
ymaxpct = 100,
yaxis1 = new RGraph.Drawing.YAxis('cvs', 1300)
.Set('colors', ['gold']).Set('text.color', 'gray')
.Set('text.size', 8)
.Set('max', ymaxpct).Set('min', yminpct)
.Set('linewidth', 2).Set('tickmarkslength', 5)
.Set('title', '% pct')
.Draw();
};
draw 3 y axis
new RGraph.Drawing.YAxis({
id: 'cvs', x: bar.marginLeft,
options: {
marginTop: 35,
yaxisScaleMax: bar.scale2.max * 2, yaxisScaleDecimals: 1,
textColor: 'blue', textSize: 16, yaxisColor: ['blue'],
tooltips: 'Moisture measured by the MET office',
tooltipsCss: { backgroundColor: 'black', color: 'white' }
}
}).draw();
new RGraph.Drawing.YAxis({
id: 'cvs', x: bar.marginLeft - 70,
options: {
marginTop: 35,
yaxisScaleMax: bar.scale2.max * 5, yaxisScaleDecimals: 1,
textColor: 'red', textSize: 16, yaxisColor: ['red'],
tooltips: 'Sunshine measured by the MET office',
tooltipsCss: { backgroundColor: 'black', color: 'white' }
}
}).draw();
new RGraph.Drawing.YAxis({
id: 'cvs', x: bar.marginLeft - 140,
options: {
marginTop: 35,
yaxisScaleMax: bar.scale2.max, yaxisScaleDecimals: 1,
textColor: 'green', textSize: 16, yaxisColor: ['green'],
tooltips: ['Rainfall measured by the MET office'],
tooltipsCss: { backgroundColor: 'black', color: 'white' },
textAccessiblePointerevents: false,
}
}).draw();
x axis
new RGraph.Drawing.XAxis({
id: 'cvs', y: bar.canvas.height - bar.marginBottom,
options: {
tooltips: ['The X axis represents each<br>person'],
xaxisLabels: ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'],
xaxisTickmarksCount: 8, colors: ['#666']
}
}).draw();
scrolling line
scrolling line
dynamic scrolling Line chart
chart using PhantomJS
create chart using PhantomJS
Integrating RGraph with your data structures
For example take the following data:
data = {
title: 'Snooker scores from Wednesday',
results: [
{name: 'Fred', score: 45},
{name: 'John', score: 23},
{name: 'Samuel', score: 26},
{name: 'Jane', score: 35},
{name: 'Pete', score: 36},
{name: 'Joe', score: 41}
]
};
getting the necessary information out just requires a little loop.
For example:
values = [];
names = [];
title = data.title;
for (var i=0; i<data.results.length; ++i) {
names.push(data.results[i].name);
values.push(data.results[i].score);
}
console.log(title);
console.log(values);
console.log(names);
The labels and names arrays and the title string are now in a usable format so you can pass them straight to RGraph without need of any further modifications:
new RGraph.SVG.Bar({
id: 'cc',
data: values,
option: {
title: title,
xaxisLabels: names
}
}).draw();
legend key shapes
var data = [10,12,14,15,10];
var canvas = document.getElementById('canvasid');
RGraph.Clear(canvas);
RGraph.ObjectRegistry.Clear(canvas);
var bar = new RGraph.Bar('canvasid', data)
.Set('colors.sequential', true)
.Set('key', ['Total', 'Pending', 'Confirmed', 'To Exit', 'Extended'])
.Set('key.color.shape', 'circle')
.Draw();
Animate the Bar chart
bar = new RGraph.Bar({
id: 'cvs2',
data: [ [190,12,42,2], [165,180,80,42], [47,10,93,47],
[121,80,25,27], [30,25,21,43], [72,75,120,50] ],
options: {
grouping: 'grouped', shadow: false,
tickmarksStyle: null, linewidth: 7,
backgroundGridVlines: false, backgroundGridColor: 'gray',
colorsBackground: '#222',
xaxis: false, yaxis: false,
textColor: '#d7d5d6', textSize: 12,
title: '2009 employee sales by department',
titleColor: 'white',
xaxisLabels: ['Food','Auto','Misc','Furniture','Bath','Kitchen'],
marginTop: 75, marginBottom: 60,
key: ['Mary','Tom','Brad','Kate'],
keyPosition: 'margin', keyPositionY: 425,
keyLabelsSize: 14, keyLabelsColor: 'rgb(248,248,248)',
colors: ['#B8202C','#96D1E3','#FA8710','#62648D']
}
// the beforedraw function is used to clear the canvas to
// a dark color before the chart is drawn.
}).on('beforedraw', function (obj)
{
RGraph.clear(obj.canvas, '#555557');
// Use the wave effect to show the chart and add some responsive capability to accommodate
// smaller screens.
}).wave().responsive([
{maxWidth:null,width:575,height:450,options:{marginLeft: 50,marginRight: 50,marginTop: 75,titleSize: 24,keyPositionY: 425}},
{maxWidth:900,width:400,height:300,options:{marginLeft: 40,marginRight: 15,marginTop: 55,titleSize: 17,keyPositionY: 275}}
]);
drawing api background
drawing api background
drawing api intro
HTML5 canvas reference
HTML5 canvas reference
A reference to the HTML5 canvas tag API functions and settings.
There examples provided which can help you to master the API.
The RGraph blog also has more examples of using the canvas tag.
With the new HTML5 specification comes a whole bag of new goodies including a new tag - <canvas>.
This tag is effectively like a piece of paper on your page onto which you can draw and this is what the majority of the RGraph library is based on.
The drawing is done by JavaScript and there's a whole bunch of functions available to you to draw shapes and lines with.
Because <canvas> uses a "fire and forget" methodology there is no DOM for you to get references to shapes already drawn on the canvas - so you must remember the coordinates of the shapes yourself.
It's because of this that the <canvas> tag is so fast.
Despite this though there is a Path2D object that has been added, along with other new features that have been specified by the W3C that will allow you to retain path information and test at a later time for hits etc.
The Path2D object is described here.
So on to the information!
The canvas element
The canvas element
The getContext() function
The toDataURL() function
The canvas state
The save() function
The restore() function
Drawing rectangles
The clearRect() function
The strokeRect() function
The fillRect() function
Path functions
The beginPath() function
The closePath() function
The moveTo() function
The lineTo() function
The rect() function
The arc() function
The arcTo() function
The ellipse() function
The quadraticCurveTo() function
The bezierCurveTo() function
The stroke() function
The fill() function
The clip() function
The isPointInPath() function
The isPointInStroke() function
The Path2D object
Linedash options
The getLineDash() function
The setLineDash() function
The lineDashOffset property
Color options
The fillStyle property
The strokeStyle property
Linear gradients
Radial gradients
The createPattern() function
Images
The drawImage() function
Transformations
The translate() function
The rotate() function
The scale() function
The transform() function
The setTransform() function
Text
The font property
The textAlign property
The textBaseLine property
The fillText() function
The strokeText() function
The measureText() function
Shadow properties
The shadowColor property
The shadowBlur property
The shadowOffsetX property
The shadowOffsety property
Pixel manipulation
The ImageData object
The get Image Data() function
The put Image Data() function
The create Image Data() function
Other
The lineWidth property
The lineJoin property
The lineCap property
The setLineDash() function
The getLineDash() function
The lineDashOffset property
The globalAlpha property
The global Composite Operation property
CSS transision charts
// must use this jquery
<--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">