I have a problem with displaying the X-axis at the bottom of a Scatter-type graph when my Y values are negative. The X-Axis keeps showing at the top edge of the canvas (while the X labels are correctly positioned).
JS code used below, the div around the canvas has a black background which is why the axis and labels are white. Can anybody tell me what I am missing please ? (I'm new to RGraph, this is my first trial).
Thx Serge
// random 100 data points, x in 100..200, y in -120..-50
var data = [];
for(let i = 0; i < 100; i++) data.push([100+i, -50 - Math.random() * 70]);
var xmin = data[0][0], xmax = data[data.length - 1][0], ymin = data[0][1], ymax = data[0][1];
for(let i = 1; i < data.length; i++) { if(data[i][1] < ymin) ymin = data[i][1]; if(data[i][1] > ymax) ymax = data[i][1]; }
// scatter graph with white text, green lines, no ticks
var chart = new RGraph.Scatter({
id: 'chart',
data: data,
options: { backgroundGridDotted: true, marginLeft: 60, marginBottom: 50, line: true, tickmarksStyle: null, textColor: 'white',
xaxisScale: true, xaxisScaleMin: xmin, xaxisScaleMax:xmax, xaxisColor: 'white', xaxisTitle: 'Frequency (MHz)',
yaxisScaleMin: ymin, yaxisScaleMax: ymax, yaxisColor: 'white', yaxisTitle: 'Received Power Level (dBm)'
}
}).draw();
Try this:
https://codepen.io/rgraph/full/QWKbRwr
(use the "change view" button to see the code)
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.xaxis.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.scatter.js"></script>
<div style="display: inline-block; background-color: black">
<canvas id="cvs" width="600" height="250"></canvas>
</div>
<script>
// random 100 data points, x in 100..200, y in -120..-50
var data = [];
for(let i = 0; i < 100; i++) data.push([100+i, -50 - Math.random() * 70]);
var xmin = data[0][0], xmax = data[data.length - 1][0], ymin = data[0][1], ymax = data[0][1];
for(let i = 1; i < data.length; i++) { if(data[i][1] < ymin) ymin = data[i][1]; if(data[i][1] > ymax) ymax = data[i][1]; }
// scatter graph with white text, green lines, no ticks
scatter = new RGraph.Scatter({
id: 'cvs',
data: data,
options: {
backgroundGridDotted: true,
marginLeft: 60,
marginBottom: 50,
line: true,
tickmarksStyle: null,
textColor: 'white',
xaxisScale: true,
xaxisScaleMin: xmin,
xaxisScaleMax:xmax,
xaxisColor: 'white',
xaxisTitle: 'Frequency (MHz)',
yaxisScaleMin: ymin,
yaxisScaleMax: ymax,
yaxisColor: 'white',
yaxisTitle: 'Received Power Level (dBm)',
xaxis: false,
yaxisTickmarksLastBottom: false
}
}).trace();
new RGraph.Drawing.XAxis({
id: 'cvs',
y: scatter.canvas.height - scatter.marginBottom,
options: {
xaxisLabels: ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'],
xaxisTickmarksCount: 8,
xaxisColor: 'white',
marginLeft: scatter.get('marginLeft'),
marginRight: scatter.get('marginRight'),
xaxisTickmarksLastLeft: false
}
}).draw();
</script>