Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/chartSelectdataInTable.js

Created July 22, 2015 13:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ikiw/e41fcafb758652f66413 to your computer and use it in GitHub Desktop.
Save ikiw/e41fcafb758652f66413 to your computer and use it in GitHub Desktop.
Download ZIP
UI5 Chart select data in table
Raw
chartSelectdataInTable.js
<!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='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.commons,sap.ui.ux3,sap.viz,sap.ui.table'></script>
<!-- add 'sap.ui.table' and/or other libraries if required -->
<script>
var aData = [{"Country":"IN","DSO":"53.29"},{"Country":"DE","DSO":"50.29"},{"Country":"SL","DSO":"45.29"},{"Country":"PK","DSO":"80.29"},{"Country":"RSA","DSO":"90.29"},{"Country":"AR","DSO":"50.29"},{"Country":"BR","DSO":"60.81"},{"Country":"CN","DSO":"52"},{"Country":"VE","Time":"201201","DSO":"32.49"},{"Country":"AR","Time":"201202","DSO":"49.89"},{"Country":"BR","Time":"201202","DSO":"61.81"},{"Country":"CN","Time":"201202","DSO":"47.05"},{"Country":"VE","Time":"201202","DSO":"40.43"},{"Country":"AR","Time":"201203","DSO":"48.93"},{"Country":"BR","Time":"201203","DSO":"62.17"},{"Country":"CN","Time":"201203","DSO":"50.77"},{"Country":"VE","Time":"201203","DSO":"42.24"},{"Country":"AR","Time":"201204","DSO":"49.75"},{"Country":"BR","Time":"201204","DSO":"63.74"},{"Country":"CN","Time":"201204","DSO":"48.28"},{"Country":"VE","DSO":"33.85"}];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({lineData : aData});
var oDataSet = sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
name : "Country",
axis : 1,
value : "{Country}"
}
],
measures : [
{
name : "DSO",
axis : 1,
value : "{DSO}"
}
],
data : {
path : "/lineData"
}
});
var line = new sap.viz.ui5.Pie({
width : "800px",
height : "400px",
title : {
visible : true,
text : "DSO By Country Over Time"
},
xAxis : {
title: {
visible: true,
}
},
yAxis : {
title: {
visible: true,
}
},
legend: {
visible : true,
title: {
visible: true,
}
},
plotArea:{
animation: {
dataLoading : false
}
},
interaction: {
pan: {
enable : false
}
},
dataset : oDataSet
});
line.setModel(oModel);
var fSelectionChanged = function(oEvent) {
var data = this.selection();
var country,dso;
var dataFilter = [];
for(i in data){
country = data[i].data.Country;
dso = data[i].data.DSO;
dataFilter.push(new sap.ui.model.Filter("Country","EQ",country));
dataFilter.push(new sap.ui.model.Filter("DSO","EQ",dso));
}
oTable.bindRows({
path :'/lineData',
filters : dataFilter
});
};
line.attachSelectData(fSelectionChanged);
line.attachDeselectData(fSelectionChanged);
line.attachInitialized(function(){});
line.placeAt('content');
var oTable = new sap.ui.table.Table({});
oTable.addColumn(new sap.ui.table.Column({label: "Country", template: new sap.ui.commons.TextView().bindProperty("text", "Country")}));
oTable.addColumn(new sap.ui.table.Column({label: "DSO", template: new sap.ui.commons.TextView().bindProperty("text", "DSO")}));
oTable.placeAt('content');
oTable.setModel(oModel);
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment