Legend is not properly displayed on mobile view.

[SenSeo]

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);
        }

[Yeray]

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 (70.36 KiB) Viewed 10412 times

[SenSeo]

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>