Skip to Content
avatar image
Former Member

How to use treemap in sap ui5 vizchart? Any example or implementation of Treemapin sap ui5

I tried this but getting an error

Uncaught TypeError: Cannot read property 'primaryValues' of null

XML View

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data" controllerName="DualLineGraph.controller.Main" displayBlock="true">
<App>
<Page id="p" title="Tree Map">
<viz:VizFrame id="myViz" uiConfig="{applicationSet:'fiori'}" height="100%" width="100%" vizType='treemap'
vizProperties="{title:{text:'2 axes chart'}}">
<viz:dataset>
<viz.data:FlattenedDataset data="{/data}">
<viz.data:dimensions>
<viz.data:DimensionDefinition axis="2" name="Product" value="{Product}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition group="1" value="{Sales}" name="Sales"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="primaryValues" type="Measure" values="Sales"/>
<viz.feeds:FeedItem uid="axisLabels" type="Dimension" values="Product"/>

</viz:feeds>
</viz:VizFrame>
</Page>
</App>
</mvc:View>

controller

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
"use strict";
return Controller.extend("DualLineGraph.controller.Main", {
onInit: function() {
this.oPage = this.byId("p");
var oJsonModel = new sap.ui.model.json.JSONModel();
// dimension: Product, measures: Sales, Revenue
var oData3 = {
data: [{
Product: "Apples",
Sales: 33,
Revenue: 1020
}, {
Product: "Bananas",
Sales: 44,
Revenue: 1040,
}, {
Product: "Cherrys",
Sales: 55,
Revenue: 999
}, {
Product: "Kiwis",
Sales: 33,
Revenue: 800
}, {
Product: "Melons",
Sales: 66,
Revenue: 1111
}]
};
oJsonModel.setData(oData3);
// set complete model 
this.oPage.setModel(oJsonModel);
}
});
});
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    Apr 10, 2017 at 12:13 PM

    any suggestions?

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 10, 2017 at 03:52 PM

    there is no vizType called "treemap" in UI5 version 1.44

    You need to define 'FeedItem->uid' values based on 'vizType'

    Add comment
    10|10000 characters needed characters exceeded