SAPUI5 3CHARTS SINGLE PAGE XML

VIEW.JS
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="chart20.chart20" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
  xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
<HBox  class="hbox1"  width="100%">
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
                height='800px' width="800px" vizType='pie'>
                <viz:dataset>
                    <viz.data:FlattenedDataset data="{/milk}">
                        <viz.data:dimensions>
                            <viz.data:DimensionDefinition name="Store Name"
                                value="{Store Name}" />
                        </viz.data:dimensions>
                        <viz.data:measures>
                            <viz.data:MeasureDefinition name="Revenue"
                                value="{Revenue}" />
                        </viz.data:measures>
                    </viz.data:FlattenedDataset>
                </viz:dataset>

                <viz:feeds>
                    <viz.feeds:FeedItem uid="size" type="Measure"
                        values="Revenue" />
                    <viz.feeds:FeedItem uid="color" type="Dimension"
                        values="Store Name" />
                </viz:feeds>
            </viz:VizFrame>
            <VBox class="vbox0">
             <VBox class="vbox1">
            <viz:VizFrame id="idViz" uiConfig="{applicationSet:'fiori'}"
                height='400px' width="800px" vizType='pie'>
                <viz:dataset>
                    <viz.data:FlattenedDataset data="{/milk}">
                        <viz.data:dimensions>
                            <viz.data:DimensionDefinition name="Store Name"
                                value="{Store Name}" />
                        </viz.data:dimensions>
                        <viz.data:measures>
                            <viz.data:MeasureDefinition name="Revenue"
                                value="{Revenue}" />
                        </viz.data:measures>
                    </viz.data:FlattenedDataset>
                </viz:dataset>

                <viz:feeds>
                    <viz.feeds:FeedItem uid="size" type="Measure"
                        values="Revenue" />
                    <viz.feeds:FeedItem uid="color" type="Dimension"
                        values="Store Name" />
                </viz:feeds>
            </viz:VizFrame>
            </VBox>
            <VBox class="vbox2">
            <viz:VizFrame id="id" uiConfig="{applicationSet:'fiori'}"
                height='400px' width="800px" vizType='pie'>
                <viz:dataset>
                    <viz.data:FlattenedDataset data="{/milk}">
                        <viz.data:dimensions>
                            <viz.data:DimensionDefinition name="Store Name"
                                value="{Store Name}" />
                        </viz.data:dimensions>
                        <viz.data:measures>
                            <viz.data:MeasureDefinition name="Revenue"
                                value="{Revenue}" />
                        </viz.data:measures>
                    </viz.data:FlattenedDataset>
                </viz:dataset>

                <viz:feeds>
                    <viz.feeds:FeedItem uid="size" type="Measure"
                        values="Revenue" />
                    <viz.feeds:FeedItem uid="color" type="Dimension"
                        values="Store Name" />
                </viz:feeds>
            </viz:VizFrame>
            </VBox>
             </VBox>
            </HBox>
</content>
</Page>

</core:View>
CONTROLLER.JS
sap.ui.controller("chart20.chart20", {

onInit: function() {
    var oData = {
      "milk": [{
        "Store Name": "2nd Jan",
        "Revenue": "400"
      }, {
        "Store Name": "2nd Feb",
        "Revenue": "275"
      }, {
        "Store Name": "4th May",
        "Revenue": "356"
      }, {
        "Store Name": "6th June",
        "Revenue": "310"
      }]
    };
    var oModel = new sap.ui.model.json.JSONModel(oData);
    this.getView().setModel(oModel);
  },
});

 INDEX.HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">

</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<link rel="stylesheet" type="text/css" href="Style/myCSS.css">
<script>
sap.ui.localResources("chart20");
var app = new sap.m.App({initialPage:"idchart201"});
var page = sap.ui.view({id:"idchart201", viewName:"chart20.chart20", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>

</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>

</html>
OUTPUT

CSS

/* .hbox1{

margin: 4px auto;
border:10px solid ;

} */
 .vbox1{

margin:4px 4px 4px 4px;
} 
.vbox2{

margin:4px 4px 4px 4px;
}
#idVizFrame{

margin:8px 8px 8px 8px;
}
#idViz{
margin:4px 4px 4px 4px;


}