How to make Dynamic legend for VizFrame - sapui5

I am creating an XML view in SAPUI5, where i am using VizFrame Chart. I gave the Measure value a fixed name as i am not sure how to make it dynamic as per select. The use case is on select, the measure value/legend on the chart should change as per the selected item. [Image here][1]
The XML code:
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" vizProperties="{ title: {text : 'Energy', visible : true}, plotArea: {dataLabel:{visible: true} ,colorPalette : ['#eab64d','#cb8589'] }}"
height='100%' width="100%" vizType='line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/T_TABLE}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Timeline"
value="{
path: 'C_READINGTIMESTAMP',
type: 'sap.ui.model.type.Date',
formatOptions: {
pattern : 'dd/MM hh a'
}}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Value"
value="{C_READINGVALUE}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure"
values="Value" />
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"
values="Timeline" />
</viz:feeds>
</viz:VizFrame>
Thanks for help. SOLVED IT. Used jQuery and made it dynamic on user click

Related

Filter on custom column in Fiori

I have custom column placed in smart table. It should have sort and filter option on column but it doesn't work.
Any ideas?
<smartTable:smartTable entityset="foo">
<ui:Table>
<ui:columns>
<ui:Column>
<ui:CustomData>
<core:CustomData key="p13Data" value='\{"columnKey": "key", "columnIndex":"0", "leadingProperty":"key", "isCurrency":"true", "sortProperty":"key", "filterProperty":"key" }'/>
</ui:CustomData>
<Text text="Column name"/>
<ui:template>
<HBox>
<Text renderWhitespace="true" text="{key} "/>
<core:Icon src="sap-icon://warning" visible={= ${key} === 'XX' ? true : false }> </core:Icon>
</HBox>
</ui:template>
</ui:Column>
</ui:columns>
</ui:Table>
</smartTable:smartTable>

Error: Cannot add direct child without default aggregation defined for control sap.f.cards.Header

I'm trying to add the custom data aggregation to a card control header. I've tried a lot of things but nothing seems to work, I'm always getting the same error:
Cannot add direct child without default aggregation defined for control sap.f.cards.Header
I also tried attaching the aggregation through the controller an it worked fine but I need it in my XML view.
This is my code:
<mvc:View controllerName="Dashboard2.Dashboard2.controller.View2" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
xmlns:f="sap.f" xmlns:w="sap.ui.integration.widgets" xmlns:card="sap.f.cards" xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core.customData" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz="sap.viz.ui5.controls">
<ScrollContainer height="100%" width="100%" vertical="true">
<f:GridContainer snapToRow="false" id="containerid">
<f:layout>
<f:GridContainerSettings rowSize="84px" columnSize="84px" gap="6px"/>
</f:layout>
<f:layoutXS>
<f:GridContainerSettings rowSize="70px" columnSize="70px" gap="6px"/>
</f:layoutXS>
<f:Card class="sapUiMediumMargin" width="300px" height="23rem" id="batchlectura">
<f:layoutData>
<f:GridContainerItemLayoutData columns="4"/>
</f:layoutData>
<f:header>
<card:Header title="{datos>Proceso}" subtitle="{path:'datos>Hora', formatter:'.formatter.Hour' }" iconSrc="sap-icon://insurance-house"
statusText="{path:'datos>Estatus', formatter:'.formatter.Estatus'}">
<customData>
<core:CustomData key="Name" value="Contactname"/>
</customData>
</card:Header>
</f:header>
<f:content>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='column'>
<viz:dataset>
<viz.data:FlattenedDataset data="{datos>/results}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Week" value="1"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Estimado" value="{datos>Estimado}"/>
<viz.data:MeasureDefinition name="Actual" value="{datos>Actual}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Estimado"/>
<viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure" values="Actual"/>
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Week"/>
</viz:feeds>
</viz:VizFrame>
</f:content>
</f:Card>
</f:GridContainer>
</ScrollContainer>
</mvc:View>
Nothing seems to work.
I hope someone can help me.
I believe <customData> should be <card:customData> otherwise the default namespace which is sap/m will be used.

Removing gap between chart cloumns in ui5

I am working on sap fiori project which displays data in chart format. In a dual series chart, I want to remove the gap in between columns, which you can see below:
I tried searching for attributes for vizframe.
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='100%' width="100%" vizType='column'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Week"
value="{Week}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
<viz.data:MeasureDefinition name="Cost"
value="{Cost}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"
values="Week" />
</viz:feeds>
</viz:VizFrame>
</layout:flexContent>
You can use the vizProperties and set plotArea => gap => innerGroupSpacing
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='100%' width="100%" vizType='column'
vizProperties="{ plotArea : {gap: {innerGroupSpacing:0}} }">

Line chart doesn't show in Object Page - Vizframe - SAPUI5

