VizFrame Graph not getting Displayed

[former_member592880]

I am trying to display a bar graph but it is not getting displayed. no errors arise in the console nor do any arise in the UI debugger. yet the graph wont show.

XML code

 <viz:VizFrame id="idPurchaseHistoryGraph" xmlns="sap.viz" uiConfig="{applicationSet:'fiori'}" vizType="bar" height="100%" width="100%">
       <viz:dataset>
        <viz.data:FlattenedDataset data="{PoHis>/PHdata}">
         <viz.data:dimensions>
          <viz.data:DimensionDefinition name="EBELN" value="{path : 'PoHis>EBELN'}"/>
         </viz.data:dimensions>
         <viz.data:measures>
          <viz.data:MeasureDefinition name="netwr" value="{path : 'PoHis>netwr'}"></viz.data:MeasureDefinition>
         </viz.data:measures>
        </viz.data:FlattenedDataset>
       </viz:dataset>
       <viz:feeds>
        <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="netwr"/>
        <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="EBELN"/>
       </viz:feeds>
      </viz:VizFrame>

JSCode

 var oPurchaseHistoryGraph = this.getView().byId("idPurchaseHistoryGraph");
  oModel.read(poHistory, {
   success: function (oData, response) {
    //debugger;
    var oJModel = new sap.ui.model.json.JSONModel();
    oJModel.setData(oData);
    var UsageModel = new sap.ui.model.json.JSONModel({
     "PHdata": oData.results
    });
    oPurchaseHistoryGraph.setModel(UsageModel, "PoHis");
   },
   error: function (error) {
    var message = "Error";
    sap.m.MessageBox.show(message, sap.m.MessageBox.Icon.ERROR, "Error");
   }
  });

OData

{
  "d": {
    "results": [
      {
        "__metadata": {
          "id": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000304',MATNR='200000')",
          "uri": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000304',MATNR='200000')",
          "type": "AAG362.MM_PURCHASE_APPROVAL_SRV.GetLastSixPO"
        },
        "EBELN": "4500000304",
        "AEDAT": "/Date(1537574400000)/",
        "MATNR": "200000",
        "NETPR": "154.50",
        "MENGE": "100.000",
        "netwr": "15450.00"
      },
      {
        "__metadata": {
          "id": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000286',MATNR='200000')",
          "uri": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000286',MATNR='200000')",
          "type": "AAG362.MM_PURCHASE_APPROVAL_SRV.GetLastSixPO"
        },
        "EBELN": "4500000286",
        "AEDAT": "/Date(1537315200000)/",
        "MATNR": "200000",
        "NETPR": "154.50",
        "MENGE": "100.000",
        "netwr": "15450.00"
      },
      {
        "__metadata": {
          "id": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000265',MATNR='200000')",
          "uri": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000265',MATNR='200000')",
          "type": "AAG362.MM_PURCHASE_APPROVAL_SRV.GetLastSixPO"
        },
        "EBELN": "4500000265",
        "AEDAT": "/Date(1535328000000)/",
        "MATNR": "200000",
        "NETPR": "10.00",
        "MENGE": "100.000",
        "netwr": "1000.00"
      },
      {
        "__metadata": {
          "id": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000267',MATNR='200000')",
          "uri": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000267',MATNR='200000')",
          "type": "AAG362.MM_PURCHASE_APPROVAL_SRV.GetLastSixPO"
        },
        "EBELN": "4500000267",
        "AEDAT": "/Date(1535328000000)/",
        "MATNR": "200000",
        "NETPR": "10.00",
        "MENGE": "100.000",
        "netwr": "1000.00"
      },
      {
        "__metadata": {
          "id": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000268',MATNR='200000')",
          "uri": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000268',MATNR='200000')",
          "type": "AAG362.MM_PURCHASE_APPROVAL_SRV.GetLastSixPO"
        },
        "EBELN": "4500000268",
        "AEDAT": "/Date(1535328000000)/",
        "MATNR": "200000",
        "NETPR": "150.50",
        "MENGE": "15.000",
        "netwr": "2257.50"
      },
      {
        "__metadata": {
          "id": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000256',MATNR='200000')",
          "uri": "http://elagwci1d.nat.tds.rz:8000/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV/GetLastSixPOSet(EBELN='4500000256',MATNR='200000')",
          "type": "AAG362.MM_PURCHASE_APPROVAL_SRV.GetLastSixPO"
        },
        "EBELN": "4500000256",
        "AEDAT": "/Date(1535068800000)/",
        "MATNR": "200000",
        "NETPR": "150.50",
        "MENGE": "15.000",
        "netwr": "2257.50"
      }
    ]
  }
}

Please Help

[maheshpalavalli]

I think you can use ChartContainer to show the vizframe which will surely work in sap.m. controls

[maheshpalavalli · Accepted solution]

I just pasted your code and tested it in my webide and it is working fine.

What i can suggest you is to just make sure the model is created and set the data correctly. If still the error comes make sure there are no errors in the cosole.

var UsageModel = new sap.ui.model.json.JSONModel({
     "PHdata": oData.results // Make sure in debugging you are setting the data correctly
    });
    oPurchaseHistoryGraph.setModel(UsageModel, "PoHis");

XML View is copied from your code:

<mvc:View controllerName="com.test.dep.ztestdep.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data"
	xmlns:viz="sap.viz.ui5.controls">
	<App id="idAppControl">
		<pages>
			<Page title="{i18n>title}">
				<content>
					<viz:VizFrame id="idPurchaseHistoryGraph" xmlns="sap.viz" uiConfig="{applicationSet:'fiori'}" vizType="bar" height="100%" width="100%">
						<viz:dataset>
							<viz.data:FlattenedDataset data="{PoHis>/PHdata}">
								<viz.data:dimensions>
									<viz.data:DimensionDefinition name="EBELN" value="{path : 'PoHis>EBELN'}"/>
								</viz.data:dimensions>
								<viz.data:measures>
									<viz.data:MeasureDefinition name="netwr" value="{path : 'PoHis>netwr'}"></viz.data:MeasureDefinition>
								</viz.data:measures>
							</viz.data:FlattenedDataset>
						</viz:dataset>
						<viz:feeds>
							<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="netwr"/>
							<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="EBELN"/>
						</viz:feeds>
					</viz:VizFrame>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

[former_member592880 · Accepted solution]

hi, thanks for the help.

I ran my js code through the debugger. it is getting executed yet the graph wont show. is there any mistake with my binding?? or what else should I check to ensure this works.

regards

Siddharth

[maheshpalavalli · Accepted solution]

Can you put the screenshot of what is being displayed?

[former_member592880 · Accepted solution]

hii it worked out. I was trying to display those graphs in a icon tab bar and due to the library difference the charts were not geeting displayed as they were not able to get viz lib inside a sap.m

thanks s lot

Siddharth