I have a chart with a ColorGrid series that is using a Tee.Scroller as well. If I invert the left axis, the scroller will not render correctly.
Here is some sample code to show the issue.
HTML
Code: Select all
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js"></script>
<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-3d.js"></script>
<body onload="draw()">
<div class="x_content">
<br><canvas id="canvas" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
<br/>
<canvas id="canvas2" width="550" height="80" style="margin-left : 55px;">
This browser does not seem to support HTML5 Canvas.
</canvas>
<br/>
<input type="checkbox" id="range" onclick="scroller.useRange(this.checked);" checked>Range
<input type="checkbox" id="invert" onclick="scroller.invertThumb(this.checked);">Inverted
<br/>
<span id="data" />
</div>
</body>
Code: Select all
var Chart1, scroller, grid;
function draw() {
Chart1 = new Tee.Chart("canvas");
Chart1.axes.left.inverted=true;
grid = Chart1.addSeries(new Tee.ColorGrid());
grid.horizAxis="both";
grid.vertAxis="both";
addSampleData(0);
Chart1.title.text = "Chart Scroller";
Chart1.panel.transparent = true;
Chart1.legend.visible = false;
Chart1.axes.bottom.setMinMax(200, 499);
Chart1.zoom.enabled = false;
Chart1.scroll.mouseButton = 0;
Chart1.cursor = "pointer";
Chart1.scroll.direction = "horizontal";
scroller = new Tee.Scroller("canvas2", Chart1);
scroller.onChanging = function(s, min, max) {
document.getElementById("data").textContent = "Showing data from " + min.toFixed(0) + " to " + max.toFixed(0);
}
// changeTheme(Chart1, "minimal");
Chart1.draw();
}
function addSampleData(index) {
if (index==="0") {
grid.data.values=[ [23,15,12, 8,39,50,34],
[19, 7,31,23,12,40,27],
[ 1,26,18,39,20, 6,11]
];
grid.dataChanged=true;
grid.decimals = 2;
}
else
if (index==="1")
grid.addRandom(200); // 200x200
else
if (index==="2")
grid.addRandom(400); // 400x400
else
grid.addRandom(100,50); // 100x50
grid.chart.zoom.reset();
}