A chart where the Y axis is static and doesn't move when you scroll from left to right.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.drawing.yaxis.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<div style="position: relative; width: 600px; height: 220px"> <canvas id="axes" width="41" height="200" style="position: absolute; top: 5px; left: 0; z-index: 3"></canvas> <div style="width: 600px; overflow: auto; position: absolute; left: 41px"> <canvas id="cvs" width="1000" height="200"></canvas> </div> </div>This is the code that generates the chart:
<script>
// This is the code that produces the chart
line = 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'],
tooltipsCoordsPage: true,
xaxis: false,
yaxis: false,
yaxisLabels: false,
marginInner: 25,
tickmarksStyle: 'endcircle',
marginLeft: 0
}
}).draw();
var yaxis = new RGraph.Drawing.YAxis({
id: 'axes',
x: 40,
options: {
yaxisScaleMax: line.max,
colors: ['black']
}
}).draw();
</script>