Skip to Content
0

PIE / COLUMN chart values overlap and NOT clearly visible

Aug 15, 2017 at 05:04 PM

70

avatar image
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"
		}
	}
});

..
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

avatar image
Former Member
Feb 08 at 06:34 AM
1

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
Share
10 |10000 characters needed characters left characters exceeded