- SAP Managed Tags
Having struggled with this part of the documentation, its time to take a break: calling up Tinder
How do you create a simple Bubble Chart with SAP UI 5 using a .js View. I do agree to have seen some combo examples using MVC and XML views. Decoding the requirements alongside other tutorials, I came up with this breakdown. other charts work, Scatter charts work but not bubble Charts.
A reference point for working charts
I add my Code below
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 mainCoyBubbleChart = new sap.viz.ui5.controls.VizFrame("mainCoyBubbleChart", {
type:"bubble",
width : "100%",
height : "50%",
line : {
//'colorPalette' : d3.scale.category20().range()
},
title : {
visible : true,
text : 'Copmpany Aggregation'
},
xAxis: {
//title: { visible: true, text : "Friend Aggregation" },
//scale: new sap.viz.ui5.types.Axis_scale({fixedRange:true, Value: 5, minValue: 0, maxValue: 12})
},
dataset : topSalesDataset = new sap.viz.ui5.data.FlattenedDataset({
// a Bar Chart requires exactly one dimension (x-axis)
dimensions : [ {
axis : 1, // must be one for the x-axis, 2 for y-axis
name : 'Company',
value : "{Name}"
}],
// it can show multiple measures, each results in a new set of bars
// in a new color
measures : [
{
group:1,
name : 'Business Value', // 'name' is used as label in the Legend
value : '{BusinessValue}' // 'value' defines the binding for the
},
{
group:2,
name : 'Friend Value', // 'name' is used as label in the Legend
value : '{friendValue}' // 'value' defines the binding for the
}
],
// 'data' is used to bind the whole data collection that is to be
// displayed in the chart
data : {
path : "/"
}
})
});
// var YAxis = mainBubbleChart.getYAxis();
// YAxis.setVisible(true);
mainCoyBubbleChart.setVizType('bubble');
mainCoyBubbleChart.setUiConfig({'applicationSet': 'fiori'});
return mainCoyBubbleChart;
}
});
If you need more information I can provide.
Thanks
Bluesky| User | Count |
|---|---|
| 7 | |
| 5 | |
| 5 | |
| 3 | |
| 3 | |
| 2 | |
| 2 | |
| 2 | |
| 1 | |
| 1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.