$(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: true, vro: true, 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
avatar image
Former Member

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

<!DOCTYPE html>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <!-- 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 -->
    // 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();
      businessData: oBusinessData 
    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",
      dataset: dataset
              adjustScale :true
            title: {
              visible: false
            },legend: {
                visible: false
             valueAxis: {
                title: {
                  visible: false
                label: {
                  visible: false
                gridline: {
                  visible: false
              categoryAxis: {
                title: {
                  visible: true
                label: {
    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"]
    var oHorLay = new sap.ui.layout.HorizontalLayout({
      content: [new sap.m.TileContent({
        content: [oVizFrame]
      }), new sap.ui.layout.VerticalLayout({
        content: [new sap.m.NumericContent({
    var oNum = new sap.m.NumericContent({
        scale: "M"
    var oGenericTile = new sap.m.GenericTile({
      header: "Generic Tile",
      subheader: "Line Chart",
      frameType: "TwoByOne",
      tileContent: [
      new sap.m.TileContent({
        content: [oHorLay]
<body class="sapUiBody">
  <!-- This is where you place the UI5 Generic Tile -->
  <div id="uiArea"></div>

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

  • Get RSS Feed

1 Answer

  • Jan 05, 2018 at 08:41 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded