SAP UI 5 - Updating UI From Controller

Hi Everyone,

I am extremely new to Sap UI 5 and JavaScript. In the interest of full disclosure web development in general and are grateful for any assistance you may provide. I am looking for a solution to update the UI from my controller. I am able to create the Bar Chart(with no data) and gather the data from my XSJS service without issue but as my Bar Chart gets rendered before my data is obtained I am unsure how to display the received data on the Bar Chart from my controller.

I know this is probably a very basic question but I have tried solutions provided in both tutorials and previously answered discussion questions to no avail.

I have included the what I believe to be the necessities of my code below.

I have a Shell as follows

createContent : function(oController) {  
sap.ui.jsview("views.bonusPlanIndex", {

     getControllerName : function() {
          //return "bonusPlanIndex";
          return null;
     },
     
     createContent : function(oController) {
          
          var oBonusPlans = sap.ui.view({id:"viewbonusplans", viewName:"views.bonusPlans", type:sap.ui.core.mvc.ViewType.JS});
     
          var oShell = new sap.ui.ux3.Shell("myShell", {
               appTitle: "Bonus Plan Management",
               appIcon: "",
               appIconTooltip: "",
               showLogoutButton: false,
               showSearchTool: false,
               showInspectorTool: false,
               showFeederTool: false,
               content:oBonusPlans,
               worksetItems: [new sap.ui.ux3.NavigationItem("NB_bonusplans",{key:"nb_bonusplans",text:"Bonus Plans", subItems:[
                                   new sap.ui.ux3.NavigationItem("NB_1_1",{key:"nb_1_1",text:"View Bonus Plans"}),
                                 new sap.ui.ux3.NavigationItem("NB_1_2",{key:"nb_1_2",text:"Add Bonus Plan"})]})
               ],
               worksetItemSelected: function(oEvent){
                    var sId = oEvent.getParameter("id");
                    var oShell = oEvent.oSource;
                    switch (sId) {
                    case "NB_bonusplans":
                         oShell.setContent(oBonusPlans);
                         break;
                    case "NB_1_1":
                         sap.ui.getCore().getControl("viewbonusplans").getController().getBonusPlanWAjax();
                         oShell.setContent(oBonusPlans);
                         break;
                    case "NB_1_2":
                         oShell.setContent(null);
                    default:
                         break;
                    }
               }
          });
          return oShell;          
     }

});

I have a view which creates a bar chart similar to the Bar Chart created in http://scn.sap.com/community/developer-center/cloud-platform/blog/2013/10/17/8-easy-steps-to-develop-an-xs-application-on-the-sap-hana-cloud-platform.

createContent : function(oController) {  
                        oController.getBonusPlanWAjax();
                    var bonusPlanBarChart = new sap.viz.ui5.Bar("bonusPlanBarChart", {  
                              width : "50%",  
                              height : "50%",  
                              xAxis: {  
                                        title: { visible: true, text : "EUR" }  
                              },  
                              title : {  
                                        visible : true,  
                                        text : 'Bonus Plans'  
                              }  
                              ,  
                              interaction: new sap.viz.ui5.types.controller.Interaction(  
                                                                      {  
                                                                                selectability: new sap.viz.ui5.types.controller.Interaction_selectability(  
                                                                                                    {  
                                                                       mode: sap.viz.ui5.types.controller.Interaction_selectability_mode.single  
                                                                })  
                                                                      }),  
                              dataset : bonusPlanDataset= new sap.viz.ui5.data.FlattenedDataset({  
                                        // a Bar Chart requires exactly one dimension (x-axis)  
                                        dimensions : [ {  
                                                  axis : 1, // must be one for the x-axis, 2 for y-axis  
                                                  name : 'Names',  
                                                  value : "{bonusPlans>/empName}"  
                                        }],  
                                        // it can show multiple measures, each results in a new set of bars  
                                        // in a new color  
                                        measures : [  
                                        {  
                                                  name : 'Income', // 'name' is used as label in the Legend  
                                                  value : '{bonusPlans>/bonusAmount}' // 'value' defines the binding for the  
                                        },  
                                        {  
                                                  name : 'Bonus Amount', // 'name' is used as label in the Legend  
                                                  value : '{bonusPlans>/totalAmount}' // 'value' defines the binding for the  
                                        }  
                                        ],  
                                        // 'data' is used to bind the whole data collection that is to be  
                                        // displayed in the chart  
                                        data : {  
                                                  path : "/"  
                                        }  
                              })  
                    });  
                    return bonusPlanBarChart;  

I also have a corresponding controller that uses Ajax to call an XSJS service.

getBonusPlanWAjax: function(){          
          jQuery.ajax({
               url : "services/calculatedBonusPlanService.xsjs",
               type : 'GET',
               dataType:"json",
               success : function(data) {
                    //var mResult = sap.ui.getCore().byId("bonusPlanBarChart");  
                    var oModel = new sap.ui.model.json.JSONModel();
                    oModel.setData(data);                                        
                    sap.ui.getCore().setModel(oModel, "bonusPlans");
               },
               error : function(jqXHR, textStatus, errorThrown) {
                    // TODO improve error handling
                    sap.ui.commons.MessageBox.alert("Failed to retrieve data: " + textStatus+ "\n" + errorThrown);
               }
          });
     }

If you require anything else, please don't hesitate to ask.

Thank you for your time,

Keith.