HOWTO: Show a static Y-axis
In the past, showing a custom static y-axis meant drawing the entire y-axis
yourself. However now, with
the drawing api y-axis object,
(and also the X-axis object)
a lot of the coding that was necessary to achieve a custom
y-axis has been eliminated. This example shows you how you can
implement it.
The necessary HTML
This is the necessary html code that positions the second canvas for the axes over the top of the first. Relative and
absolute positioning is used so that the canvas doesn't move and is directly over the first canvas.
<div style="position: relative">
<canvas id="axes" width="41" height="200" style="position: absolute; top: 0; left: 0; z-index: 3"></canvas>
<div style="width: 600px; overflow: auto">
<canvas id="cvs" width="1000" height="200"></canvas>
</div>
</div>
The JavaScript to produce the chart
And here is the javascript to produce the chart. Usually, when doing custom drawing on your canvas and using dynamic features
(eg tooltips), you would need to use the draw custom RGraph event so that your drawing is repeated after the canvas
has been cleared. Here though, because the axes are being drawn on a separate canvas that isn't being redrawn, that isn't
necessary.
<script>
// This is the code that produces the chart
new RGraph.Line({
id: 'cvs',
data: [4,6,8,5,9,6,4,8,4,6,15,2],
options: {
xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
xaxis: false,
yaxis: false,
yaxisLabels: false,
marginInner: 25,
tickmarksStyle: 'endcircle',
marginInner: 25
}
}).draw();
new RGraph.Drawing.YAxis({
id: 'axes',
x: 40,
options: {
yaxisScaleMax: line.scale2.max,
colors: ['black'],
textSize: 14
}
}).draw();
</script>