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

To report this post you need to login first.

17 Comments

You must be Logged on to comment or reply to a post.

  1. 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

    (0) 
      1. 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

        (0) 
  2. 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

    (0) 
  3. Neethu Kaimal

    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

    (0) 
  4. 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

    (0) 
  5. Erik Fosser

    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

    (0) 
      1. 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

        (0) 
    1. 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 

      (0) 
  6. 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

    (0) 
  7. Nicolai Hansen

    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!

    (0) 

Leave a Reply