ikiw/customizeChartD3.js

## 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>