SAP UI5 Stacked Column with ODATA - odata

Question

I'm sitting on this thing now for hours with no luck. If got an SAP HANA with XPS12 where I'm doing a little bit of data visualization. I used the TwitterAdapter to load some data into the HANA and then ran a Sentiment Analysis on this for each political party. Made an ODATA Service out of it and now I try to display the results using SAP UI5. This worked fine for all the separated parties, but no luck with an overview page.
What I'm trying to achieve:
A stacked column chart, each column representing one party (SPD, CDU etc.) and the colors each should represent the count of each detected sentiment of their tweets.
My xsodata file looks like this:
service {
"tester_01::CV_FDP" as "FDP"
keys generate local "ID1"
aggregates always;
"tester_01::CV_AFD" as "AFD"
keys generate local "ID1"
aggregates always;
"tester_01::CV_SPD" as "SPD"
keys generate local "ID1"
aggregates always;
"tester_01::CV_GRUENE" as "GRUENE"
keys generate local "ID1"
aggregates always;
"tester_01::CV_LINKE" as "LINKE"
keys generate local "ID1"
aggregates always;
"tester_01::CV_CDUCSU" as "CDUCSU"
keys generate local "ID1"
aggregates always;
}
ODATA Explorer Screenshot
Somehow "ID" is the count but I don't know where I went wrong there. Doesn't matter anyway, as I just need to display this now.
My Views and Controllers for the detail pages looks like this and it works:
sap.ui.controller("content.Afd", {
onInit: function() {
var dataModel = new sap.ui.model.odata.ODataModel(
"models/tester.xsodata"
);
this.getView().setModel(dataModel);
},
onExit: function() {
},
onAfterRendering: function() {
},
onBeforeRendering: function() {
}
});
View:
<mvc:View controllerName="content.Afd"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:table="sap.ui.table"
xmlns:viz="sap.viz.ui5.controls"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data"
xmlns:l="sap.ui.commons.layout"
xmlns:html="http://www.w3.org/1999/xhtml">
<html:p/>
<table:Table
id="AfdTable"
visibleRowCount="10"
selectionMode="Single"
navigationMode="Paginator"
editable="false"
rows="{/AFD}">
<table:Column sortProperty="ID">
<table:label>
<Label text="Häufigkeit" design="Bold"/>
</table:label>
<table:template>
<Label text="{ID}"/>
</table:template>
</table:Column>
<table:Column sortProperty="TA_TOKEN">
<table:label>
<Label text="Wort" design="Bold"/>
</table:label>
<table:template>
<Label text="{TA_TOKEN}"/>
</table:template>
</table:Column>
<table:Column sortProperty="TA_TYPE">
<Label text="Stimmung" design="Bold"/>
<table:template>
<Label text="{TA_TYPE}"/>
</table:template>
</table:Column>
</table:Table>
<viz:VizFrame
id="afd_pie"
width="100%"
height="800px"
vizType="info/pie"
uiConfig="{
applicationSet:'fiori'
}"
vizProperties="{
plotArea:{
dataLabel : {
visible : true
},
dataPointSize : {
min : 0,
max : 4
}
},
title: {
alignment :'left',
visible : true,
text : 'Tweet Stimmung'
}
}">
<viz:dataset>
<viz.data:FlattenedDataset id="flattenedData" data="{/AFD}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Typ" value="{TA_TYPE}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Anzahl" value="{ID}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure" values="Anzahl" />
<viz.feeds:FeedItem uid="color" type="Dimension" values="Typ" />
</viz:feeds>
</viz:VizFrame>
</mvc:View>
Screenshot:
Screenshot Detail Site
So how the hell do I get now a single overview page with the stacked column chart? I tried everything like this:
<mvc:View controllerName="content.Uebersicht"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:viz="sap.viz.ui5.controls"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data"
xmlns:html="http://www.w3.org/1999/xhtml">
<!-- view content goes here -->
<html:p/>
<viz:VizFrame
id="barchart"
width="100%"
height="800px"
vizType="stacked_column"
uiConfig="{
applicationSet:'fiori'
}"
vizProperties="{
plotArea:{
dataLabel : {
visible : true
},
dataPointSize : {
min : 0,
max : 4
}
},
title: {
alignment :'left',
visible : true,
text : 'Übersicht über Stimmung'
}
}">
<viz:dataset>
<viz.data:FlattenedDataset data="{/}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Partei1"
value="AfD" />
<viz.data:DimensionDefinition name="Partei2"
value="CDU/CSU" />
<viz.data:DimensionDefinition name="Partei3"
value="AfD" />
<viz.data:DimensionDefinition name="Partei4"
value="CDU/CSU" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Count1"
value="{/SPD:ID}" />
<viz.data:MeasureDefinition name="Count2"
value="{/AFD:ID}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure"
values="Count1,Count2" />
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension"
values="Partei1" />
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension"
values="Partei2" />
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension"
values="Partei3" />
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension"
values="Partei4" />
</viz:feeds>
</viz:VizFrame>
</mvc:View>
That produces a Invalid Data Binding Error.
Please help.
Thanks