How to show a custom static Y axis

  Read comments...

Summary
A guide for showing a custom static Y axis. A static Y axis can be useful when you have a wide chart but limited space available. The Y axis is kept in view when you scroll

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 necessary to achieve a custom Y axis has been eliminated. This example shows you how you can achieve it.


1. 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>

2. 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 ondraw 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>
    window.onload = (function ()
    {
        // This is the code that produces the chart
        var line = new RGraph.Line({
            id: 'cvs',
            data: [4,6,8,5,9,6,4,8,4,6,15,2],
            options: {
                labels: ['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'],
                noxaxis: true,
                noyaxis: true,
                ylabels: false,
                hmargin: 25,
                tickmarks: 'endcircle'
            }
        }).draw();
        
        var yaxis = new RGraph.Drawing.YAxis({
            id: 'axes',
            x: 40,
            options: {
                max: line.max,
                colors: ['black'],
                title: 'A static Y axis'
            }
        }).draw();
    })
</script>

Share RGraph
X

Comments