Skip to Content
0

Problem with InteractiveDonutChart on GeoMap and AnalyticMap

Dec 22, 2017 at 09:56 AM

31

avatar image
Former Member

I put InteractiveDonutChart to GeoMap or AnalyticMap in controller. On webrowser(google chrome) after site is rendered donut chart is disappears and show no errors in console.

This is my fragment of code:

- in //test comments i try used other type of microchart and it's work.

- and

var conteners = new sap.ui.vbm.Containers();
var oGeoMap  = this.getView().byId("GeoMap");
var donutChart = new sap.suite.ui.microchart.InteractiveDonutChart
({
	displayedSegments:2,
	selectionEnabled:false,
});
				
var seg1 = new sap.suite.ui.microchart.InteractiveDonutChartSegment
({
	label: "Test 1",
	value: 75
});
				
var seg2 = new sap.suite.ui.microchart.InteractiveDonutChartSegment
({
	label: "Test 1",
	value: 25
 });
				
donutChart.addSegment(seg1);
donutChart.addSegment(seg2);
var contener = new sap.ui.vbm.Container({ 
	position: "21.050;52.342",
});
//donut
contener.setItem(donutChart);
//test
/*				contener.setItem(new sap.suite.ui.microchart.HarveyBallMicroChart({
			         size: "S",
			         total: 100,
			         totalScale:"Mrd",
			         showTotal: false,
			         items: [ 
			         new sap.suite.ui.microchart.HarveyBallMicroChartItem({
			            fraction: 63,
			            fractionScale: "Mrd",
			            color: "Good"
			         })]
			      }));*/
				
conteners.addItem(contener);
				
console.log(conteners);
oGeoMap.addVo(conteners);
donut-1.png (61.4 kB)
donut-2.png (85.8 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
avatar image
Former Member Jan 15 at 07:53 AM
0

I resolved this problem by adding

InteractiveDonutChart to FlexBox before putting it to Contener. Size of FlexBox it's very important.

var containers = new sap.ui.vbm.Containers();
var contener = new sap.ui.vbm.Container({ 
                position: cities.lat+";"+cities.lon,
            });
var flexBox = new sap.m.FlexBox({
                width:"15rem",
                height:"10rem",
                direction:sap.m.FlexDirection.Column,
                backgroundDesign:sap.m.BackgroundDesign.Solid,
                justifyContent:sap.m.FlexJustifyContent.End
            });    
            var donutChart = new InteractiveDonutChart({
                displayedSegments:5,
                selectionEnabled:true,
            });

//iterative creation of segments (5 times)

...

donutChart.addSegment(
                         new InteractiveDonutChartSegment({
                             label:cities.data[i].tariff,
                             value:(cities.data[i].customers/100)*100
                         })
                    );

...
flexBox.addItem(donutChart);
            var contener = new sap.ui.vbm.Container({ 
                position: cities.lat+";"+cities.lon,
            });
            
contener.setItem(flexBox);

containers.addItem(contener);

//and containers put to GeoMapp object.
Share
10 |10000 characters needed characters left characters exceeded