SAP GUI Chart Engine usage & Trouble Shooting - Multiple Graphs in one Chart

One day or the other, many of us try to use graphics in ABAP Development. With my prior experience & exploration, I would suggest you to go for SAP GUI Chart Engine. SAP Chart Engine is such a powerful & developer friendly tool,which makes our job very easy. Trust me,this is the easiest way to include complex graphics in our programs. With this document , I want to explain how to use SAP GUI Chart Desginer & Make use of Chart Engine Classes & how we can acheive multiple chart types ( like Bar , Line , Stacked etc ) in a single graph ( or chart ) just like the following.

Attached are the source codes, i copied the standard program GRAPHICS_GUI_CE_DEMO & made little modifications to acheive the above graph. If you are not familiar with Chart Engine at all , then just go through the standard program GRAPHICS_GUI_CE_DEMO.It is very understandable. Two things are very important there, 1) perform create_data_demo : This perform is all about pushing our data into the graph. Irrespective of what graph you are building, this perform is must & should. You have some thing called CATEGORIES & SERIES. Just fill the both parameters according to your need. One thing was missing in the standard Demo program,that is naming Series ID'S. Most of us struck here only. You have to pass the parameter 'customizing' for the series ID's based on which next customization works. So just add as following..

l_series = p_ixml_doc->create_simple_element( name = 'Series' parent = l_simplechartdata ).

l_series->set_attribute( name = 'customizing' value = 'Series1' ). " this is how series ids should be formed. l_series->set_attribute( name = 'label' value = 'Coffee' ).

2) perform create_custom_demo : This is the Perform which customizes your graph like what kind of graph ( line , bar , pie ghannt chart etc ). Here you should make use of Chart Desginer.

i) First I suggest you to download " Chart Designer from SDN". http://www.sdn.sap.com/irj/scn/downloads?rid=/library/uuid/e0a9ba90-0201-0010-d3a2-9cb376b5e181 ii) After download,we need to run the executable files.( ChartDesigner700.exe or ChartDesigner640.exe whichever GUI frontend is suitable for you )

iii) With the 6 steps available there ( top left corner ), you can manipulate anything like add line,column,pie,ghantt chart or want to change color,font,size whatever you can do it and follow the wizard till 'Finish' step. ( So I suggest you to do ,whatever changes you wanted to do ) iv) Now after finish step,save the customizing in any location ( it will be saved in .xml format ). v) you can cut copy paste the customizing xml code into your own program ( if you have created transformation) or you have to call interfaces & can form the xml accordingly. Lastly Trouble Shooting Part : When we use interfaces to build xml code, we will not be able to see anything in debugging except the hexa code. I suggest you to the change the display mode as follows.

Just align your debugging code with the one that is saved from Chart Desginer XML file. You will be to generate your own requirement.