Multi Line Chart using VizFrame

[dominik-st]

Hi,

I'm looking for a solution to create a multi line chart (with two dimensions/axises) like in the attached screenshot using a VizFrame (sap.viz.ui5.controls.VizFrame , XML View)

This example in the screenshot uses the deprecated controls from the package sap.viz.ui5 .

The XML code for the example is:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:oviz="sap.viz.ui5" xmlns:vtypes="sap.viz.ui5.types"
  xmlns:vdata="sap.viz.ui5.data" xmlns:vizc="sap.viz.ui5.controls">
  <oviz:Line xmlns="sap.viz.ui5" id="idChartParkRight" width="100%" height="250px" >
  <title>
  <vtypes:Title text="Asset Production weekly" visible="true"/>
  </title>
  <plotArea>
  </plotArea>
  <dataset>
  <FlattenedDataset xmlns="sap.viz.ui5.data" data="{path: '/productionData', sorter : {
            path : 'WEEK' }, parameters: {select:'WEEK, WTGID, DisplayProduction' }}">
  <dimensions>
  <DimensionDefinition axis="1" name="Week" value="{WEEK}"/>
  <DimensionDefinition axis="2" name="WTGID" value="{WTGID}"/>
  </dimensions>
  <measures>
  <MeasureDefinition name="Production" value="{DisplayProduction}"/>
  </measures>
  </FlattenedDataset>
  </dataset>
  </oviz:Line>
</core:FragmentDefinition>

All other VizFrame Chats in my App work fine, but this is the last thing I can't solve without using the deprecated controls.

Is there a chance to convert the example to an VizFrame Chart?

Thanks in advance and best regards

Dominik

[dominik-st · Accepted solution]

Hi Rudy,

in the working example the Asset had to be defined as a second Dimension:

1.   <dimensions> 
2.   <DimensionDefinition axis="1" name="Week" value="{WEEK}"/> 
3.   <DimensionDefinition axis="2" name="WTGID" value="{WTGID}"/> 
4.   </dimensions> 

This works nearly perfect, but the controls of the package sap.viz.ui5 are deprecated.

So there should  be a way to migrate this functionality to a Chart from the package sap.viz.ui5.controls.VizFrame .

Use one Measure per Asset sound's good as well, but how should that be defined in the binding?

Best regards

Dominik

Edit:

I have create two JSBins:

- this one uses the deprecated control and works

JS Bin - Collaborative JavaScript Debugging

- this one uses the VizFrame and doesn't work. It should display the same Chart like the first example

JS Bin - Collaborative JavaScript Debugging

[Rudy_Clement1 · Accepted solution]

That is how it works in the example of SAP (SAPUI5 Explored).

But using 2 dimensions should work as well, it should categorize based on the second dimension.

Can you check if you've used a space after the comma when adding WTGID to the feeditem?

<viz.feeds:FeedItem uid="categoryAxis" type="Dimension"values="MONTH, WTGID"/>

[dominik-st · Accepted solution]

The example on the Explored page uses 2 Series with a fixes Binding ({Cost} & {Revenue} ).

But I have not a fixed number of series.

I get the same error when using a space or no space

Best regards

Dominik

[former_member196805 · Accepted solution]

Hello Dominik,

It is because you have defined vizType="dual_line" but only offers 1 measure value. To plot a dual_line chart, you need to have, at least, 2 measure values and assign 1 to valueAxis and 1 to valueAxis2 like below:

<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Actual"/> 

<viz.feeds:FeedItem uid="valueAxis2" type="Measure" values="anotherActual"/>

Of course, you need to define this "anotherActual" as Measure under flattenedDataset beforehand.

  Hope this helps.

BR,

Chapman

[dominik-st · Accepted solution]

Hi,

this is the XML Definition:

