Skip to Content
Author's profile photo Jerry Wang

Step by step to create Bar Chart in Webclient UI

Recently I am asked by my manager to give him a report containing the number of open, in process and closed tickets assigned to my responsible component. Since I am learning Javascript recently, I decide not to achieve the report via excel but choose Javascript instead.

Here below is the Bar chart created via a third party Javascript library jChartFX.

You can download the library and example from this link.

/wp-content/uploads/2014/08/clipboard1_511696.png

You can follow this document to create Bar Chart and embed it in your CRM system.

1. Upload necessary Javascript file and css file into mime repository

Although there are lots of js and css file in the downloaded library, in this sample only 8 of them are needed:

/wp-content/uploads/2014/08/clipboard2_511697.png

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:

/wp-content/uploads/2014/08/clipboard3_511698.png

Then click on folder jchart and choose “Create->MIME Object” from context menu, maintain Mime Type as “application/x-javascript” and click Start Editor button:

/wp-content/uploads/2014/08/clipboard4_511699.png

The notepad application is automatically launched, and just copy the source code of JavaScript file from the zip file of this document.

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:

/wp-content/uploads/2014/08/clipboard5_511700.png

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:

/wp-content/uploads/2014/08/clipboard6_511701.png

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

/wp-content/uploads/2014/08/clipboard7_511702.png

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

The same step could be performed to integrate other third party JavaScript libraries to WebClient UI framework, see another example from this blog Display count down in WebClient UI.

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Andrei Vishnevsky
      Andrei Vishnevsky

      Hello Jerry!!

      Great one! Any chance to see the code between lines 28 and 112? The screenshot contains only the code from 16 to 26.

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hello Andrei,

      The complete source code is in attachment of this document, file "main.html". 🙂

      Best regards,

      Jerry

      Author's profile photo yang yang
      yang yang

      Great! Very useful!

      Thanks for your work, Jerry!

      Author's profile photo Lars Johnson
      Lars Johnson

      Hi Jerry,

      Great document!  It is clear and concise, showing the detailed steps needed to create charts that so many people are asking for.

      Thanks for linking to the external content.  This helps so much.

      Best,

      Lars

      Author's profile photo Atul Jaiswal
      Atul Jaiswal

      Awesome document Jerry,

      Just few doubts. I downloaded the library from jChartFX. I did not see jquery-1.7.1.js file there. Is this file required? If so then from where can i have this?

      Also did not get luck to see the attachment you appended in the doc. since it is ending up with some corrupted text file containing special chars only.

      Can you please share the same since it seems main.htm has the main logic.

      Thanks,

      Atul

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hello Atul,

      since it is not allowed to upload .zip file as attachment in SCN, so I did it via a workaround. In this document you could see the following attachment:

      /wp-content/uploads/2014/09/clipboard1_543597.png

      download it locally and unzip it, you will get a folder like below:

      /wp-content/uploads/2014/09/clipboard2_543598.png

      Open the folder and you will see a text file.

      /wp-content/uploads/2014/09/clipboard3_543602.png

      This text file is actually a zip file. Change it from "JChartLib.txt" to "JChartLib.zip", then unzip it and you will get all contents.

      /wp-content/uploads/2014/09/clipboard4_543603.png

      regarding the jQuery library usage, currently I use jQuery's document.ready function in maim.html:

      /wp-content/uploads/2014/09/clipboard5_543604.png

      If you use the event window.onload to call the initialize(), then I think jQuery is not necessary ( I haven't tried it yet ).

      Best regards,

      Jerry

      Author's profile photo Atul Jaiswal
      Atul Jaiswal

      Thanks Jerry for sharing this. But it seems file got corrupted or something went wrong. I followed those steps but no luck. 🙁

      I am missing that jquery and main.htm file. Anychance if you can zip these two files only?

      Regards,

      Atul

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hi Atul,

      it is strange. I just checked it from my side and it works quite well. I have reattached the main.html into attachment of this document. For the jQuery file, you can just download it from any website.

      Best regards,

      Jerry

      Author's profile photo Former Member
      Former Member

      THanks Jerry for sharing this.

      could you please check component FICACMP_ACC. I think the BAR chart coming in this component is not coming by this method.

      Is there any other method to create these charts?

      this component is attached in account balance->account balance overview,

      Please guide me if there ia nay other way too.

      THnaks

      ANit

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hello Anit,

      Wow I never knew this component before! Could you please kindly tell me via which business role could I log on the web client UI so that I could see it there? Then I can investigate how it is built. Thanks a lot!

      Best regards,

      Jerry

      Author's profile photo Former Member
      Former Member

      Jerry thanks for your reply....My problem is resolved...actually i was talking about some other type of BAR and PIE charts. I got the logic on how BAR graphs are getting created in this component...the code is written in a standard class CL_THTMLB)CELLERATOR.

      THanks

      Anit

      Author's profile photo Former Member
      Former Member

      I cant see the attachements, can you send me pls ?

       

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hello Andre,

      Unfortunately the attachment is gone after the community is migrated. I will check in my system about the source code this evening after I return home.

      Best regards,

      Jerry

      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      Hello Andre,

      please find the step to download source code from here.

      Best regards,

      Jerry

      Author's profile photo Former Member
      Former Member

      Thank you Jerry.

       

      Author's profile photo Pranavjeet -
      Pranavjeet -

      Hi Jerry,

       

      Just wondering do we need to keep in mind the licensing cost of these graphs or are these freeware?

       

      Thanks,

      Pranav