PIE / COLUMN chart values overlap and NOT clearly visible

[Former Member]

Hello All,

I am working with PIE / COLUMN charts with VizFrame.

For some scenarios, data looks cramped / overlap-with-each-other inside the PIE & COLUMN chart and the values are NOT clearly visible to the users.

Any suggestions / ideas on how to achieve this is appreciated...

-Cheers, Sai

1# Pie Chart

Original sample source code: http://jsbin.com/wudaza/edit?html,js,output

Tweaked sample code below:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    'sap/viz/ui5/controls/common/feeds/FeedItem',
	'sap/viz/ui5/data/FlattenedDataset',
	   'sap/viz/ui5/format/ChartFormatter',  
], function (Controller, MessageToast, JSONModel,FeedItem,FlattenedDataset,ChartFormatter) {
    "use strict";
 
    var GridController = Controller.extend("scnhelp.example1",{
    	onInit : function() {
			// set explored app's demo model on this sample
    		var FIORI_PERCENTAGE_FORMAT_2 = "__UI5__PercentageMaxFraction2";  
            
            var chartFormatter = ChartFormatter.getInstance();  
            chartFormatter.registerCustomFormatter(FIORI_PERCENTAGE_FORMAT_2, function(value) {  
                var percentage = sap.ui.core.format.NumberFormat.getPercentInstance({style: 'percent',  
                    maxFractionDigits: 0});  
                return percentage.format(value);  
            });  
             //apply  
            sap.viz.api.env.Format.numericFormatter(chartFormatter);  
    		 		
    		var data = {"alerts":[
      { "type" : "New",  "alertCount" : "23" },
      { "type" : "New1",  "alertCount" : "23" },
      { "type" : "New2",  "alertCount" : "23" },
      { "type" : "New3",  "alertCount" : "23" },
      { "type" : "New4",  "alertCount" : "23" },
      { "type" : "New5",  "alertCount" : "261" },
      { "type" : "New6",  "alertCount" : "23" },
      { "type" : "New7",  "alertCount" : "23" },
      { "type" : "New8",  "alertCount" : "23" },
      { "type" : "New9",  "alertCount" : "23" },
      { "type" : "New10",  "alertCount" : "23" },
      { "type" : "NewA1",  "alertCount" : "23" },
      { "type" : "NewA2",  "alertCount" : "23" },
      { "type" : "NewA3",  "alertCount" : "23" },
      { "type" : "NewA4",  "alertCount" : "23" },
      { "type" : "NewA5",  "alertCount" : "23" },
      { "type" : "NewA6",  "alertCount" : "23" },
      { "type" : "NewA7",  "alertCount" : "23" },
      { "type" : "NewA8",  "alertCount" : "23" },
      { "type" : "NewA9",  "alertCount" : "23" },
      { "type" : "NewA10",  "alertCount" : "23" },
      { "type" : "Old", "alertCount" : "1415" }
     
    ]};
			var oModel = new JSONModel();
          oModel.setData(data);		this.getView().setModel(oModel);
			// ************code for Viz frame
			// chart
			
			var oVizFrame = this
					.getView()
					.byId("idVizFrameDonut");
			// var oVizFrame =
			// this.getView().byId("productitem-small-0");
			oVizFrame.setVizType('pie');
			oVizFrame.setUiConfig({
				"applicationSet" : "fiori"
			});


			var oDataset = new FlattenedDataset(
					{
						dimensions : [ {
							name : 'Type of Alerts',
							value : "{type}"
						} ],
						measures : [ {
							name : 'alertCount',
							value : {
								  path : 'alertCount',
								  formatter : function(fValue) {  
									  var returnValue = fValue+" %";
                                          return(fValue) ;  
                                     }  
							}
						} ],
						data : {
							path : "/alerts"
						}
					});
			oVizFrame.setDataset(oDataset);
			oVizFrame.setModel(oModel);


			oVizFrame.setVizProperties({
				legend : {
                  visible: true,
					title : {
						visible : true
					}
				},
				 dataLabel: {
                        visible: true,
                        formatString: FIORI_PERCENTAGE_FORMAT_2,
                    type: "percentage",
                    hideWhenOverlap:false
				 },
				title : {
					visible : false,
				}
              ,legendGroup: {
						layout: {
							position: "right"
						}
					}
			});


			var feedValueAxis = new FeedItem({
				 'uid': "size",
                    'type': "Measure",
                    'values': ["alertCount"]
			});
			var feedCategoryAxis = new FeedItem(
					{
						 'uid': "color",
		                    'type': "Dimension",
		                    'values': ["Type of Alerts"]
					});
			oVizFrame.addFeed(feedValueAxis);
			oVizFrame.addFeed(feedCategoryAxis);


			// ***************code ofr viz frame
			// ends here


		},
  });
   return GridController; 
});    
    
 




        // instantiate the View
        var myView = sap.ui.xmlview({
            viewContent: jQuery('#view1').html()
        }); // accessing the HTML inside the script tag above


        // put the View onto the screen
        myView.placeAt('content');

2# Column Chart:

Related code snippet:

..
oVizFrameApr.setVizType('column');
oVizFrameApr.setVizProperties({
	title: {
		visible: true,
		text: "Approved Tickets"
	},
	plotArea: {
	
		dataLabel: {
			visible: true
		},
		colorPalette: d3.scale.category20().range()
	},
	legend: {
		visible: true,
		title: {
			visible: false
		}
	},
	legendGroup: {
		layout: {
			position: "bottom"
		}
	},
	valueAxis: {
		title: {
			text: "Approved Tickets"
		}
	},
	categoryAxis: {
		title: {
			text: "Month"
		}
	}
});

..

[former_member196805]

Currently, application could only choose from hiding the overlapped labels, or let them overlapped. No properties could reposition the labels when overlapped. For auto hidding when overlap, you could turn enable

plotArea.dataLabel.hideWhenOverlap

[tejashwini123]

in XML added like below

<viz:VizFrame xmlns="sap.viz" id="idDonutChart" class="graphs donutChart" vizType="donut" vizProperties="{plotArea: { drawingEffect: 'glossy' },title:{ text:'Testing'}, dataLabel:{visible:true, hideWhenOverlap:true}}">

[former_member196805]

We have delivered an enhancement which, hopefully, could relieve your scenario:

dataLabel:{  
  visible: true, // set the visiblility of data label to true  
  distance: 0.3, // define the distance between data label and the pie chart
  line: {visible: true} // enable the visibility of a gray line to connect data labels with pie chart.
}