The code looks fine to me. I expected that a change in the model would also automatically change the chart as well. As it is not working in this way I would do the following to achieve the requirement ..
1. I would bind the JSON model to the Input field in a TwoWay binding mode, that means any change in input will be reflected in the model
2. I would attach a listener to identify ant change in the JSON model
3. I shall renew the dataset of the Chart inside the listener.
Here is the sample
<!DOCTYPE HTML><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv='Content-Type' content='text/html;charset=UTF-8' /><script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.ux3,sap.viz" data-sap-ui-theme="sap_bluecrystal"></script><!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required --><script> var oModel = new sap.ui.model.json.JSONModel({ businessData : [ { Ratio : "Value1", target : 75, actual : 50 }, { Ratio : "Value2", target : 65, actual : 60 }, { Ratio : "Value3", target : 80, actual : 70 }, ] }); oModel.bindProperty("/businessData/0/target").attachChange(myFunction); oModel.bindProperty("/businessData/1/target").attachChange(myFunction); oModel.bindProperty("/businessData/2/target").attachChange(myFunction); var oText1 = new sap.ui.commons.TextField({ value : { path : '/businessData/0/target', mode : sap.ui.model.BindingMode.TwoWay } }); var oText2 = new sap.ui.commons.TextField({ value : { path : '/businessData/1/target', mode : sap.ui.model.BindingMode.TwoWay } }); var oText3 = new sap.ui.commons.TextField({ value : { path : '/businessData/2/target', mode : sap.ui.model.BindingMode.TwoWay } }); var oLayout = new sap.ui.commons.layout.MatrixLayout({ widths : [ '20px', '80px' ] }); oLayout.createRow('Value1', oText1); oLayout.createRow('Value2', oText2); oLayout.createRow('Value3', oText3); var oPanel = new sap.ui.commons.Panel({ width : "850px", height : "200px", content : oLayout }).placeAt('content1'); oPanel.setModel(oModel); var oDataset = new sap.viz.ui5.data.FlattenedDataset({ dimensions : [ { axis : 1, name : 'Ratio', value : "{Ratio}" } ], measures : [ { name : 'Actual', value : '{actual}' }, { name : 'Target', value : '{target}' } ], data : { path : "/businessData" } }); var oBarChart = new sap.viz.ui5.Bar({ width : "80%", height : "400px", title : { visible : true, text : 'Data' }, dataset : oDataset }); //bind the model oBarChart.setModel(oModel); new sap.ui.commons.Panel({ width : "850px" }).addContent(oBarChart).placeAt('content2'); function myFunction(evt) { oBarChart.destroyDataset(); var oDataset = new sap.viz.ui5.data.FlattenedDataset({ dimensions : [ { axis : 1, name : 'Ratio', value : "{Ratio}" } ], measures : [ { name : 'Actual', value : '{actual}' }, { name : 'Target', value : '{target}' } ], data : { path : "/businessData" } }); oBarChart.setDataset(oDataset); }</script></head><body class="sapUiBody" role="application"> <div id="content1"></div> <div id="content2"></div></body></html>
and the output
