Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

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

$
0
0

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 URLhttp://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


Viewing all articles
Browse latest Browse all 789

Trending Articles