Siebel Open UI – Charts and Graphs

Siebel Open UI – Charts and Graphs

Before Open UI the only way to get charts and graphs on Siebel UI were Siebel Analytics (in past) and OBIEE but with Open UI that has changed. I read a blog post showing how various types of data visualizations can be achieved in Siebel Open UI using different jQuery plug-ins. It didn’t explain how to achieve it but just showed what was possible.

I really liked the way they had shown opportunities data in pie chart and I went about finding out how to do it and then did it. This post is intended to share how to create graph and charts in Siebel using Open UI capabilities. So, Lets get started:

First thing was to find the right jQuery plug-in that could accomplish the task and after researching several plug-ins I zeroed in on  jQuery Google Chart which is based on Google’s Chart API. Next was to find the right use case so I chose Opportunity List Applet and below are the steps you need to follow to get the charts up and running.

1. Create the below mentioned entry in manifest_extension.map file.

Opportunity List Applet = OptyGraph

2. Create the following key in custom_manifest.xml file under the PLATFORM_KEY_SPECIFIC –> Platform Name=”Desktop” section

<KEY Name=”OptyGraph”>
<FILE_NAME> 3rdParty/jqGrid/current/js/jquery.jqGrid.min.js </FILE_NAME>
<FILE_NAME> 3rdParty/jqGrid/current/js/i18n/grid.locale-en.js </FILE_NAME>
<FILE_NAME> 3rdParty/jqgrid-ext.js </FILE_NAME>
<FILE_NAME> siebel/phyrenderer.js                           </FILE_NAME>
<FILE_NAME> siebel/jqgridrenderer.js                        </FILE_NAME>
<FILE_NAME> 3rdParty/jquery-gchart/jquery.gchart.min.js     </FILE_NAME>
<FILE_NAME> siebel/custom/optygraph.js              </FILE_NAME>
</KEY>

3. Finally copy the below provided optygraph.js file to PUBLIC/ENU/23021/SCRIPTS/SIEBEL/CUSTOM folder

Click to get the OptyGraph JS file

That’s it you have fully functional 3D pie chart that changes according to data present in list applet.

image

Now bit of explanation of the code:

ShowUI: This is the function that is called when the applet is first rendered by Open UI. Essentially this function performs following

  • Get RecordSet
  • Get Placeholder
  • Loop for all records and create a PropertySet
  • Create Graph based on this data

BindData: Essentially a copy of ShowUI but this is called by default if there is any change in data set for example an user query.

CollectData : This function loops through the list of column for each record and captures the count required for display of graph. This where you would change according to your needs such as base your graph on Status instead of Sales Stage

CreateGraph: This is where the jQuery plug-in functionality is implemented that actually create the graph. You will have to study the plug-in functionality in order make changes and use different type of graphs.

I know it is easy to get excited and let your imagination think all the things you can do with this but I would like to point out one important point. By default record set only return data that is displayed in list applet so the use case are really limited to applets where first 10-25 records are enough to provide insight. You cannot really implement this in “All _____ List Applets”.

I am working on one more demo which will utilize the Google charts directly as it gives access to much more functionality than the plug-in. It would increase few lines of code but I think it will be worth it. I have included comments in code trying to explain it but still if you are facing some problem don’t hesitate use comments section, I will try to answer it to best of my ability.

Happy Charting!!!

