Draw dash line - mobile issue

TeeChart for Javascript for the HTML5 Canvas
Post Reply
SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Draw dash line - mobile issue

Post by SenSeo » Mon Jul 04, 2016 2:05 pm

Hi,

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>
Attachments
RedAlertLine_DesktopView.PNG
Screenshot for desktop browser
RedAlertLine_DesktopView.PNG (26.27 KiB) Viewed 4012 times
RedAlertLine_Mobiledevice.PNG
screenshot for mobile view(Iphone 6)
RedAlertLine_Mobiledevice.PNG (24.8 KiB) Viewed 4009 times

Yeray
Site Admin
Site Admin
Posts: 8848
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Draw dash line - mobile issue

Post by Yeray » Tue Jul 05, 2016 10:34 am

Hello,

Try drawing the lines with moveTo/lineTo instead of using the rectangle function. Ie:

Code: Select all

                var c = chart1.ctx;
                c.beginPath();
                c.moveTo(xBelowAlarm1, yBelowAlarm1);
                c.lineTo(xBelowAlarm2, yBelowAlarm2);
                c.lineWidth = myFormatBelowAlarm.stroke.size;
                c.strokeStyle = myFormatBelowAlarm.stroke.fill;
                c.setLineDash(myFormatBelowAlarm.stroke.dash);
                c.stroke();

                c.beginPath();
                c.moveTo(xAboveAlarm1, yAboveAlarm1);
                c.lineTo(xAboveAlarm2, yAboveAlarm2);
                c.lineWidth = myFormatAboveAlarm.stroke.size;
                c.strokeStyle = myFormatAboveAlarm.stroke.fill;
                c.setLineDash(myFormatAboveAlarm.stroke.dash);
                c.stroke();
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Draw dash line - mobile issue

Post by SenSeo » Mon Jul 11, 2016 5:57 am

Thanks. It is working now

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Draw dash line - mobile issue

Post by SenSeo » Thu Jul 14, 2016 1:05 pm

Hello,

Below error is thrown when I tested this functionality using browser IE 10.Does IE 10 support this function "setLineDash() for draw the dot line on chart?

Object doesn't support property or method 'setLineDash'

Yeray
Site Admin
Site Admin
Posts: 8848
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Draw dash line - mobile issue

Post by Yeray » Fri Jul 15, 2016 10:24 am

Hello,

According to Mozilla's documentation, setLineDash is supported in IE from version 11:
https://developer.mozilla.org/en-US/doc ... etLineDash
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply