resize issue

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

resize issue

Post by SenSeo » Thu Jan 05, 2017 5:00 pm

Hi,

I have designed a page to create a chart with responsive support.The canvas with and height is calculated based on parent's div width and height and drawn the chart. But the problem is that graph is not displayed clearly .

I have attached my sample code here

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>TeeChart JavaScript DOM Tooltips Example</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Example, use an optional <style> .teetip {...} to customize tooltip: -->
    <style type="text/css">
        .teetip {
            margin-left: 15px !important;
            background: yellow !important;
            color: navy !important;
            font-family: Tahoma !important;
        }

         .box-header1 {
        width: auto;
        height: auto;
        color: #444;
        display: block;
        padding: 10px;
        position: relative;
        background-color: rebeccapurple;
    }

    </style>

    <!--[if lt IE 9]>
        <script src="../../src/excanvas/excanvas_text.js"></script>
        <script src="../../src/excanvas/canvas.text.js"></script>
    <![endif]-->

    <script src="../../src/teechart.js" type="text/javascript"></script>

    <script type="text/javascript">

var Chart1; //drawTestChart

var Chart1, tip, scaling = 0, poindex = -1;

function drawTestChart() {
    Chart1 = new Tee.Chart("canvas");
    Chart1.addSeries(new Tee.Line([5, 3, 2, 7, 1, 6, 4, 5, 1, 0, 10])).format.stroke.size = 4;

    Chart1.axes.left.format.stroke.fill = "green";

    Chart1.axes.left.title.text = "Left Axis";
    Chart1.axes.bottom.title.text = "Bottom Axis";

    Chart1.title.text = "Mouse-over Tooltips";
    Chart1.title.format.font.style = "18px Verdana";

    Chart1.series.items[0].format.stroke.fill = "darkorange";
    Chart1.series.items[0].pointer.visible = true;

    Chart1.panel.format.stroke.fill = "";
    Chart1.panel.format.shadow.visible = true;

    tip = new Tee.ToolTip(Chart1);
    tip.format.font.style = "16px Tahoma";
    tip.render = "canvas";

    Chart1.tools.add(tip);

    Chart1.series.items[0].hover.line = false;

    Chart1.series.items[0].pointer.transform = function (x, y, index) {
        var p = Chart1.series.items[0].pointer;

        if ((scaling != 0) && (poindex == index)) {
            Chart1.ctx.translate(-x, -y);
            Chart1.ctx.scale(scaling, scaling);
            p.format.fill = "red";
        }
        else
            p.format.fill = Chart1.series.items[0].format.fill;
    }

    tip.onshow = function (tool, series, index) { scaling = 2; poindex = index; }
    tip.onhide = function () { scaling = 0; poindex = -1; }
    tip.ongettext = function (tool, text) { return "Text:\n" + text; }

    //changeTheme(Chart1, "minimal");
    // Chart1.draw();
    resize();
}


function resize() {
    var body = document.body, canvas = Chart1.canvas;


    canvas.style.width = '100%';
    canvas.style.height = '100%';
    canvas.width = canvas.width;
    canvas.height = canvas.height;
    Chart1.bounds.width = canvas.width;
    Chart1.bounds.height = canvas.height;
    Chart1.draw();
   
}
function resize1() {
    var body = document.body, canvas = Chart1.canvas;
        var width = 90, height = 50;  // <--- % PERCENT
    canvas.width = width * body.clientWidth / 100;
    canvas.height = height * body.clientHeight / 100;
    Chart1.bounds.width = canvas.width;
    Chart1.bounds.height = canvas.height;
    console.log("-----canvas width * height", canvas.width, canvas.height)
    Chart1.draw();
}


    </script>
</head>
<body onload="drawTestChart()" >
    <div class="box-body">
        <div class="row">
           
                <div class="col-md-9" style="padding-left:30px;">
                    <span class="box-title">Demo report summary</span>
                    <p>&nbsp;</p>
                    <br>
                    <div class="box-header1">
                        <div style="margin:0; padding:0; min-height:100%; height:80%; ">
                            <canvas id="canvas" style="padding-left: 0;
                 padding-right: 0;
                    margin-left: 0;
                    margin-right: 0;
                    display: block;"></canvas>
                        </div>
                    </div>
               </div>
            </div>
    </div>
   
</body>
</html>

Is there any way I can fix this issue?

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

Re: resize issue

Post by Yeray » Mon Jan 09, 2017 3:15 pm

Hello,

You an use this example as reference.
In your example, resize1() function works better for me than resize(), just modify the html to include the height:

Code: Select all

<html style="height: 100%">
and the body tag to include the onresize event and the height:

Code: Select all

<body onload="drawTestChart()" onresize="resize1()" style="height: 100%">
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