Steps to Create Analytic card on overview page using northwind odata service (V3) in web ide.

[former_member187188]

Hi All,

In this blog you will find the steps to create different charts on overview page in web ide using V3 northwind odata service .

LINE CHART

1.Create Account on Cloud Cockpit and open Web IDE.

2. Set the destination in Web IDE.

3. Enable the overview plugin go to Setting -> optional plugin ->select Overview Plugin and save.

4. Create a new project by selecting new project from template and select overview page template.

5.Enter Project and click next.

6. Select Service URL select the northwind odata sercvice and enter URL http://services.odata.org/V3/Northwind/Northwind.svc/

7. Upload any annotations file (.xml ) we will update that file afterward.

8. Enter project Namespace and click next.

9. Click on finish.

10. Now you can see you project file structure.

11. If you do not have seperate annotation folder .Create new annotations folder and copy paste local_annotation.xml file in annotations folder .

12. To create cards right click on the project.Select new ->card

13. Select the data source from existing Datasource.Click next

14. Select line chart from the card .click Next

15. Select the entity set Products and give Category name.

16.Click on finish.

Check your manifest.json file  .You will get all the information that you have entered while creating cards.

17. open annotation file and copy paste the content of attached localAnnotations_1(2).xml file .

18.Right click on the project and run to see ouput.

Follow the same steps for  Donut and Bubble Chart.

Annotations for other two chart is attached just copy paste the content in your annotation file.

DONUT CHART

localAnnotations_1(3).xml file --------DONUT chart annotation

Manifest.json ------Use Entity set category_Sales_for_1997.

Output

BUBBLE CHART

localAnnotations_1(4).xml file --------BUBBLE chart annotation.

Manifest.json ------Use Entity set Invoices

Output

Regards,

Abhishek

[Former Member]

Hi Abhishek,

Thanks for very useful and detailed blog..

[former_member186958]

Hi Abhishek,

   I'm trying the same Line Chart and have set the same annotations xml.

I get the below error

FlattenedDataset manages the 'data' aggregation only via data binding. The method 'getData' therefore cannot be used programmatically

Can you please guide

[former_member187188]

Hi Aparna ,

Can you please post the manifest.json and annotation file and snap of your file structure.

Regards,

Abhishek

[former_member186958]

Hi Abhishek,

  We are not using component I build a model and then initialize main controller of sap.ovp.lib

"cards" : [

  {

  "model" : "NorthwindModel",

  "template" : "sap.ovp.cards.list",

  "settings" : {

  "entitySet" : "Products",

  "title" : "New Trends in Pharmaceutical Packaging Design",

  "category" : "",

  "imageUrl" : "sap/apimgmt/ui/analytics/img/275945_l_srgb_s_gl.jpg"

  },

  "id" : "ovp.rollout.card00"

  },

  {

  "model" : "NorthwindModel",

  "template" : "sap.ovp.cards.charts.line",

  "settings" : {

  "category" : "",

  "title" : "{{card00_title}}",

  "entitySet" : "Products",

  "selectionAnnotationPath" : "com.sap.vocabularies.UI.v1.SelectionVariant",

  "chartAnnotationPath" : "com.sap.vocabularies.UI.v1.Chart",

  "presentationAnnotationPath" : "com.sap.vocabularies.UI.v1.PresentationVariant",

  "dataPointAnnotationPath" : "com.sap.vocabularies.UI.v1.DataPoint",

  "idenfiticationAnnotationPath" : "com.sap.vocabularies.UI.v1.Identification"

  },

  "id" : "ovp.rollout.card01"

  },

  ],

  "baseUrl" : "./",

  "title" : "Procurement Overview Page",

  "description" : "Pharmaceutical Equipment",

  "cardContainerFragment" : "sap.ovp.app.CardContainer",

  "icon" : "sap/ovp/rollout/img/273035_l_srgb_s_gl.jpg"

  };

And annotation xml is the same as for line chart

[ramkumar_karunamurthy]

Hi Abhishek,

I'm trying to create line chart in same northwind model. But tile, shows that cannot load card.

Error Log:

Manifest file:

Project Hierarchy:

I don't know, where i am doing wrong. Kindly help me to fix this issue.

Regards,

Ram

[Former Member]

Hi Abhishek,

I am also facing the same issue that Ram kumar facing.

While running the application, I am unable to see the data.

It is showing 'cannot load card'.

It will be really helpful if you can sort out this issue.

Regards,

Neethu

[Former Member]

Hi Abhishek,

any idea why the donut chart just shows the first 4 entries from the Sales 1997 OData recordset?