<viz:VizFrame id="idChartParkRightTrial" height="250px" width="100%" uiConfig="{applicationSet:'fiori'}" vizType="dual_line"
  vizProperties="{ title: { visible: false }, valueAxis: { title: { visible: false } }, categoryAxis: { title: { visible: false } }, plotArea: { colorPalette: ['#e17b24', '#d1d6e0', '#61a656','#848f94' ], gap: { visible: false }, isFixedDataPointSize: false, window: { start: null, end: null }, timeAxis: { interval: { unit: 'auto' } } } }">
  <viz:dataset>
  <viz.data:FlattenedDataset
  data="{ path: '/productionData', sorter: { path: 'MONTH', descending: false }, parameters: { select: 'MONTH,WTGID,DisplayProduction,ProductionBudget' } }">
  <viz.data:dimensions>
  <viz.data:DimensionDefinition name="MONTH" value="{MONTH}"/>
  </viz.data:dimensions>
  <viz.data:measures>
  <viz.data:MeasureDefinition name="Actual" value="{DisplayProduction}"/>
  <viz.data:MeasureDefinition name="Target" value="{ProductionBudget}"/>
  </viz.data:measures>
  </viz.data:FlattenedDataset>
  </viz:dataset>
  <viz:feeds>
  <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Actual"/>
  <viz.feeds:FeedItem uid="valueAxis2" type="Measure" values="Target"/>
  <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="MONTH"/>
  </viz:feeds>
</viz:VizFrame>

and this is the result:

If I try to add the second dimension like:

<viz.data:DimensionDefinition name="WTGID" value="{WTGID}"/>

...

<viz:feeds>

  <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Actual"/>

  <viz.feeds:FeedItem uid="valueAxis2" type="Measure" values="Target"/>

  <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="MONTH, WTGID"/>

</viz:feeds>

The result is

or

<viz:feeds>

  <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Actual"/>

  <viz.feeds:FeedItem uid="valueAxis2" type="Measure" values="Target"/>

  <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="MONTH"/>

  <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="WTGID"/>

</viz:feeds>

the result is

Best regards

Dominik

[former_member196805 · Accepted solution]

Hello Dominik,

  I have a sample here https://jsfiddle.net/Chapman/emL940zx/ and the flattenedDataset and feeding definition are similar to yours. Feel free to change compare it with yours and see if there are any differences

  I guess you had defined both MONTH and WTGID as dimension under flattenedDataset before feeding both as categoryAxis, correct?

  I am a bit curios on the sorter function you have inside data as it should not look that way, but I am not sure.

BR,

Chapman

[dominik-st · Accepted solution]

Hi Chapman,

thank you for your sample.

This example basing on your data shows what I want to achieve:

https://jsfiddle.net/fvuu2ehs/

(one Line for each country)

The sorter is working fine, this the network trace for the OData request:

GET productionData?$skip=0&$top=100&$orderby=MONTH%20asc&$filter...

Best regards

Dominik

[former_member196805 · Accepted solution]

Hello Dominik,

  You have sap-viz.js chart library in your snippix but I thought you wish to use vizFrame. They are both different chart libraries and they cannot work with each other.

  Please clarify.

BR,

Chapman.

[dominik-st · Accepted solution]

Hi Chapman

I know that these are different libraries and that the Charts from the package sap.viz.ui5 are deprecated.

Therefore I want to build the multi line chart from my snippet using a VizFrame.

Best regards

Dominik

[former_member196805 · Accepted solution]

Hello Dominik,

  Please check https://jsfiddle.net/Chapman/emL940zx/ again. It is now look identical to your sap-viz.js sample.

BR,

Chapman

[Rudy_Clement1 · Accepted solution]

Hi Dominic, Chapman,

That indeed works! I thought we've tried that already...

With the asset/production data, it also works if you use these settings:

     var oSettings = {

          dimensions : [

               {name: "Date", value: "{DATE_SQL}"},

               {name: "Wtg", value: "{WTGID}"}

          ],

          measures : [

               {name : "Production", value : "{DisplayProduction}"},   

          ],

          data : {

               path : "/d/results",

          }

     };

Together with these feed items:

     var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

          "uid": "valueAxis",

          "type": "Measure",

          "values": "Production"

     }),

     feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

          "uid": "categoryAxis",

          "type": "Dimension",

          "values": "Date"

     }),

     feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({

          "uid": "color",

          "type": "Dimension",

          "values": "Wtg"

     });

     oVizFrame.addFeed(feedValueAxis);

     oVizFrame.addFeed(feedCategoryAxis);

     oVizFrame.addFeed(feedColor);

Kind regards,

