I have written the below logic to draw the dash line that is displayed on the graph and works fine for desktop browsers. The problem is that the solid line is drawn when I tested using mobile devices and google mobile device tool. Also the the line( dash or sold ) is not displayed when I tested using IE 10 and Edge.
Is there any way to fix this issue? I wanted to draw only dash line for all mobile and desktop browsers. I attached the screenshot here for your reference
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Legend Position</title>
<!--[if lt IE 9]>
<script src="http://www.steema.com/files/public/teechart/html5/latest/src/excanvas/excanvas_text.js"></script>
<script src="http://www.steema.com/files/public/teechart/html5/latest/src/excanvas/canvas.text.js"></script>
<![endif]-->
<script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
<script type="text/javascript">
var chart1;
var maxBelowAlarm = 550;
var minAboveAlarm = 120;
var maxAboveAlarm = 120;
var maxLowTargetRange = 500;
var maxHighTargetRange = 600;
var maxAboveTarget = 0;
var maxBelowTarget = 0;
function draw() {
chart1=new Tee.Chart("canvas");
var line1 = new Tee.Line();
line1.addRandom();
chart1.addSeries(line1);
//------------------ Create Legend with customized image.
chart1.axes.left.title.format.font.setSize(20);
chart1.axes.bottom.title.format.font.setSize(20);
chart1.axes.left.labels.decimals = 1;
chart1.axes.left.scroll = false;
//Y axis
chart1.axes.left.setMinMax(10, 600);
chart1.axes.left.increment = 30;
//Legend
chart1.legend.title.visible = false;
chart1.legend.title.format.font.fill = "rgba(0,0,0,0.6)";
chart1.legend.title.format.font.setSize(12);
chart1.legend.format.font.setSize(12);
chart1.legend.format.stroke.fill = "silver";
chart1.legend.format.stroke.size = 3;
chart1.legend.format.font.shadow.visible = false;
chart1.legend.format.shadow.visible = false;
chart1.legend.position = "bottom";
chart1.legend.symbol.width = 20;
chart1.legend.format.gradient.visible = true;
chart1.legend.symbol.format.stroke.dash = [4, 4];
chart1.legend.symbol.style = "line";
chart1.legend.symbol.oldSymbolDraw = chart1.legend.symbol.draw;
chart1.legend.symbol.draw = function (series, index, x, y) {
var f = this.format = new Tee.Format(chart1);
var c = chart1.ctx, fhover = tryHover(series, index, chart1), old = f.fill, olds = f.stroke;
f.fill = series.legendColor(index);
f.stroke.fill = series.legendColor(index);
c.z = -0.01;
switch (series.pointer.style) {
case "ellipse": {
f.ellipse(x + this.width * 0.5, y, 10, 10);
break;
}
case "barSymbol": {
f.rectangle(x + 5 * 2, y - 5.5, 1, 14);
break;
}
case "lineSymbol": {
f.rectangle(x + 5 * 0.5, y - 5.5, 10, 14);
break;
}
case "targetSymbolRectangle": {
f.rectangle(x + 5 * 0.5, y - 4.5, 14, 12);
break;
}
default: {
this.oldSymbolDraw(series, index, x, y);
break;
}
}
}
chart1.draw(); //get positions
DrawRectangeForMinMaxAlertLine(chart1, 10);
resize(chart1);
}
function DrawRectangeForMinMaxAlertLine(chart1, dashSize) {
//Change grid background color.
//Set background color for Below Alarm threshold. Red
var myFormatBelowAlarm = new Tee.Format(chart1);
myFormatBelowAlarm.stroke.fill = "red";
myFormatBelowAlarm.stroke.size = 1.5;
myFormatBelowAlarm.stroke.dash = [dashSize, dashSize];
myFormatBelowAlarm.gradient.visible = true;
myFormatBelowAlarm.gradient.colors = ["red"];
myFormatBelowAlarm.transparency = 0.1;
//Set background color for Above Alarm threshold. Red
var myFormatAboveAlarm = new Tee.Format(chart1);
myFormatAboveAlarm.stroke.fill = "red";
myFormatAboveAlarm.stroke.size = 1.5;
myFormatAboveAlarm.stroke.dash = [dashSize, dashSize];
myFormatAboveAlarm.gradient.visible = true;
myFormatAboveAlarm.gradient.colors = ["red"];
myFormatAboveAlarm.transparency = 0.1;
//Set background color for Low Target range. Green
var myFormatTargetRangeLow = new Tee.Format(chart1);
myFormatTargetRangeLow.stroke.fill = "#95CE39";
myFormatTargetRangeLow.stroke.size = 0;
myFormatTargetRangeLow.gradient.visible = true;
myFormatTargetRangeLow.gradient.colors = ["#95CE39"];
myFormatTargetRangeLow.transparency = 0.4;
var setDashValue = 0;
//Draw the dashed line and background color on trend report background.
chart1.series.items[0].beforeDraw = function () {
//Set background color for Below Alarm threshold. Red
var xBelowAlarm1 = chart1.axes.bottom.startPos,
yBelowAlarm1 = chart1.axes.left.calc(maxBelowAlarm),
xBelowAlarm2 = chart1.axes.bottom.endPos,
yBelowAlarm2 = chart1.axes.left.calc(maxBelowAlarm + setDashValue);
// X,Y, Width, Height
myFormatBelowAlarm.rectangle(xBelowAlarm1, yBelowAlarm1, xBelowAlarm2 - xBelowAlarm1, yBelowAlarm2 - yBelowAlarm1);
//Set background color for Above Alarm threshold. Red
var xAboveAlarm1 = chart1.axes.bottom.startPos,
yAboveAlarm1 = chart1.axes.left.calc(minAboveAlarm),
xAboveAlarm2 = chart1.axes.bottom.endPos,
yAboveAlarm2 = chart1.axes.left.calc(minAboveAlarm + setDashValue);
// X,Y, Width, Height
myFormatAboveAlarm.rectangle(xAboveAlarm1, yAboveAlarm1, xAboveAlarm2 - xAboveAlarm1, yAboveAlarm2 - yAboveAlarm1);
}
}
function tryHover(series,index) {
if (series.hover.enabled) {
var sv=chart1.legend.showValues();
if ((sv && (series.over==index)) ||
((!sv) && (series.over>=0)))
return series.hover;
}
return null;
}
//----------Resize the chart
function resize(Chart1) {
if (!Chart1) return;
var canvas = Chart1.canvas;
var proposedWidth = 81;
var proposedHeight = 72;
if (screen.height <= 900)
proposedHeight = 72;
else if (screen.height > 910 && screen.height <= 1200)
proposedHeight = 55;
//set width to canvas
var w = canvas.parentNode.clientWidth;
if (canvas.parentNode.clientWidth == 0) {
w = proposedWidth * window.innerWidth / 100;
}
canvas.width = w;
canvas.setAttribute('width', "" + w + "px");
canvas.style.width = "" + w + "px";
//set height to canvas
var h = proposedHeight * window.innerHeight / 100;
//Adjust the height and set min height
if (h < 400) h = 400;
canvas.height = h;
canvas.setAttribute('height', "" + h + "px");
canvas.style.height = "" + h + "px";
Chart1.canvas.width = w;
Chart1.canvas.height = h;
Chart1.bounds.width = w;
Chart1.bounds.height = h;
Chart1.draw();
console.log(Chart1);
}
</script>
</head>
<body onload="draw()" onresize="resize(chart1)">
<center>
<br><canvas id="canvas" width="800" height="600">
This browser does not seem to support HTML5 Canvas.
</canvas>
</center>
</body>
</html>
