<!DOCTYPE html>
<html><head>
      

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
              <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

              <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
                           id="sap-ui-bootstrap"
                           data-sap-ui-libs="sap.m, sap.suite.ui.commons, sap.makit, sap.ui.commons, sap.viz, sap.ui.table"
                           data-sap-ui-theme="sap_bluecrystal">
              </script>
                  <style>
            
      </style>
      
<script>

var fnClearModel = function(){
      var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData([  ]);

  //Load busy loader and setVisible(false) for barchart
    this.oBarChart.setVisible(false);
    
 
    this.oBarChart.setModel(oModel);
    this.oBarChart.setVisible(true);
};


var reloadModel = function(){
     var oModel = new sap.ui.model.json.JSONModel();
     oModel.setData([
                     {Name: "val1", Value:300},
                     {Name: "val2", Value:290},
                     {Name: "val3", Value:280},
                     {Name: "val4", Value:270},
                     {Name: "val5", Value:133.33},
                     {Name: "val6", Value:2.50},
                     {Name: "val7", Value:0},
     ]);

   //Load busy loader and setVisible(false) for barchart
     this.oBarChart.setVisible(false);
     
     this.oBarChart.setModel(oModel);
     this.oBarChart.setVisible(true);
};

var loadChart = function(){
      
      
       var oDataset = new sap.viz.ui5.data.FlattenedDataset({
         dimensions: [{
                         axis: 1,
                         name: "Name",
                         value: "{Name}"
         }],
         measures: [{
                         name: "Value",
                         value: "{Value}"
         }],
         data: {path: "/"}
            });
     
     this.oBarChart = new sap.viz.ui5.Bar({
         dataset: oDataset,
         width: "100%",
         height: "500px",
		 dataLabel : {},
         plotArea: {colorPalette: ["#5CBAE6"]}
      });

      
       this.oBarChart.placeAt("content1");
};
           
loadChart();    


            
</script>

</head>
<body class='sapUiBody'>
            <div id='content1'></div>
<div id='content2'>
<input type="button" value = "Clear Chart" onclick="fnClearModel();"></input>
<input type="button" value = "Load Chart" onclick="reloadModel();"></input>
</div>

</body>
</html>










// Code goes here

/* Styles go here */