Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<!-- by Markus van Kempen - mvk@ca.ibm.com - Twitter: @MarkusVankempen -->
<!-- https://markusvankempen.wordpress.com/ -->
<!-- Date/Version: 2015-05-05 -->
<!-- ODATA Model -->
<head>
<meta name="description" content="MVK Bubble UI5 Chart with odata service" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
​
    <title>MVK Bubble UI5 Chart with odata service</title>
    <link rel="stylesheet" type="text/css" href="">
​
    <script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.viz,sap.ui.commons,sap.ui.table"
 data-sap-ui-theme="sap_goldreflection">
    </script>
    <script>
//////////////////
/// XML
    var sURI = 'http://9.52.156.53:8002/sapphire/opportunityforecast.xsodata/';
    var oModel = new sap.ui.model.odata.ODataModel(sURI, true);
​
​
//var sURIj = '/sapphire/opportunityforecast.xsodata/Opportunities?$format=json';
var sURIj = 'file:///C:/Projects/SAPPhireDemos2015/MVK-UI5-Charts/opportunityforecast.xsodataOpportunities.json';
    var oModelJSON = new sap.ui.model.json.JSONModel(sURIj);
​
​
var oFilterQ1=new sap.ui.model.Filter('CLOSE_QUARTER',sap.ui.model.FilterOperator.EQ,'Q1');
     var oFilterWon=new sap.ui.model.Filter('OPPORTUNITY_ACTIONS',sap.ui.model.FilterOperator.EQ,'Won');
​
 var oFilterForecast=new sap.ui.model.Filter('VERSION',sap.ui.model.FilterOperator.EQ,'FORECAST');
 var oFilterActual=new sap.ui.model.Filter('VERSION',sap.ui.model.FilterOperator.EQ,'ACTUAL');
 var oFilterOpStalled=new sap.ui.model.Filter('OPPORTUNITY_STATUS',sap.ui.model.FilterOperator.EQ,'Stalled');
​
//bubble
         var obdataset = new sap.viz.ui5.data.FlattenedDataset({
​
              dimensions : [ {
                axis : 1,
                name : 'STATUS',
                value : "{OPPORTUNITY_STATUS}"
              },{
               axis : 1,
                name : 'Customer',
                value : "{CUSTOMER_DESC}"
              },{
               axis : 1,
                name : 'Region',
                value : "{REGION}"
              }],
​
              measures : [ {
                group : 1,
                name : 'Quanity',
                value : '{OPPORTUNITY_QUANTITY}'
              }, {
                group : 2,
                name : 'Amount',
                value : '{OPPORTUNITY_AMOUNT}'
              }, {
                group : 3,
                name : 'Value',
                value : '{OPPORTUNITY_VALUE}'
              } ],
​
              data : {
         path: "/Opportunities", // Note:  xsodata nativ binding ,
//         path: "/d/results", // Note: Json xsodata binding for the same service
filters: [oFilterActual]
              }
​
            }); 
      
    var bubble = new sap.viz.ui5.Bubble({
              id : "bubble",
              width : "80%",
              height : "400px",
              plotArea : {
              },
              title : {
                visible : true,
                text : 'Acutal Sales by customer for Q1 - MVK2015050'
              },
              dataset : obdataset
            });
    bubble.setModel(oModel);  
​
    bubble.placeAt("mybubble"); 
​
</script>
​
</head>
​
<body class="sapUiBody" role="application">
    <div id="oChart22"></div><br>
    <div id="oChart2"></div><br>
    <div id="oBarChart"></div><br>
    <div id="mybar3"></div><br>
    <div id="mycol3"></div><br>
    <div id="mycol2"></div><br>
​
    <div id="mystack"></div>
    <div id="mycol"></div><br>
    <div id="content"></div><br>
  <div id="mybubble"></div>
    <div id="mytab"></div><br>
</body>
​
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
markusvankempenpro
0viewers