Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/pieCharLabel.js

Created July 22, 2015 13:43
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/54b204a29d03bb032773 to your computer and use it in GitHub Desktop.
Save ikiw/54b204a29d03bb032773 to your computer and use it in GitHub Desktop.
Download ZIP
Pie Chart Label inside plot area
Raw
pieCharLabel.js
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>test</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.viz'></script>
<!-- add 'sap.ui.table' and/or other libraries if required -->
<script>
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
} ];
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 : [ {
name : 'Revenue',
value : { path : 'revenue', formatter : function($) { return 2*$; }}
} ],
data : {
path : "/businessData",
factory : function() {
}
}
});
var pie = new sap.viz.ui5.Pie({
width : "80%",
height : "400px",
dataset : dataset
});
pie.attachInitialized(this, function() {
var arcs = d3.selectAll(".v-datashape");
debugger;
var radius = 400 / 2 ; // Height --> 400px
var arc = d3.svg.arc().outerRadius(radius);
arcs.append("svg:text").attr("transform", function(d){
d.innerRadius = 0;
d.outerRadius = 200;
return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text(function(d,i){
return oBusinessData[i].revenue;
});
});
// alternative way of setting configuration
pie.getTitle().setVisible(true).setText("Revenue By Country");
pie.setModel(oModel);
pie.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