A basic example of the drawing API text object being used as a button to switch between charts
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.drawing.text.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
var canvas = document.getElementById('cvs');
// Draw the Line chart when the page loads
drawBar1();
// Draw the line chart
function drawBar1 ()
{
RGraph.Reset(canvas);
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,3,5,2,6],
options: {
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
hmargin: 5,
linewidth: 5
}
}).draw()
drawButtons();
}
// Draw the Bar chart
function drawBar2 ()
{
RGraph.reset(canvas);
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,3,5,2,6],
options: {
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
colors: ['Gradient(white:blue)']
}
}).draw();
drawButtons();
}
// Draw the buttons (using the drawing API text object)
function drawButtons ()
{
var text1 = new RGraph.Drawing.Text({
id: 'cvs',
x: 600 - 25 - 5,
y: 25 + 5,
text: 'Chart one',
options: {
font: 'Arial',
size: 14,
bounding: true,
boundingFill: 'white',
boundingShadow: true,
boundingShadowColor: '#bbb',
boundingShadowOffsetx: 1,
boundingShadowOffsety: 1,
halign: 'right',
valign: 'top',
colors: ['blue'],
textAccessiblePointerevents: false
}
}).on('click', function (e, shape)
{
drawBar1();
}).on('mousemove', function ()
{
return true;
}).draw()
var text2 = new RGraph.Drawing.Text({
id: 'cvs',
x: 600 - 25 - 5 - 5 - text1.coords[0][2],
y: 25 + 5,
text: 'Chart two',
options: {
font: 'Arial',
size: 14,
bounding: true,
boundingFill: 'white',
boundingShadow: true,
boundingShadowColor: '#bbb',
boundingShadowOffsetx: 1,
boundingShadowOffsety: 1,
halign: 'right',
valign: 'top',
colors: ['blue'],
textAccessiblePointerevents: false
}
}).on('click', function (e, shape)
{
drawBar2();
}).on('mousemove', function ()
{
return true;
}).draw().
text1.onmousemove =
text2.onmousemove = function (e, shape)
{
e.target.style.cursor = 'pointer';
}
}
</script>