InteractiveBarChart: How to Bind Model - sapui5

Question

I can't find any example about binding a JSON model to an InteractiveBarChart in an XML view.
My view is the following:
<core:View
xmlns:core="sap.ui.core"
xmlns:m="sap.m"
xmlns="sap.f"
xmlns:f="sap.f"
xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
xmlns:mc="sap.suite.ui.microchart"
xmlns:layout="sap.ui.layout"
xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
controllerName="webui.controller.Logger.HomeLogger"
height="100%"
>
<DynamicPage id="dynamicPage"
navButtonPress="onNavBack"
showNavButton="true"
>
<title>
<f:DynamicPageTitle>
<f:heading>
<m:Title text="Methode Logger" />
</f:heading>
<f:expandedContent>
<m:Text text="System analysis" />
</f:expandedContent>
<f:actions>
<m:ToolbarSpacer />
<m:Button
icon="sap-icon://action-settings"
binding="{securitySystem>/}"
press="onSettingsPress"
visible="{securitySystem>enabledApplications/enableSettingsAdmin}"
/>
</f:actions>
</f:DynamicPageTitle>
</title>
<header>
<DynamicPageHeader>
<content>
<layout:Grid defaultSpan="XL6 L6 M6 S12">
<m:FlexBox
width="20rem"
height="10rem"
alignItems="Center"
class="sapUiSmallMargin"
>
<m:items>
<mc:InteractiveBarChart
labelWidth="25%"
selectionChanged="chartSelectionChanged"
press="press"
bindBars="{/}"
>
<mc:bars>
<mc:InteractiveBarChartBar
label="{key}"
value="{value}"
/>
</mc:bars>
</mc:InteractiveBarChart>
</m:items>
</m:FlexBox>
</layout:Grid>
</content>
</DynamicPageHeader>
</header>
</DynamicPage>
</core:View>
I've to bind the InteractiveBarChart to my model, an array set in the controller. By SAP reference, I've to use bindBars method, but I can't make it work.

Answer 1

Any control in UI5 has the same concepts of data binding: property and aggregation bindings.
If control is aimed to show multiple things (i.e. table or list), it will have the so called aggregation.
In InteractiveBarChart control there is an aggregation "bars".
Any control can be bound against model via the unified binding syntax.
For programmatic binding is the following template: "bind{NAME OF AGGREGATION}". So in this case it will be "bindBars" method, which takes the same list of arguments as any aggregation binding;
For declaration binding in XML, you have to do 2 things:
tell the control about data source. In your case you should set the control's property with the name of aggregation "bars" to the binding string "{/}", in case you store the raw array in the root property of a default model (i.e. model without name)
define a template, which will be used as a basis of creation of a list of bars (you've already done it correctly)