In get message in chart view : No Data

Question

I try to make bar chart but become this message:

No Data.

I have home page called Overview, includes table when I click on product I go to Detail view ,I see everything but not bar chart. Maybe you can help.Other question please how can add many years and many sales to show bar chart with more details, should I make array in model.json file? note: model.json file locates direct in webapp folder.

Kind regards

Mahmood

{
    "ProductCollection": [{
        "ProductId": "1239102",
        "Name": "BMW20",
        "Category": "EA",
        "SupplierName": "BMW",
        "Status": "In Stock",
        "Quantity": "10",
        "DateOfProduction": "2017-03-26",
        "CurrencyCode": "EUR",
        "Price": "9700",
        "Description": "Durchstöbern Sie 11.679 bmw Stock-Fotografie und Bilder. Oder starten Sie eine neue Suche, um noch mehr Stock-Fotografie und Bilder zu entdecke",
        "ProductPicUrl": "https://images.pexels.com/photos/3689532/pexels-photo-3689532.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
        "SupplierWebsite": "https://www.bmw.com/de/index.html",
        "Street": "Berlinerstraße",
        "HouseNumber": "29",
        "ZIPCode": "45873",
        "City": "Siegen",
        "Country": "Germany",
        "Twitter": "@BMW",
        "Email": "bmw.service@web.de",
        "Telephone": "01254789666",
        "Mobile": "+49535874521",
        "Year": "2012",
        "Sales": "200"

    }, {.........

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    //navButtonPress
    "sap/ui/core/routing/History"

], function(Controller, History) {
    "use strict";
    return Controller.extend("com.volkswagen.ifdb.cc.sopraempApplication.controller.Detail", {
        onInit: function() {
            this.oRouter = this.getOwnerComponent().getRouter();
            this.oRouter.getRoute("detail").attachPatternMatched(this.RouteFunction, this);
        
        },
        RouteFunction: function(oEvent) {
            var path = oEvent.getParameter("arguments").ProductId;
            var Fpath = '/ProductCollection/' + path;
            this.getView().bindElement({
                path: Fpath
            });
        },
        //navButtonPress, navTo Start Page
        onNavButton: function(oEvent) {
        var oHistory, sPreviousHash;
        oHistory = History.getInstance();
        sPreviousHash = oHistory.getPreviousHash();
        if (sPreviousHash !== undefined) {
            window.history.go(-1);
        } else {
            this.getRouter().navTo("Overview", {}, true);
        }
        }

    });
});

<?xml version="1.0"?>
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:smartform="sap.ui.comp.smartform" xmlns="sap.m" xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc" height="100%" controllerName="com.volkswagen.ifdb.cc.sopraempApplication.controller.Detail" xmlns:tnt="sap.tnt"
    xmlns:l="sap.ui.layout" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
    xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds">

    <App id="app">
        <Page title=" PRODUCT DETAIL" id="page" navButtonPress="onNavButton" showNavButton="true">
            <content>
                
                <ObjectHeader title="{Name}" id="oh1" responsive="true" icon="{ProductPicUrl}" iconDensityAware="false" intro="{Description}"
                    number="{ parts:[{path:'Price'},{path:'CurrencyCode'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }"
                    numberUnit="{CurrencyCode}" numberState="Success" backgroundDesign="Translucent" class="sapUiResponsivePadding--header">
                
                    <statuses>
                        <ObjectStatus state="{= ${Status} === 'In Stock' ? 'Success' : undefined}" text="Status: {Status}" class="sapUiResponsivePadding--header"/>
                    </statuses>
                    <headerContainer>
                        <IconTabBar upperCase="true">
                            <items>
                                <IconTabFilter text="Product Information">
                                 
                                    <VBox class="sapUiSmallMargin">
                                        <f:SimpleForm id="SimpleFormDisplay354" singleContainerFullSize="false" columnsM="2" columnsL="2" columnsXL="1" emptySpanS="0"
                                            emptySpanM="4" emptySpanL="4" emptySpanXL="4" adjustLabelSpan="false" labelSpanS="12" labelSpanM="3" labelSpanL="3" labelSpanXL="3"
                                            layout="ResponsiveGridLayout" editable="false">
                                            <f:content>
                                                <!--    <Image height="10rem" class="sapUiSmallMarginBegin" src="{ProductPicUrl}"/>-->
                                                <Label text="Product ID"/>
                                                <Text id="nameText" text="{ProductId}"/>
                                                <Label text="Name"/>
                                                <Text text="{Name}"/>
                                                <Label text="SupplierName"/>
                                                <Text text="{SupplierName} "/>
                                                <Label text="Category"/>
                                                <Text id="countryText" text="{Category}"/>
                                                <Label text="Quantity"/>
                                                <Text text="{Quantity} "/>
                                                <Label text="DateOfProduction"/>
                                                <Text text="{DateOfProduction} "/>
                                                <Label text="Price"/>
                                                <Text text="{Price} {CurrencyCode}"/>
                                            </f:content>
                                        </f:SimpleForm>
                                    </VBox>
                                
                                </IconTabFilter>
                                <IconTabFilter text="Supplier Information">
                                    <VBox class="sapUiSmallMargin">
                                        <f:SimpleForm id="SimpleFormDisplay480_Trial" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="4" labelSpanM="4"
                                            labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0" columnsXL="3" columnsL="2" columnsM="2"
                                            singleContainerFullSize="false">
                                            <f:content>
                                                <core:Title text="Adress"/>
                                                <Label text="Name"/>
                                                <Text text="{SupplierName}"/>
                                                <Label text="Street/No."/>
                                                <Text text="{Street} {HouseNumber}"/>
                                                <Label text="ZIP Code/City"/>
                                                <Text text="{ZIPCode} {City}"/>
                                                <Label text="Country"/>
                                                <Text text="{Country}"/>
                                                <core:Title text="Contact"/>
                                                <Label text="Web"/>
                                                <Link text="{SupplierName}" target="_blank" href="{SupplierWebsite}"/>
                                                <Label text="Twitter"/>
                                                <Text text="{Twitter}"/>
                                                <Label text="Email"/>
                                                <Text text="{Email}"/>
                                                <Label text="Tel."/>
                                                <Text text="{Telephone}"/>
                                                <Label text="Mobile"/>
                                                <Text text="{Mobile}"/>
                                            </f:content>
                                        </f:SimpleForm>
                                    </VBox>
                                </IconTabFilter>
                                <IconTabFilter text="Chart" >
                                    <VBox>
                                        <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet : 'fiori'}" width="100%" height="100%" vizType="bar">
                                            <viz:dataset>
                                                <viz.data:FlattenedDataset data="{ProductCollection}">
                                                    <viz.data:dimensions>
                                                        <viz.data:DimensionDefinition name="Year" values ="{Year}" />
                                                    </viz.data:dimensions>
                                                    <viz.data:measures>
                                                        <viz.data:MeasureDefinition name="Sales" values ="{Sales}"/>
                                                    </viz.data:measures>
                                                </viz.data:FlattenedDataset>
                                            </viz:dataset>
                                            <viz:feeds>
                                                <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values ="{Year}"     />
                                                <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="{Sales}"/>
                                            </viz:feeds>
                                        </viz:VizFrame>
                                    </VBox>
                                </IconTabFilter>
                            </items>
                        </IconTabBar>
                    </headerContainer>
                </ObjectHeader>
            </content>
        </Page>
    </App>
</mvc:View>

Answer 1

I think you have to remove the curly brackets in your FeedItems (since you don't want to bind a value there)

<viz.feeds:FeedItem 
    uid="categoryAxis" 
    type="Dimension" 
    values ="Year" />
<viz.feeds:FeedItem 
    uid="valueAxis" 
    type="Measure" 
    values="Sales" />