Legend is not properly displayed on mobile view.

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

Legend is not properly displayed on mobile view.

Post by 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 9002 times

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

Re: Legend is not properly displayed on mobile view.

Post by 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 9014 times
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: Legend is not properly displayed on mobile view.

Post by 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>

Post Reply