Thanks Sriram Vaithiyanathan This works perfectly when I ran it. However, replacing the relevant part and adding that to my .js View, it doesn't render.
Note that there is no Error, as, other components and charts continue to render properly above and below this item.
Updated Code with your input
sap.ui.jsview("views.BubbleCoy", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf views.Bubble
*/
getControllerName : function() {
return null;
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf views.Companies
*/
createContent : function(oController) {
var oBusinessData = [ {
Country : "Canada",
revenue : 410.87,
profit : -141.25,
population : 34789000
}, {
Country : "China",
revenue : 338.29,
profit : 133.82,
population : 1339724852
}, {
Country : "France",
revenue : 487.66,
profit : 348.76,
population : 65350000
}, {
Country : "Germany",
revenue : 470.23,
profit : 217.29,
population : 81799600
}, {
Country : "India",
revenue : 170.93,
profit : 117.00,
population : 1210193422
}, {
Country : "United States",
revenue : 905.08,
profit : 609.16,
population : 313490000
} ];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
businessData : oBusinessData
});
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
axis : 1,
name : 'Country',
value : "{Country}"
} ],
measures : [ {
group : 1,
name : 'Population',
value : '{population}'
}, {
group : 2,
name : 'Profit',
value : '{profit}'
}, {
group : 3,
name : 'Revenue',
value : '{revenue}'
} ],
data : {
path : "/businessData",
factory : function() {
}
}
});
var mainCoyBubbleChart = new sap.viz.ui5.Bubble({
id : "bubble",
width : "80%",
height : "400px",
plotArea : {
},
title : {
visible : true,
text : 'Profit and Revenue By Country'
},
dataset : dataset
});
mainCoyBubbleChart.setModel(oModel);
// var YAxis = mainBubbleChart.getYAxis();
// YAxis.setVisible(true);
return mainCoyBubbleChart;
}
});
INDEX Header
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Friend Manager</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/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>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script>
sap.ui.localResources("views");
var chartView = sap.ui.view({id:"companies", viewName:"views.Companies", type:sap.ui.core.mvc.ViewType.JS});
var chartModel = new sap.ui.model.json.JSONModel();
chartModel.loadData("services/topTenCoysPull.xsjs");
chartView.setModel(chartModel); //data tied to SAP.Core
chartView.placeAt("barDisp");
// loading the bubble or Scatter Chart after creating it in Views/Bubble.js
var bubbleView = sap.ui.view({id:"bubble", viewName:"views.Bubble", type:sap.ui.core.mvc.ViewType.JS});
var bubbleModel = new sap.ui.model.json.JSONModel();
bubbleModel.loadData("services/bubbleService.xsjs");
bubbleView.setModel(bubbleModel); //data tied to SAP.Core
bubbleView.placeAt("bubbleDisp");
var donughtView = sap.ui.view({id:"donught", viewName:"views.Donught", type:sap.ui.core.mvc.ViewType.JS});
var donoughtModel = new sap.ui.model.json.JSONModel();
donoughtModel.loadData("services/pullAvgService.xsjs");
donughtView.setModel(donoughtModel); //data tied to SAP.Core
//donughtView.setData()
donughtView.placeAt("donughtDisp");
</script>
</head>
<body class="sapUiBody row" role="application">
<div class="container-fluid">
</div>
<div class="row-fluid">
<div class="span3 bs-docs-example ">
<nav>
<img src="img/Logo.png" alt=""/></nav>
</div>
<div class="span9">
<div id="bubbleDisp" class="bs-docs-example"></div>
<br>
<div class="row-fluid ">
<div class="span6 bs-docs-example ">
<div id="barDisp"></div>
</div>
<div class="span6 bs-docs-example ">
<div id="donughtDisp"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks again