Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/heatMap.js

Created July 17, 2015 14:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ikiw/86f3288f95cecbc05a55 to your computer and use it in GitHub Desktop.
Save ikiw/86f3288f95cecbc05a55 to your computer and use it in GitHub Desktop.
Download ZIP
UI5 HeatMap
Raw
heatMap.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.ui.table,sap.viz'></script>
<!-- add 'sap.ui.table' and/or other libraries if required -->
<script>
var data = {
"accounts": [
{
"Date": "Monday",
"Country": "SD7",
"Protocol": "HTTP",
"Accounts": "10000"
},
{
"Date": "Monday",
"Country": "SD7",
"Protocol": "RFC",
"Accounts": "20000"
},
{
"Date": "Monday",
"Country": "FA7",
"Protocol": "HTTP",
"Accounts": "30000"
},
{
"Date": "Monday",
"Country": "FA7",
"Protocol": "RFC",
"Accounts": "10000"
},
{
"Date": "Monday",
"Country": "Korea",
"Protocol": "HTTP",
"Accounts": "40000"
},
{
"Date": "Monday",
"Country": "Singapore",
"Protocol": "HTTP",
"Accounts": "50000"
},
{
"Date": "Monday",
"Country": "Malaysia",
"Protocol": "HTTP",
"Accounts": "60000"
},
{
"Date": "Tuesday",
"Country": "SD7",
"Protocol": "HTTP",
"Accounts": "10000"
},
{
"Date": "Tuesday",
"Country": "SD7",
"Protocol": "RFC",
"Accounts": "40000"
},
{
"Date": "Tuesday",
"Country": "FA7",
"Protocol": "HTTP",
"Accounts": "60000"
},
{
"Date": "Tuesday",
"Country": "FA7",
"Protocol": "RFC",
"Accounts": "10000"
},
{
"Date": "Tuesday",
"Country": "Korea",
"Protocol": "HTTP",
"Accounts": "50000"
},
{
"Date": "Tuesday",
"Country": "Singapore",
"Protocol": "HTTP",
"Accounts": "10000"
},
{
"Date": "Tuesday",
"Country": "Malaysia",
"Protocol": "HTTP",
"Accounts": "5000"
},
{
"Date": "Sunday",
"Country": "SD7",
"Protocol": "HTTP",
"Accounts": "10000"
},
{
"Date": "Sunday",
"Country": "SD7",
"Protocol": "RFC",
"Accounts": "20000"
},
{
"Date": "Sunday",
"Country": "FA7",
"Protocol": "HTTP",
"Accounts": "30000"
},
{
"Date": "Sunday",
"Country": "FA7",
"Protocol": "RFC",
"Accounts": "10000"
},
{
"Date": "Sunday",
"Country": "Korea",
"Protocol": "HTTP",
"Accounts": "40000"
},
{
"Date": "Sunday",
"Country": "Singapore",
"Protocol": "HTTP",
"Accounts": "50000"
},
{
"Date": "Sunday",
"Country": "Malaysia",
"Protocol": "HTTP",
"Accounts": "60000"
}
]
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
var dataset = new sap.viz.core.FlattenedDataset({
dimensions : [{
axis : 2,
name : 'SID',
value : "{Country}"
},{
axis : 2,
name : 'Protocol',
value : "{Protocol}"
},{
axis : 1,
name : 'Date',
value : "{Date}"
}],
measures : [{
axis:2,
name : 'Accounts',
value : '{Accounts}'
}],
data : {path : "/accounts"}
});
dataset.setModel(oModel);
var bullet = new sap.viz.ui5.Heatmap({width: "100%"});
bullet.setDataset(dataset);
bullet.placeAt('content');
</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