SAP UI 5 - Updating UI From Controller

Question

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.

Answer 1

I resolved this using a Model that was declared globally. I set this model to my bar chart and then any updates I made to said Model in my controller (Or anywhere else) would be reflected in my View's Bar-chart.
This same approach is used in the SHINE application. You can find examples in the Details View/Controller. In the global.js file you will find the global model. Also check the poWorkList.html (Or other html files) to see how this global.js file is made available.