Skip to content

Instantly share code, notes, and snippets.

@ikiw
Created July 22, 2015 13:49
Show Gist options
  • Save ikiw/e067322c6872bb200a14 to your computer and use it in GitHub Desktop.
Save ikiw/e067322c6872bb200a14 to your computer and use it in GitHub Desktop.
Ui5 customize chart using D3
<!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>Bubble Chart Example</title>
<script src="/sapui5/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.viz"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script type="text/javascript">
// create the data model
var oModel = new sap.ui.model.json.JSONModel({
businessData: [
{supplier :"Sunshine Inc", imp:120.87, perf:8.25, size:36},
{supplier :"XYZ AG", imp:180.87, perf:83.82, size:12},
{supplier :"AKE Corp", imp:320.43, perf:-71.73, size:32},
{supplier :"Berlin AG", imp:410.87, perf:18.25, size:18},
{supplier :"California W4",imp:290.47, perf:-4.25, size:50},
{supplier :"WKF Limited", imp:338.29, perf:63.82, size:23}
]
});
var css= ' ';
// create the bubble chart
var oBubble = new sap.viz.Bubble({
width : "90%",
height : "500px",
plotArea : {
minMarkerSize: 20
},
title : {
visible : true,
text : 'My Supplier Portfolio'
},
css : css,
dataset : new sap.viz.core.FlattenedDataset({
dimensions : [
{ axis: 1, name: 'supplier', value: "{supplier}" }
],
measures : [
{ group: 1, name: 'imp', value: '{imp}' },
{ group: 2, name: 'perf', value: '{perf}' },
{ group: 3, name: 'size', value: '{size}' }
],
data : { path : "/businessData" }
}),
models: oModel
});
// set data label
var oDataLabel = new sap.viz.ui5.types.Datalabel();
oDataLabel.setVisible(true);
oBubble.setDataLabel(oDataLabel);
// create the X axis title object
var oXAxisTitle = new sap.viz.ui5.types.Axis_title();
oXAxisTitle.setVisible(true);
oXAxisTitle.setText("Strategic Importance");
// create the X axis object
var oXAxis = new sap.viz.ui5.types.Axis();
oXAxis.setVisible(true);
// assigne title to X axis and set the X axis
oXAxis.setTitle(oXAxisTitle);
oBubble.setXAxis(oXAxis);
// create the Y axis title object
var oYAxisTitle = new sap.viz.ui5.types.Axis_title();
oYAxisTitle.setVisible(true);
oYAxisTitle.setText("Supplier Performance");
// create the Y axis object
var oYAxis = new sap.viz.ui5.types.Axis();
oYAxis.setVisible(true);
// assigne title to Y axis and set the Y axis
oYAxis.setTitle(oYAxisTitle);
oBubble.setYAxis(oYAxis);
//debugger;
// event Initialized
var vLine, hLine;
oBubble.attachInitialized(this, function() {
var aPlot = d3.selectAll(".v-m-plot");
var aRect = aPlot.selectAll("rect");
var width = aRect.attr("width");
var height = aRect.attr("height");
// draw vertical line
if (vLine) {
vLine.attr("x1", width / 2)
.attr("x2", width / 2)
.attr("y2", height);
} else {
vLine = aPlot.append("line")
.attr("x1", width / 2)
.attr("y1", 0)
.attr("x2", width / 2)
.attr("y2", height)
.attr("stroke", "black")
.attr("stroke-width", 1);
}
// draw horizontal line
if (hLine) {
hLine.attr("y1", height / 2)
.attr("x2", width)
.attr("y2", height / 2);
} else{
hLine = aPlot.append("line")
.attr("x1", 0)
.attr("y1", height / 2)
.attr("x2", width)
.attr("y2", height / 2)
.attr("stroke", "black")
.attr("stroke-width", 1);
}
// add text to bubbles
var aBubble = aPlot.selectAll(".v-datashape");
// add text to plot
aPlot.append("text")
.attr("x", 10)
.attr("y", 22)
.attr("text-anchor", "start")
.attr("font-size", "10pt")
.text("Quadrant 1");
debugger;
d3.selectAll('.v-m-title')
.attr('transform','translate(0,50)');
});
oBubble.placeAt('content');
oBubble.addDelegate({onAfterRendering :function(){
//debugger;
var oTitle = d3.selectAll('.v-m-title')
.attr('transform','translate(0,50)');
}
});
</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