cancel
Showing results for 
Search instead for 
Did you mean: 

Multi Line Chart using VizFrame

dominik-st
Participant
0 Kudos

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

Accepted Solutions (1)

Accepted Solutions (1)

dominik-st
Participant
0 Kudos

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
Participant
0 Kudos

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
Participant
0 Kudos

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
Contributor
0 Kudos

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
Participant
0 Kudos

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
Contributor
0 Kudos

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
Participant
0 Kudos

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
Contributor
0 Kudos

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
Participant
0 Kudos

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
Contributor
0 Kudos

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
Participant
0 Kudos

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
Participant
0 Kudos

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

Answers (1)

Answers (1)

former_member196805
Contributor
0 Kudos

Here is the sample of vizFrame Line Chart SAPUI5 Explored.

dominik-st
Participant
0 Kudos

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
Contributor
0 Kudos

   <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
Participant
0 Kudos

Hi,

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

former_member196805
Contributor
0 Kudos

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

dominik-st
Participant
0 Kudos

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
Participant
0 Kudos

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
Participant
0 Kudos

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
Participant
0 Kudos

Hi Dominik,

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

Kind regards,

Rudy.