Not able to display bar chart in details view

Question

Hi every one,
I created Tiles and when click on Tile it is going to SplitContainer. in SplitContainer container i have two HTML views. I am trying to dispaly bar chat in Detail view. but its not displaying. Can you please help me?
Here is my code.
Here is my details view.
<template data-controller-name="view.LrDetail">
  <div id="page" data-sap-ui-type="sap.m.Page" data-title="Leave Request" data-show-nav-button="true" data-nav-button-press="back">
  <div data-sap-ui-aggregation="content">
  <div data-sap-ui-type="sap.m.ObjectHeader"
  data-title-active="true"
  data-title-press="showRequestor"
  data-title="{lr>requestor}"
  data-number="{lr>days}"
  data-number-unit="days">
  <div data-sap-ui-aggregation="attributes">
  <div data-sap-ui-type="sap.m.ObjectAttribute" data-text="{path:'lr>type', formatter:'util.Formatter.lrType'}">
  </div>
  </div>
  <div data-sap-ui-aggregation="firstStatus">
  <div data-sap-ui-type="sap.m.ObjectStatus" data-text="{path:'lr>agoDays', formatter:'util.Formatter.agoDays'}">
  </div>
  </div>
  </div>
  <div id="reports" data-sap-ui-type="sap.viz.ui5.Bar">
  </div>
  </div>
  </div>
</template>
and here is my details controller
onBeforeRendering: function()
  var oModel = new sap.ui.model.json.JSONModel({
  businessData : [
  {Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
  {Country :"China",revenue:338.29,profit:133.82, population:1339724852},
  {Country :"France",revenue:487.66,profit:348.76, population:65350000},
  {Country :"Germany",revenue:470.23,profit:217.29, population:81799600},
  {Country :"India",revenue:170.93,profit:117.00, population:1210193422},
  {Country :"United States",revenue:905.08,profit:609.16, population:313490000}
  sap.ui.getCore().setModel(oModel, "MyJSONModel");
  var dataset = new sap.viz.ui5.data.FlattenedDataset({
            dimensions : [ {
              axis : 1,
              name : 'Country',
              value : "{Country}"
            measures : [ {
              name : 'population',
              value : '{population}'
            }] ,data : {
              path : "/businessData"
  var chart = this.getView().byId("reports");
  chart.setDataset(dataset);
  chart.setModel(oModel);
here is my output screenshot.
Can you please help me where i am doing wrong.

Answer 1

Hi Sakthivel Elango,
My code is working in Normal view and displaying Chart. the same code put into detail view chat is not displaying. Inside HTML code i am posting please check the code.
<div id="LrDetail--reports" data-sap-ui="LrDetail--reports" class="sapVizChart" style="width: 640px; height: 480px;">
   <div id="UIComp_0" style="position: relative; overflow: visible; font-size: 10px; box-sizing: border-box; left: 0px; top: 0px; width: 640px; height: 480px; display: none;">
      <div id="UIComp_1" class="UIComp_1-2ebc44e6-2f93-46d1-964e-e823b0afe432 v-viz v-bar" style="position: relative; overflow: hidden; font-size: 10px; box-sizing: border-box; display: block; width: 640px; height: 480px; -webkit-user-select: none; left: 0px; top: 0px;">
         <canvas style="width: 0px; height: 0px;"></canvas>
         <svg class="v-m-root" width="640" height="480" style="left: 0px; top: 0px; direction: ltr; position: absolute; box-sizing: border-box;">
            <defs></defs>
            <g class="v-m-title"></g>
            <g class="v-m-legends">
               <g class="v-m-legend"></g>
            </g>
            <g class="v-m-main">
               <g class="v-m-background"></g>
               <g class="v-m-xAxis"></g>
               <g class="v-m-yAxis"></g>
               <g class="v-m-plot"></g>
            </g>
         </svg>
      </div>
   </div>
</div>
in this svg tags there is no bars.