Skip to Content
Author's profile photo abhishek lohiya

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

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.

Capture.PNG

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

1.PNG

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

2.PNG

5.Enter Project and click next.

3.PNG

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

5.PNG

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

7.PNG

8. Enter project Namespace and click next.



8.PNG

9. Click on finish.

9.PNG

10. Now you can see you project file structure.

10.PNG

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

11.PNG

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

12.PNG

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

1.PNG

14. Select line chart from the card .click Next

2.PNG

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

3.PNG

16.Click on finish.

4.PNG

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

5.PNG

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.

6.PNG

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.


7.PNG

Output



8.PNG

BUBBLE CHART


localAnnotations_1(4).xml file ——–BUBBLE chart annotation.

Manifest.json ——Use Entity set Invoices


9.PNG


Output


10.PNG

Regards,

Abhishek

Assigned Tags

      21 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Abhishek,

      Thanks for very useful and detailed blog..

      Author's profile photo Aparna Khare
      Aparna Khare

      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

      Author's profile photo abhishek lohiya
      abhishek lohiya
      Blog Post Author

      Hi Aparna ,

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

      Regards,

      Abhishek

      Author's profile photo Aparna Khare
      Aparna Khare

      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

      Author's profile photo Ram Kumar Karunamurthy
      Ram Kumar Karunamurthy

      Hi Abhishek,


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

      /wp-content/uploads/2016/03/1_914876.png

      Error Log:

      /wp-content/uploads/2016/03/2_914877.png

      Manifest file:

      /wp-content/uploads/2016/03/3_914878.png

      Project Hierarchy:

      /wp-content/uploads/2016/03/4_914975.png

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

      Regards,

      Ram

      Author's profile photo Former Member
      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'.

      Error.PNG

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

      Regards,

      Neethu

      Author's profile photo Trond Stroemme
      Trond Stroemme

      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

      Author's profile photo Former Member
      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/wp-content/uploads/2016/09/2016_09_06_13_42_37_1030412.png

      Author's profile photo Priyanka Sahadev
      Priyanka Sahadev

      Hi,

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

      Regards,

      Priyanka

      Author's profile photo Michael Appleby
      Michael Appleby

      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

      Author's profile photo SANDY SHAVLIK
      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 

      Author's profile photo Aurin Ghosh
      Aurin Ghosh

      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

      Author's profile photo Henk Oosterhuis
      Henk Oosterhuis

      Hi Abhisek,

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

      Thanks,

      Henk

      Author's profile photo Soumyadeep Dasgupta
      Soumyadeep Dasgupta

      Hi, Could you please attach the annotation files?

      Author's profile photo Former Member
      Former Member

      please provide annotations file. project remains incomplete with errors

      Author's profile photo Former Member
      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!

      Author's profile photo ramees rahath
      ramees rahath

      Hi  abhishek lohiya

      Can you please provide the snippet of your annotation file.

      Thanks,

      Rameez

      Author's profile photo Former Member
      Former Member

      Hi

      Could you please post the annotation file

      Author's profile photo Bing Liu
      Bing Liu

      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.

      "

       

       

      Author's profile photo Erik Hoven
      Erik Hoven

       

      Great blog !!!!

      Author's profile photo Veera Sudheer Kumar Gangisetty
      Veera Sudheer Kumar Gangisetty

      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