<!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 */