Skip to Content
0

How to Implement (Initial Zoom) property:plotArea.window.start and end for VizFrame Bubble chart

Apr 10 at 01:01 PM

44

avatar image
Former Member

I am implementing initial zoom in bubble chart using Sapui5. I have set values of properties plotArea.window.start and plotArea.window.end for zooming on specific point. I want to zoom in between 30 and 50 points on Y-axis so i have set plotArea.window.start and plotArea.window.end values accordingly but still it is not working.

<code><!DOCTYPE html>
<html>

<head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
    <title>test</title>

    <script id='sap-ui-bootstrap' type='text/javascript' 
        src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' 
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.ui.commons,sap.ui.ux3,sap.suite.ui.commons,sap.viz'>
    </script>
    <script>
        //---------------------  Chart VIZFrame --------------------------
        // create a VizFrame
        var oVizFrame = new sap.viz.ui5.controls.VizFrame({
            'width': '600px',
            'height': '300px',
            'vizType': 'bubble',
            'uiConfig': {
                'applicationSet': 'fiori'
            },
            'vizProperties': {}
        });
        var data = [{
                "diameter": "650",
                "xaxis": "5",
                "yaxis": "97.0"
            },
            {
                "diameter": "40",
                "xaxis": "1",
                "yaxis": "45"
            },
            {
                "diameter": "26.5",
                "xaxis": "0.5",
                "yaxis": "35"
            }
        ];

        var amModel = new sap.ui.model.json.JSONModel({
            'businessData': data
        });

        var xAxisName = "X_Axis";
        var yAxisName = "Y_Axis";
        var zAxisName = "Z_Axis";

        var oDataset = new sap.viz.ui5.data.FlattenedDataset({
            dimensions: [{
                identity: "textTooltip",
                name: yAxisName,
                value: "{yaxis}"
            }],
            measures: [{
                    name: xAxisName,
                    value: "{xaxis}"
                },
                {
                    name: yAxisName,
                    value: "{yaxis}"
                },
                {
                    name: zAxisName,
                    value: "{diameter}"
                }
            ],
            data: {
                path: "/businessData"
            }
        });

        oVizFrame.setDataset(oDataset);
        oVizFrame.setModel(amModel);

        var xAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
            'uid': "valueAxis",
            'type': "Measure",
            'values': [xAxisName]
        });

        var yAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
            'uid': "valueAxis2",
            'type': "Measure",
            'values': [yAxisName]
        });

        var bWidth = new sap.viz.ui5.controls.common.feeds.FeedItem({
            'uid': "bubbleWidth",
            'type': "Measure",
            'values': [zAxisName]
        });

        oVizFrame.destroyFeeds();
        oVizFrame.addFeed(xAxis);
        oVizFrame.addFeed(yAxis);
        oVizFrame.addFeed(bWidth)

        oVizFrame.setVizProperties({
            plotArea: {
                dataLabel: {
                    visible: true
                },
                window: {},
            },
            valueAxis: {
                title: {
                    visible: true
                }
            },
            valueAxis2: {
                title: {
                    visible: true
                }
            },
            title: {
                visible: false,

            },
            interaction: {
                zoom: {
                    enablement: "enabled"
                }
            }
        });

        ///////////////////////////////////////////////////////////////
        //HERE I TRY TO SET START & END AREA

        oVizFrame.getVizProperties().plotArea.window.start = {
            categoryAxis: {
                'Y_Axis': '30'
            }
        };
        oVizFrame.getVizProperties().plotArea.window.end = {
            categoryAxis: {
                'Y_Axis': '50'
            }
        };

        /////////////////////////////////////////////////////////////
        var ctbContent1 = new sap.suite.ui.commons.ChartContainerContent({
            icon: "sap-icon://horizontal-bar-chart",
            title: "vizFrame Bar Chart Sample",
            content: oVizFrame
        });
        var ctb = new sap.suite.ui.commons.ChartContainer({
            content: [ctbContent1]
        });
        ctb.setShowFullScreen(true);
        ctb.setShowPersonalization(true);
        ctb.setAutoAdjustHeight(false);
        var header = new sap.m.Text({
            text: "Header Part"
        });
        var app = new sap.m.App();
        var header = new sap.m.Text({
            text: "Header Part"
        });
        var fixFlex = new sap.ui.layout.FixFlex({
            height: "100%",
            fixContent: [header],
            flexContent: [ctb]
        });
        var oPage = new sap.m.Page({
            title: "Page title: ChartContainer",
            enableScrolling: false,
            content: [fixFlex]
        });
        app.addPage(oPage);
        app.placeAt("content");
    </script>

</head>

<body class='sapUiBody'>
    <div id='content'></div>
</body>

</html>
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers