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.
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
Hi Abhishek,
Thanks for very useful and detailed blog..
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
Hi Aparna ,
Can you please post the manifest.json and annotation file and snap of your file structure.
Regards,
Abhishek
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
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
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
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
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
Hi,
Even I am getting the same error, No dropdown in the entity sets.
Regards,
Priyanka
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
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
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
Hi Abhisek,
Can you please provide the annotation files? There seems to be no attachments.
Thanks,
Henk
Hi, Could you please attach the annotation files?
please provide annotations file. project remains incomplete with errors
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!
Hi abhishek lohiya
Can you please provide the snippet of your annotation file.
Thanks,
Rameez
Hi
Could you please post the annotation file
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.
"
Great blog !!!!
Hello abhishek lohiya,
I have tried creating the donut chart using the northwind service, below is the manifest.json.