Rudy.

[dominik-st · Accepted solution]

Thank you very much guys !!!!

I didn't know that the color Feed is the correct one for this case.

The chart looks really nice now (with maximize function, formatter, etc.), that's exactly what I wanted.

Many many thanks and best regards

Dominik

[former_member196805]

Here is the sample of vizFrame Line Chart SAPUI5 Explored.

[dominik-st]

Yes, but I'm looking for a multi line chart (with two dimensions/axises) like in the attached screenshot .

When I add a second Dimension to the VizFrame I get the following Chart:

But I want one line in the chart for each asset.

[former_member196805]

   <viz:dataset>

   <viz.data:FlattenedDataset data="{/milk}">

   <viz.data:dimensions>

   <viz.data:DimensionDefinition name="Store Name"

   value="{Store Name}" />

   <viz.data:DimensionDefinition name="Dimension2"

   value="{Dimension2}" />

   <viz.data:DimensionDefinition name="Dimension3"

   value="{Dimension3}" />

   </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='valueAxisFeed' uid="valueAxis2" type="Measure"

   values="Cost" />

   <viz.feeds:FeedItem uid="categoryAxis" type="Dimension"

   values="Store Name, Dimension2, Dimension3" />

   </viz:feeds>

Taking code from the Explore sample page and in order to plot a info/dual_line chart, the above could be the definition for flattenedDataset and feeding. You could try feed the measures as valueAxis2 and these measures will be plotted against the 2nd valueAxis.

[dominik-st]

Hi,

when adding the second Dimension Definition the charts shows the error 50017 (invalid data binding).

[former_member196805]

Could you share your code on how you add the 2nd dimension?

[dominik-st]

Hi Chapman,

this is my Code:

<commons:ChartContainer id="idChartContainerParkRight" showFullScreen="true" showPersonalization="false" autoAdjustHeight="false"
showLegend="false" personalizationPress="attachPersonalizationPress" contentChange="attachContentChange" title="Asset Performance"
visible="true">
<commons:content>
<commons:ChartContainerContent icon="sap-icon://line-chart">
<commons:content>
<viz:VizFrame id="idChartParkRight" height="250px" width="100%" uiConfig="{applicationSet:'fiori'}" vizType="dual_line"
vizProperties="{ title: { visible: false }, valueAxis: { title: { visible: false } }, categoryAxis: { title: { visible: false } }, plotArea: { colorPalette: ['#e17b24', '#d1d6e0', '#61a656','#848f94' ], gap: { visible: false }, isFixedDataPointSize: false, window: { start: null, end: null }, timeAxis: { interval: { unit: 'auto' } } } }">
<viz:dataset>
<viz.data:FlattenedDataset
data="{ path: '/productionData', sorter: { path: 'MONTH', descending: false }, parameters: { select: 'MONTH,WTGID,DisplayProduction' } }">
<viz.data:dimensions>
<viz.data:DimensionDefinition axis="1" name="MONTH" value="{MONTH}"/>
<!-- Second Dimension -->
<viz.data:DimensionDefinition axis="2" name="WTGID" value="{WTGID}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Actual" value="{DisplayProduction}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Actual"/>
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="MONTH"/>
</viz:feeds>
</viz:VizFrame>
</commons:content>
</commons:ChartContainerContent>
</commons:content>
</commons:ChartContainer>

Best regards

Dominik

[Rudy_Clement1]

Hi Dominik,

I think you need to refer to 'WTGID' in the FeedItem as well. It should look something like this:

<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="MONTH, WTGID"/>

or

<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="MONTH", "WTGID"/>

But I'm not sure what you are trying to achieve. What does WTGID stand for? Don't you need a second measure instead of a second dimension?

Kind regards,

Rudy.

[dominik-st]

Hi Rudy,

the WTGID is the Id of an Asset. There should be one line for each asset in the Chart (like in the first screenshot).

Both Bindings do not work:

values="MONTH,WTGID"

-> 50017 (invalid data binding).

values="",""

-> XML syntax Error

Best regards

Dominik

[Rudy_Clement1]

Hi Dominik,

Don't you need multiple measures instead of multiple dimensions? I mean one measure per asset...

Kind regards,

Rudy.