ikiw · July 22, 2015 13:49
diff --git a/customizeChartD3.js b/customizeChartD3.js
 <!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>
	<!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>