Invalid Data Binding SAP UI5 BAR CHARTVIZ Chart - sapui5

Question

I am trying to display a bar chart on click of Go button on selection screen.
I am getting invalid data binding in place of VIZ Chart.
I have attached the error message which I am getting. I have attached my XML view and its controller logic as well.
sap.ui.controller("znwpm_charts_dash.Charts", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf znwpm_charts_dash.Charts
*/
onInit: function() {
var oVizFrame = this.getView().byId("idVizFrame");
jQuery.sap.require("sap.ui.model.resource.ResourceModel");
var oResourceModel = new sap.ui.model.resource.ResourceModel({
bundleName :"znwpm_charts_dash/i18n/i18n",
async :true
});
var oViewInternalModel = this.getView().getModel('viewInternalModel');
if(!oViewInternalModel){
oViewInternalModel = new sap.ui.model.json.JSONModel();
oViewInternalModel.setProperty("/filters", []);
this.getView().setModel(oViewInternalModel, 'viewInternalModel')};
sap.ui.getCore().setModel(oResourceModel , "i18n");
//
jQuery.sap.require("sap.ui.model.Filter" );
if(!oVizFrame){
}else{
oVizFrame.setVisible(false);
oVizFrame.setVizProperties({
title:{
text : "NWPM"
}
}); }
},
onSearch:function(evt){
this.aFilters = [];
var button = evt.getSource();
var eDock = sap.ui.core.Popup.Dock;
jQuery.sap.require("sap.m.MessageBox");
var startDate = this.getView().byId("startDateId").getValue();
if(!startDate){
sap.m.MessageToast.show("Start Date is required Field" ,{
duration:4000,
width :"25em",
my: eDock.CenterCenter,
at: eDock.CenterCenter,
of: window,
offset:"20"
}) ;
}else{
var endDate = this.getView().byId("endDateId").getValue();
if(!endDate){
sap.m.MessageToast.show("End Date is required Field" ,{
duration:4000,
width :"25em",
my: eDock.CenterCenter,
at: eDock.CenterCenter,
of: window,
offset:"20"
}) ;
}else{
this.__applyFilters();
};
};
},
__applyFilters:function(){
var oView = this.getView();
var filterModel = this.getView().getModel('viewInternalModel').getProperty("/filters");
this.__setDefaultFilters();
this.__oDataCall();
},
__setDefaultFilters:function(){
this._filterSetTemp('DateFrom', this.getView().byId("startDateId").getValue());
this._filterSetTemp('DateTo', this.getView().byId("endDateId").getValue());
},
_filterSetTemp:function(sPropertyName, oInputValue){
if(!this.aFilters){
this.aFilters = [];
var aFilters = [];
}
var oViewInternalModel = this.getView().getModel('viewInternalModel');
var aFilter = oViewInternalModel.getProperty("/filters");
aFilter[sPropertyName] = oInputValue;
oViewInternalModel.refresh();
this.aFilters.push( new sap.ui.model.Filter(sPropertyName, sap.ui.model.FilterOperator.EQ, oInputValue ) );
},
__oDataCall:function(){
var oVizFrame = this.getView().byId("idVizFrame");
var sUrl = "/sap/opu/odata/sap/ZIMM_INTERFACE_DASH_SRV";
var oDataModel = new sap.ui.model.odata.v2.ODataModel(sUrl ,true);
var oJsonModel = new sap.ui.model.json.JSONModel();
oItemsFilters = new sap.ui.model.Filter(this.aFilters, true);
var oView = this.getView();
oBusy = sap.ui.getCore().byId("busyID");
if(!oBusy){
var oBusy = new sap.m.BusyDialog("busyID",{
text :"Fetching Data"
});
}
oBusy.open();
oDataModel.read("/ChartsSet",{
filters:[oItemsFilters],
success:function(oData,response){
debugger;
oJsonModel.setData(oData);
oVizFrame.setModel(oJsonModel);
oVizFrame.setVisible(true);
oView.setModel(oJsonModel );
sap.ui.getCore().setModel(oJsonModel);
oBusy.close();
},
error:function(err){
oBusy.close();
}
});
},
selectData:function(evt){
debugger;
var onClick = evt.getParameters('data').data[0].data["Functional Area"];
var oApp = sap.ui.getCore().byId("idApp");
oApp.to("idTable");
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* #memberOf znwpm_charts_dash.Charts
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* #memberOf znwpm_charts_dash.Charts
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* #memberOf znwpm_charts_dash.Charts
*/
// onExit: function() {
//
// }
});
<!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.m ,sap.viz"
data-sap-ui-xx-bindingSyntax="complex"
ata-sap-ui-preload="async"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("znwpm_charts_dash");
var app = new sap.m.App("idApp",{initialPage:"idCharts1"});
var page = sap.ui.view({id:"idCharts1", viewName:"znwpm_charts_dash.Charts", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
var page2 = sap.ui.view({id:"idTable", viewName:"znwpm_charts_dash.Table", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page2);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>