I tried to replicate your example using one of our in-house Gateway-based services (which I'd previously created), and I see the same thing. In my Table list card, I get a total of 10 entries (corresponding to the total number of records in my recordset), but my donut chart only shows 4. The first 4 as they come back from the service, that is.

Is this a limitation of the Donut chart? If so, would it mean we have to "tailor" our OData services to accommodate this (consolidate data, filter, sort...??) Or is there a way to set this in the annotations?

I also tried editing the annotation files in Web IDE using the "open with... annotation editor" option, but as not much doc exists, this is still rather cryptical to me.

Lastly, thanks for a great and inspiring blog!

Regards,

Trond

[Former Member]

Hi Abhishek

We get to the point where we are supposed to select the Entity Set in the New Card Template wizard. In the drop down we do not see any Entity Sets to select. Anyone else getting the same error?

Kind regards

Erik

[former_member187251]

Hi,

Even I am getting the same error, No dropdown in the entity sets.

Regards,

Priyanka

[agentry_src]

Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

Thanks, Mike (Moderator)

SAP Technology RIG

[sandy_shavlik]

Hi Priyanka

I encountered the same issue, no entries in Entity Set dropdown.

I abandoned the New Card wizard and just updated Manifest.json with code listed at end of step 16.  I completed step 17 and ran the page.  It successfully generated the card on my overview page. 

Sandy 

[Former Member]

Hi Abhishek,

I am trying to create the OVP following yours steps. But I am unable to find the annotations file as mentioned attached in your article, there seems to be no attachments.
Can you kindly help in this.

Thanks,
Aurin

[henk_oosterhuis]

Hi Abhisek,

Can you please provide the annotation files? There seems to be no attachments.

Thanks,

Henk

[former_member192018]

Hi, Could you please attach the annotation files?

[Former Member]

please provide annotations file. project remains incomplete with errors

[Former Member]

Hi abhishek.lohiya

As earlier requested can you please provide at snippet of your annotation file?

I have used the annotation creater and my chart is not showing up.. It would be nice if you could provide an example.

 

Cheers!

[former_member223620]

Hi  abhishek.lohiya

Can you please provide the snippet of your annotation file.

Thanks,

Rameez

[Former Member]

Hi

Could you please post the annotation file

[former_member189221]

Thanks Abhishek for this nice blog..

By the way, for anyone starting learning like me, please be aware of the differences brought about by new versions of WEB-IDE.

Firstly, " 3. Enable the overview plugin go to Setting -> optional plugin ->select Overview Plugin and save." can be skipped since the OVP template has been found by filtering “Fiori Element” or "all category" at step 4.

Secondly, "6. Select Service URL select the northwind odata sercvice and enter URLhttp://services.odata.org/V3/Northwind/Northwind.svc/"

if “OData version 3 is not supported” is shown as a error message, please  Enter "V2/Northwind/Northwind.svc" for the relative URL.

"

 

 

[former_member184443]

 

Great blog !!!!

[VeeraSudheer]

Hello abhishek.lohiya,

 

I have tried creating the donut chart using the northwind service, below is the manifest.json.

"Card2": {

                "model": "mainModel",

                "template": "sap.ovp.cards.charts.donut",

                "settings": {

                    "title" : "Sales",

                    "category": "Category Sales",

                    "entitySet": "Category_Sales_for_1997",

                    "selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant",

                    "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#Category_Sales_for_1997",

                    "presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PrasentationVariant",

                    "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint",

                    "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification"

                }

            }

annotation.xml:

<Annotations Target="NorthwindModel.Category_Sales_for_1997">

            <Annotation Term="UI.Chart" Qualifier="CategorySales">

                <Record Type="UI.ChartDefinitionType">

                    <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut" />

                    <PropertyValue Property="MeasureAttributes">

                        <Collection>

                            <Record Type="UI.ChartMeasureAttributeType">

                                <PropertyValue Property="Measure" PropertyPath="CategorySales" />

                                <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />

                            </Record>

                        </Collection>

                    </PropertyValue>

                    <PropertyValue Property="DimensionAttributes">

                        <Collection>

                            <Record Type="UI.ChartDimensionAttributeType">

                                <PropertyValue Property="Dimension" PropertyPath="CategorySales" />

                                <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />

                            </Record>

                        </Collection>

                    </PropertyValue>

                    <PropertyValue Property="Measures">

                        <Collection>

                            <PropertyPath />

                        </Collection>

                    </PropertyValue>

                    <PropertyValue Property="Actions" />

                    <PropertyValue Property="Dimensions">

                        <Collection>

                            <PropertyPath />

                        </Collection>

                    </PropertyValue>

                </Record>

            </Annotation>

            </Annotations>

Facing below error when I am trying for card.

please help me here.

Regards,

Veera Sudheer