Legend is not properly displayed on mobile view.

TeeChart for Javascript for the HTML5 Canvas

Legend is not properly displayed on mobile view.

Postby SenSeo » Sat Jul 02, 2016 12:19 pm

We have developed a page to display a chart with responsive and targeting for multiple browsers and mobile devices.We have written the below logic to display the legend at the bottom of the chart and woks fine for desktop view but facing an issue for mobile devices. When I tested it using Iphone5 and 6 device the legend is not displayed at the bottom but it displays when I change the legend position from bottom to top or left and right. I have attached an image for Iphone 5.

Is there any thing I need to do to display legend for mobile view?


Code: Select all

//------------------ 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;
                //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
            resize(chart1);
            
            
   //----------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);
        }
Attachments
Legend_mobile issue.PNG
Legend_mobile issue.PNG (17.66 KiB) Viewed 393 times
SenSeo
Newbie
Newbie
 
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Legend is not properly displayed on mobile view.

Postby Yeray » Mon Jul 04, 2016 9:45 am

Hello,

I've taken you code and completed it adding a simple Line series with some random values. I've uploaded the test example here so we can check how does it look in different devices.
Here is how it looks in iPhone 5 / iOS 9.3 simulator:
Simulator Screen Shot 04 Jul 2016 11.35.22.png
Simulator Screen Shot 04 Jul 2016 11.35.22.png (70.36 KiB) Viewed 407 times
Best Regards,

ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image ImagePlease read our Bug Fixing Policy
Yeray
Site Admin
Site Admin
 
Posts: 8241
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia

Re: Legend is not properly displayed on mobile view.

Postby SenSeo » Mon Jul 04, 2016 1:40 pm

Hi,

Thank you for your reply. I am using Google device toolbar to test the mobile devices like iphone 5/6 . I tested the demo application that is shared here and works fine but legend part is still cut down from the chart(it seems incomplete) when I tested my application , don't know what is wrong in my application.However I found a way to fix this issue. To fix this issue I have increased and given fixed height, in that case the legend is displaying properly without cut.

Below is the code which I have added in the HTML page. Please advise me if you find anything wrong in this code.

Code: Select all
<div id="divTrendChart" style="margin:0px auto;text-align:center; min-height:400px;max-height:100%; height:100%; width:100%; overflow:auto">
                            <canvas id="chart1" style="height:400; width:800; align: center;" >
                                 
                                This browser does not seem to support HTML5 Canvas.
                            </canvas>
                        </div>
SenSeo
Newbie
Newbie
 
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am


Return to Javascript / HTML5

Who is online

Users browsing this forum: No registered users and 1 guest

cron