Customize Frame Size

To customize or adjust the frame size of your specified view.

Function Call

ObjName.resizeFrameSize(width, height)

Parameters

Parameter NameDescription
width

Number / Percentage

Enter the width of the view's frame size in pixel or percentage.

height

Number / Percentage

Enter the height of the view's frame size in pixel or percentage.

Sample Response

html> 

zanalytics JS API  

px px
 

Sample Code:

Copied<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ZAnalytics JS API</title>
    <link rel="icon" type="image/x-icon" href="https://analytics.zoho.com/favicon.ico">
<script src="https://downloads.zohocdn.com/zanalyticslib/jsapi/v1/zanalytics.min.js"></script>
</head>
<style>
    input, button {
        background: #fff;
        border-radius: 3px;
        border: 1px solid #b8b8b8;
        height: 30px;
        margin: 5px;
    }
    input {
        width: 50px;
        padding-left: 10px;
    }
    button {
        cursor: pointer;
    }
</style>
<body>
    <div class="viewcontainer">
        <div class="row" style="float: left;">
            <label>Customize Frame Size:</label><br>
            <label>Width: </label><input type="text" id="width" placeholder="Width" value='800'>px
            <label style="margin-left: 15px;">Height: </label><input type="text" id="height" placeholder="Height" value='300'>px
            <button onclick="resizeFrame()"> ReSize </button>
        </div>
        <div id="analysisView"></div>
        <script>
            const containerDiv = document.getElementById("analysisView");
            const url = "https://analytics.zoho.com/open-view/2588560000000010083";
            const options = {
                width: '100%',
                height: 600
            };
            const vizObj = new ZAnalyticsLib(containerDiv, url, options);
            vizObj.createViz();

            function resizeFrame() {
                vizObj.resizeFrameSize(document.getElementById('width').value, document.getElementById('height').value);
            }
        </script>
    </div>
</body>
</html>