Step by step to create Bar Chart in Webclient UI
You can download the library and example from this link.
You can follow this document to create Bar Chart and embed it in your CRM system.
Although there are lots of js and css file in the downloaded library, in this sample only 8 of them are needed:
You can find all of them from attached file, just rename JChartLib.zip.txt as JChartLib.zip and unzip it.
Go to SE80 mime repository, follow the path “/bc/bsp/sap/crm_ui_frame” to find folder “CRM_UI_FRAME”. Create a folder “jchart” under it via context menu Create->Folder:
Repeat the operation ans ensure all the 8 files are created in mime repository correctly. ( The mime type for css file is “text/css”) Once done, it looks like below:
2. Create a new UI component and draw Bar Chart there
copy the source code of file main.html from attachment into the empty view you just created in UI component:
A brief explanation on the source code of main.html
- line18: create a new chart instance
- line19: position the chart into html element with ID = divChart1
- line20: set chart type as Bar
- line21: feed the chart with JSON data
- line22: enable 3D effect to make the chart look more fancy
- line23~25: set title
line28~line73: hard code the JSON data stream for chart
line81~line112: since I am not happy with the default color defined in css file, so I redefine them here.
So far, the development of webclient UI component is finished.
3. Create a new work center and put the UI component into it
Please find step by step about how to achieve it from this link.
Feel free to adapt the source code of this sample to meet with your own requirement.
Update on 2017-05-27