Most of the time the axis of the dotchart is limited by the most extreme datapoints in your chart. However I provide two examples where the scale on the axis is not as expected. One example shows that the axis sometimes have a larger span than the most extreme datapoints. In the other example the chart is misleading because datapoints are not correctly aligned to the axis. This example should be easy to paste into a new webpage.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bug in dotchart?</title>
<script src="./dotchart_example_files/raphael.js"></script>
<script src="./dotchart_example_files/g.raphael.js"></script>
<script src="./dotchart_example_files/g.dot.js"></script>
<script>
function DrawAll() {
//First parameters are the same for all charts
var offsetX = 10;
var offsetY = 10;
var width = 300;
var height = 300;
var values = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var axisx = ["", "", "", "", "", "", "", "", "", "", ""];
var axisy = ["", "", "", "", "", "", "", "", "", "", ""];
//These are specific for the first chart.
var okX = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var okY = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var tenSteps = 10;
var okCanvas = Raphael("paper", width, height);
var okChart = okCanvas.dotchart(offsetX, offsetY, width, height, okX, okY, values, { symbol: "o", max: 3, heat: true, axis: "0 0 1 1", axisxstep: tenSteps, axisystep: tenSteps, axisxlabels: axisx, axisxtype: "+", axisytype: "+", axisylabels: axisy, opacity: 0.8 })
//These are used in both problem charts.
var weirdX = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var weirdY = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var weirdCanvas1 = Raphael("paper1", width, height);
var weirdChart1 = weirdCanvas1.dotchart(offsetX, offsetY, width, height, weirdX, weirdY, values, { symbol: "o", max: 3, heat: true, axis: "0 0 1 1", axisxstep: tenSteps, axisystep: tenSteps, axisxlabels: axisx, axisxtype: "+", axisytype: "+", axisylabels: axisy, opacity: 0.8 })
//This is the only parameter change.
var nineSteps = 9;
var weirdCanvas2 = Raphael("paper2", width, height);
var weirdChart2 = weirdCanvas2.dotchart(offsetX, offsetY, width, height, weirdX, weirdY, values, { symbol: "o", max: 3, heat: true, axis: "0 0 1 1", axisxstep: nineSteps, axisystep: nineSteps, axisxlabels: axisx, axisxtype: "+", axisytype: "+", axisylabels: axisy, opacity: 0.8 })
}
</script>
</head>
<body onload="DrawAll()">
<h1>OK scale</h1>
<h2>Axis ends where the most extreme datapoints are.</h2>
<br />
<div id="paper"></div>
<br />
<br />
<h1>Weird scale1</h1>
<h2>Axis do not start at (1,1) as expected.</h2>
<div id="paper1"></div>
<br />
<br />
<h1>Weird scale2</h1>
<h2>Count the marked numbers along the axis. Number 5 is missing.</h2>
<h2>Also the points seems misaligned to the axis. Check point (1,1) against mark on the axis.</h2>
<div id="paper2"></div>
</body>
</html>
Most of the time the axis of the dotchart is limited by the most extreme datapoints in your chart. However I provide two examples where the scale on the axis is not as expected. One example shows that the axis sometimes have a larger span than the most extreme datapoints. In the other example the chart is misleading because datapoints are not correctly aligned to the axis. This example should be easy to paste into a new webpage.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bug in dotchart?</title>
<script src="./dotchart_example_files/raphael.js"></script>
<script src="./dotchart_example_files/g.raphael.js"></script>
<script src="./dotchart_example_files/g.dot.js"></script>
<script>
function DrawAll() {
//First parameters are the same for all charts
var offsetX = 10;
var offsetY = 10;
var width = 300;
var height = 300;
var values = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var axisx = ["", "", "", "", "", "", "", "", "", "", ""];
var axisy = ["", "", "", "", "", "", "", "", "", "", ""];
//These are specific for the first chart.
var okX = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var okY = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var tenSteps = 10;
var okCanvas = Raphael("paper", width, height);
var okChart = okCanvas.dotchart(offsetX, offsetY, width, height, okX, okY, values, { symbol: "o", max: 3, heat: true, axis: "0 0 1 1", axisxstep: tenSteps, axisystep: tenSteps, axisxlabels: axisx, axisxtype: "+", axisytype: "+", axisylabels: axisy, opacity: 0.8 })
//These are used in both problem charts.
var weirdX = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var weirdY = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var weirdCanvas1 = Raphael("paper1", width, height);
var weirdChart1 = weirdCanvas1.dotchart(offsetX, offsetY, width, height, weirdX, weirdY, values, { symbol: "o", max: 3, heat: true, axis: "0 0 1 1", axisxstep: tenSteps, axisystep: tenSteps, axisxlabels: axisx, axisxtype: "+", axisytype: "+", axisylabels: axisy, opacity: 0.8 })
//This is the only parameter change.
var nineSteps = 9;
var weirdCanvas2 = Raphael("paper2", width, height);
var weirdChart2 = weirdCanvas2.dotchart(offsetX, offsetY, width, height, weirdX, weirdY, values, { symbol: "o", max: 3, heat: true, axis: "0 0 1 1", axisxstep: nineSteps, axisystep: nineSteps, axisxlabels: axisx, axisxtype: "+", axisytype: "+", axisylabels: axisy, opacity: 0.8 })
}
</script>
</head>
<body onload="DrawAll()">
<h1>OK scale</h1>
<h2>Axis ends where the most extreme datapoints are.</h2>
<br />
<div id="paper"></div>
<br />
<br />
<h1>Weird scale1</h1>
<h2>Axis do not start at (1,1) as expected.</h2>
<div id="paper1"></div>
<br />
<br />
<h1>Weird scale2</h1>
<h2>Count the marked numbers along the axis. Number 5 is missing.</h2>
<h2>Also the points seems misaligned to the axis. Check point (1,1) against mark on the axis.</h2>
<div id="paper2"></div>
</body>
</html>