$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
0

MaxSizeRatio property is not available in viz.frame, is there any alternative

Jun 12, 2017 at 10:29 AM

44

avatar image
Former Member
<!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>GenericTile</title>
  <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
  <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.viz, sap.ui.layout" data-sap-ui-xx-bindingSyntax="complex"></script>
  <!-- 2.) Create a UI5 List and place it onto the page -->
  <script>
    // demo data from sap.viz.ui5 with long
  var oBusinessData = [
   {
    Country: "2006",
    profit: 141.25
    
   }, {
    Country: "2007 ",
    profit: 133.82
   }, {
    Country: "2008",
    profit: 348.76
   }, {
    Country: "2009",
    profit: 217.29
   }
  ];
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
      businessData: oBusinessData 
    });
    sap.ui.getCore().setModel(oModel);
    var dataset = new sap.viz.ui5.data.FlattenedDataset({
      dimensions: [{
     
        name: 'Country',
        value: '{Country}'
      }],
      measures: [{
        name: 'Profit',
        value: '{profit}'
      }],
      data: {
        path: "/businessData"
      }
    });
    // note the maxSizeRatio parameter of xAxis
    var oVizFrame = new  sap.viz.ui5.controls.VizFrame({
      id: "line",
      width: "210px",
      height: "120px",
      vizType: "line",
      legendVisible:false,
      visible:true,
      dataset: dataset
    });
    oVizFrame.setVizProperties({
            plotArea:{
              adjustScale :true
            },
            title: {
              visible: false
            },legend: {
                visible: false
              },
             valueAxis: {
                title: {
                  visible: false
                },
                label: {
                  visible: false
                },
                gridline: {
                  visible: false
                },
                layout:{
                  maxWidth:0.50
                }
              },
              categoryAxis: {
                title: {
                  visible: true
                },
                label: {
                  hidden:false
                }
                
              }
        });
    var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid': "valueAxis",
        'type': "Measure",
        'values': ["Profit"]
      }), 
      feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
        'uid': "categoryAxis",
        'type': "Dimension",
        'values': ["Country"]
      });
  oVizFrame.addFeed(feedValueAxis);
  oVizFrame.addFeed(feedCategoryAxis); 
   
    var oHorLay = new sap.ui.layout.HorizontalLayout({
     
      content: [new sap.m.TileContent({
        content: [oVizFrame]
      }), new sap.ui.layout.VerticalLayout({
        content: [new sap.m.NumericContent({
          width:"100px",
            value:"19k"
        })]
      })]
    })
    var oNum = new sap.m.NumericContent({
        value:"1920",
        scale: "M"
      })
    var oGenericTile = new sap.m.GenericTile({
      header: "Generic Tile",
      subheader: "Line Chart",
      frameType: "TwoByOne",
      
      tileContent: [
      new sap.m.TileContent({
        footer:"Naveen",
      frameType:"TwoByOne",
        content: [oHorLay]
      })
     
      ]
    });
    oGenericTile.placeAt("uiArea");
  </script>
</head>
<body class="sapUiBody">
  <!-- This is where you place the UI5 Generic Tile -->
  <div id="uiArea"></div>
</body>
</html>

My requirement is to create a Generic Tile with the Line chart. I am not able to see the X-axis label name. Please see the actual result screenshot

I have written a simple test program

Expected result:-

Actual result:-

7fuvh.png (11.8 kB)
xsqng.png (11.2 kB)
rl0dg.png (11.8 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

avatar image
Former Member
Jan 05 at 08:41 AM
0

Please be noticed that xAxis.maxSizeRatio is the property of our experimental chart library. In vizFrame, it is categoryAxis.layout.maxValue or minValue in which you could set the maximum/minimum height of ratio that allocated for categoryAxis labels.

Share
10 |10000 characters needed characters left characters exceeded