Binding complex objects with multiple components

Webix JS
#1

Hello,

Say I want to build a dashboard from a DateRangePicker, when the DateRangePicker changes, the dashboard data is loaded from the server. The server API returns something like :

{
  "revenue": 100,
  "customers": 15,
  "details_per_day_of_week": [ 
     { name: "Monday", "revenue": 10, "customers": 1 }, 
     { name: "Tuesday", "revenue": 10, "customers": 2 }, 
     ... 
  ]
}

How do I do to load data once and update “text” components with “revenue” and “customers” and a list or a bar chart with “details_per_day_of_week” array ?

I succeeded in :

  • Binding DateRangePicker with a DataRecord instance
  • Binding that DataRecord instance with ui zones “#revenue#” and “#customers#”

But I definitely fail to bind the DataRecord with the Bar Chart

Can you help ?