I am trying to make a line chart using Vizframe in an Object Page. Does anybody have an example how to do it? I searched the APIs and the sdn but find just samples with Layout element and not Object Page Layout element.
So when I test it within a simple Layout element (< layout > element) the line charts works fine. But when I try it with Object Page Layout elementt, the chart doesn't show and there is no errors in the console.
Thanks a lot,
Haylee N.
I joined the two different views here:
View.xml with Layout element ( that works )
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns:u="sap.uxap" xmlns:layout="sap.ui.layout" xmlns="sap.m" xmlns:f="sap.f"
xmlns:t="sap.ui.table" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:sample="test.controller.ChartsOverview"
xmlns:goals="test.view.goals" controllerName="test.controller.ChartsOverview"
height="100%">
<Page title="SAPUI5 App">
<layout:FixFlex id='chartFixFlex' minFlexSize="250">
<layout:fixContent>
<Panel id='settingsPanel' class="panelStyle" expandable="true"
expanded="true" headerText="Summary" width="auto">
<content>
<HBox class='settingsHBox'>
<VBox width="200px">
<Label text='Reports' design="Bold" class='settingsLabel'></Label>
</VBox>
</HBox>
</content>
</Panel>
</layout:fixContent>
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='50%' width="50%" vizType='timeseries_line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Date"
value="{Date}" dataType="date" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="timeAxis" type="Dimension"
values="Date" />
</viz:feeds>
</viz:VizFrame>
</layout:flexContent>
</layout:FixFlex>
</Page>
</mvc:View>
View.xml with Object Page Layout element ( that doesn't work )
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns="sap.uxap" xmlns:layout="sap.ui.layout" xmlns:m="sap.m" xmlns:f="sap.f"
xmlns:t="sap.ui.table" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:sample="test.controller.ChartsOverview"
xmlns:goals="test.view.goals" controllerName="test.controller.ChartsOverview"
height="100%">
<m:Page showHeader="true" title="{i18n>appTitle}" showFooter="true"
showNavButton="false">
<ObjectPageLayout id="ObjectPageLayout"
enableLazyLoading="false" subSectionLayout="TitleOnLeft"
showTitleInHeaderContent="true" showHeaderContent="true">
<headerTitle>
<ObjectPageHeader objectTitle="Quality Monitor"
objectSubtitle="Reports based on errors processed"
isObjectIconAlwaysVisible="false" isObjectTitleAlwaysVisible="false"
isObjectSubtitleAlwaysVisible="false" isActionAreaAlwaysVisible="true"
id="ObjectPageLayoutHeaderTitle">
<actions>
</actions>
</ObjectPageHeader>
</headerTitle>
<sections>
<ObjectPageSection title="Charts">
<subSections>
<ObjectPageSubSection>
<blocks>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='50%' width="50%" vizType='timeseries_line'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition
name="Date" value="{Date}" dataType="date" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Revenue"
value="{Revenue}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Revenue" />
<viz.feeds:FeedItem uid="timeAxis" type="Dimension"
values="Date" />
</viz:feeds>
</viz:VizFrame>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
</ObjectPageLayout>
</m:Page>
</mvc:View>
Whoever may come here for an answer, giving the height of vizframe with pixels does the trick.
As pointed by people in this question some controls use adaptive containers that adapt height to fit their content. If that content uses "100%" of height (which is initially 0) the content efectively becomes 0px and those controls end up adapting their hight to 0px height of the content. For the same reason if you use fixed height instead of a percentage it actually works.
For me personally, this problem only occurred because I blindly copied sample code for VizFrame into IconTabBar container, without realizing the difference in containers used.
Solution to my problem: remove the height="100%" property from VizFrame, which will not force height and in turn will allow the height of VizFrame to be calculated based on its content (title, actual chart, legend and such), instead of container that VizFrame is placed into.

How can I add more values to SAPUI5 vizFrame pie chart on select?

I am using this sample
<viz:VizFrame id="oVizFrame" busy="false" busyIndicatorDelay="1000" visible="true" uiConfig="{ 'applicationSet': 'fiori' }" vizType="pie" legendVisible="true">
<viz:dataset>
<viz.data:FlattenedDataset data="{/book}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Item Category" value="{Item Category}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition group="1" name="Profit" value="{Profit}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<!-- sap.viz.ui5.data.Dataset -->
<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure" values="Profit"/>
<viz.feeds:FeedItem uid="color" type="Dimension" values="Item Category"/>
</viz:feeds>
</viz:VizFrame>
I am not able to add more book properties like City and Profit to the existing pie chart. Please guide me.
You can certainly add more dimensions to the pie chart but only one measure will be allowed.
<viz:VizFrame id="oVizFrame" busy="false" busyIndicatorDelay="1000" visible="true" uiConfig="{ 'applicationSet': 'fiori' }" vizType="pie" legendVisible="true">
<viz:dataset>
<viz.data:FlattenedDataset data="{/book}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Item Category" value="{Item Category}"/>
<viz.data:DimensionDefinition name="City" value="{City}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition group="1" name="Profit" value="{Profit}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<!-- sap.viz.ui5.data.Dataset -->
<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure" values="Profit"/>
<viz.feeds:FeedItem uid="color" type="Dimension" values="Item Category"/>
<viz.feeds:FeedItem uid="color" type="Dimension" values="City"/>
</viz:feeds>
</viz:VizFrame>