Skip to Content
avatar image
Former Member

Problem with InteractiveDonutChart on GeoMap and AnalyticMap

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

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

    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.
    
    Add comment
    10|10000 characters needed characters exceeded