35 Responses to Siebel Open UI – Charts and Graphs

  1. Hi Neel,

    i am getting the below error in jquery.gchart.min.js

    Uncaught TypeError: Cannot call method ‘CreatePlugin’ of undefined . i tried many options but nothing worked.Can you please help me.

    Thanks,
    Pallavi

  2. Hello Neel,

    I too am getting the same error as Pallavi on jquery.gchart.min.js.

    Uncaught TypeError: Cannot call method ‘CreatePlugin’ of undefined . Tried many options but nothing worked. I am using Siebel 8.1.1.9 version.

    Please help.
    Thanks,
    Srini

  3. Hello Neel,

    The issue is resolved. Instead of using jquery.gchart.min.js, I used jquery.gchart.js and now I am able to view the chart correctly. Thanks again and you rock!!!

    Srini

    • Hey Srini,
      I am also trying this and I get similar issues.

      I am using jquery.gchart.js but I get the error.”$.gchart is undefined”.

      When I look at jquery.gchart.js, it throws error in “$.JQPlugin.d({” line (Line#52)

      seems like some basic files are missing. Can you please let me know what all JS files you have associated with the script.

  4. Hi Neel,
    I am using 8.1.1.11 and trying this, but my JS is failing at var chartData = [$.gchart.series( data)];” in createGraph function.

    I have downloaded the third party plug in and below is my define section in the “OptyGraphPR.JS” file

    define(“siebel/custom/OptyGraphPR”, [“order!3rdParty/jquery.signaturepad.min”, “order!3rdParty/jquery-gchart/jquery.gchart.min”,”order!siebel/jqgridrenderer”, “order!3rdParty/jqGrid/current/js/jquery.jqGrid.min”, “order!3rdParty/jqGrid/current/js/i18n/grid.locale-en”, “order!3rdParty/jqgrid-ext”], function ()

    I have registered the 3rd party file in manifest administration – platform section.

    What am I doing wrong ? (This is my first 3rd party plug-in try out. So I am guessing I am doing something wrong)

    Regards,
    Sam

  5. Sam,

    I got this working in 8.1.1.11. I did not specify the dependent js files in the define section. I added reference to the files in the Manifest Admin section, so in addition to specifying the optygraphpr file I also specified the remaining js files in the same section. Also instead of using the jquery.gchart.min.js, file I just used the jquery.gchart.js file, that got rid of the var chartData = [$.gchart.series( data)];” error.

    Neel,

    This is great stuff. Let me know if you are able to update the code to draw the graph for all the records (My Opportunities) instead of just the ones shown in the UI. Also I am looking at a functionality where the user can drill down on any one of the pies, and filter the list according to the pie selected.

    Thanks
    Ash

    • Hi Ash,

      No, through PR only records displayed on the UI will be processed but you can try the following approach for the requirement you are trying to achieve.
      Call a BS that can return json data after running appropriate queries. Create your chart according to that and then handle click event either invoke a BC method that can execute the search spec according to type.

      This can be a viable approach if you are targeting My Opportunities.

    • Hi Ash,
      I am also able to create the basic graph after srini suggested to add the jquery.plugin.js file.
      And now I am trying to get the drill-down work, like a detail report in OBIEE.

      I tried the google API for charts, it works in a standalone mode, (in a custom HTML page, not in siebel), but when I add it in the siebel applet PR, it fails in

      google.visualization.Table(document.getElementById(‘table_div’));

      It says “google” is not defined. I have also downloaded the google’s jsapi file locally, but it doesn’t work.

      Has anyone tried this ?
      Does anyone know how to call an API in the PR ?

  6. Hi Srini/Neel,

    I am new to open UI. I am getting the below error when i try this chart applet.
    Uncaught TypeError: Cannot read property ‘createPlugin’ of undefined . If i use jquery.gchart.min.js I am getting the createPlugin error in Line# 7, whereas jquery.gchart.js Line# is 52. Please help me out in what I am doing wrong.

    Thanks,
    Gayathri

    • Hello Gayathri,

      I am not sure why you are facing an issue because Neel’s script is perfect and if you follow the exact steps given by Neel, it should definitely work.It worked for me and it worked for Sam too.

      Thanks,
      Srini

    • Gayathri,

      Did you include jquery.plugin.js file in your define statement. I realized that the file is not mentioned in the original post.

      Regards,
      Sam

  7. Hi Alex,

    Tooltip not working when we place moouse on inputfield but its working when we click F12,below code we used :

    if( canShow === “Open”){
    SiebelJS.Log(“TipPR in if canshow “);
    var ActStatus = cntrl.GetInputName();
    SiebelJS.Log(“ActStatus =”+ActStatus);
    event.preventDefault();
    $(‘input[name=”‘+ActStatus+'”]’).qtip({
    content: {
    text : ”, prerender : true,
    //’Stems are great for indicating the context of the tooltip.’, prerender : true,
    style: {
    tip: {
    corner: ‘topLeft’,
    color: ‘#6699CC’,
    size: {
    x: 20,
    y : 2,
    }
    }
    }
    }
    });
    SiebelJS.Log(“TipPR in if canshow2 “);
    }

    and image going off when take back

  8. Hey Neel,
    I was eventually able to display the chart as per your config details. Only note is, I have to leave out the jqgrid/current files in my manifest mapping in Siebel 8.1.1.11 admin screen for the chart to come up in Chrome.
    of course, the issues now are that there are no clickable events that can be used and also, highlighting any part of the pie does not give any mouse alerts.
    As you have mentioned, have you been able to develop the code using Google or any other 3rd party JS API , to show the charts for records both including all records in list applet and maybe with the clickable events.
    It would help if you could share it.

    Thanks a bunch for your posts. It actually helps us in many of our demo situations.

  9. Hi,

    I am doing exact as above the post but am unable to get the pie chart for the Opportunity List Applet could you please help me regarding this.

    Thanks
    Prashnth Kumar Gyara

  10. Hi Neel
    Not sure if this post is still active, but still posting.
    I am using 8.1.1.11 and trying this, but it is not working
    I have downloaded the third party plug in and below is my define section in the “OptyGraphPR.JS” file

    define(“siebel/custom/OptyGraphPR”, [“order!3rdParty/jquery.plugin”,“order!3rdParty/jquery-gchart/jquery.gchart”,”order!siebel/jqgridrenderer”, “order!3rdParty/jqGrid/current/js/jquery.jqGrid.min”, “order!3rdParty/jqGrid/current/js/i18n/grid.locale-en”, “order!3rdParty/jqgrid-ext”], function ()

    jquery.plugin and jquery.gchart are used in define as shown above.
    Also , by default , jquery.plugin file was not present in the 3rd party folder . Got the code from external sources and created a new file.
    Is there something else which needs to be done. Can I get the jquery.plugin file?

    Thanks!

  11. Hi Neel,

    First up, thanks for this brilliant article. This may well save our bacon, as we’re looking for a charting solution in 8.1.1.14 and NetCharts / Siebel Charts Server is no longer supported on anything other than ancient OS’s.

    I can’t get this to work in 8.1.1.14, though. I get the error:

    Cannot read property ‘createPlugin’ of undefined
    http://localhost:8080/23044/scripts/3rdParty/jquery.gchart.package-2.0.0/jquery.gchart.js?_scb=8.1.1.14_SIA_%5B23044%5D_ENU

    1. 3rdParty/jqGrid/current/js/jquery.jqGrid.js
    2. 3rdParty/jqGrid/current/js/i18n/grid.locale-en.js
    3. 3rdParty/jqgrid-ext.js
    4. siebel/phyrenderer.js
    5. siebel/jqgridrenderer.js
    6. 3rdParty/jquery.gchart.package-2.0.0/jquery.plugin.js
    7. 3rdParty/jquery.gchart.package-2.0.0/jquery.gchart.js
    8. siebel/custom/CaseChartPR.js

    Any thoughts on changes required to get this working in 8.1.1.14?

    Many thanks!

    Oli

    • Oli,

      Sorry, I have not tried this in 8.1.1.14 so cannot help you much in that regard but you can have a look at google charts library. It is better than this and has more features with only downside is that you cannot reference it locally. Which means you need internet connections at all time while using this.

      I will try this example on 8.1.1.14 though and see if I can make it work.

  12. Hi Neel,

    In general the graph should represent the distribution of the entire data set and not only the data that is visible on UI. The GetRecordSet will get only the data visible on UI, so for example if applet displays first 10 rows at a time on UI, the graph will show the representation for these 10 rows only. Is there any other way to retrieve complete data set at one go? Alternative way i used was to call server business service to retrieve the data. the question was which method or event should i use to call the BS as i wanted to retrieve data if there were any changes to the records.
    ShowUI of PR is called once on load means page refresh and build only once for the view.
    So i used BindData of the PR to implement call to this BS, but BindData method is called again at the step where InvokeMethod is implemented to call the BS. This step results into continuous loop of BindData method and application session crashes.

    Alternate option i used SelectionChange of the PM to implement call to this BS, but SelectionChange method is called again at the step where InvokeMethod is implemented to call the BS. This step also results into continuous loop of SelectionChange method and application session crashes.

    There is another workaround to implement custom “Refresh Graph” button but users does not want to have manual intervention for refreshing the graphs.

    Can you suggest the ways successfully implementing server BS call for change record events or is there way to get the entire recordset.

    Thanks
    Sushil W

  13. Hi Neel
    Thanks a lot for sharing this work of yours.
    Can we change the colour of the graph? I tried all possible ways by sending different parameters to the function by referring to the plugin documentation. Could not do it.

  14. In SIebel IP15, getting below error in place of chart applet,
    Error in Chart Server connect string, or the Chart Server is not started.(SBL-CHT-00103

    Dont know what are all steps to configure Client chart .Please suggest.. Have modified only user proference, Enableclientchart=True. Though modified, getting above error

  15. Hi Guys,
    Have anyone done google charts on Homepage.
    I could get it below Opty list applet and it show the data according to My Opty or My team Opty, but i am not able to use same thing on Homepage.

    Regards,
    Love Thakur

Leave a Reply

Contribute