Flex Layout - Dashboard, programming examples of Flex Layout - Dashboard

webix.ready(function(){
  webix.CustomScroll.init();

  function random_data(){
    var data = [];
    for (var i = 0; i < 10; i++)
      data.push({ ind: i+1, sales: Math.round(Math.random()*5000) });
    return data;
  }

  function cell(month){
    return {
      minWidth:300, height:400, rows:[
        { template:"Report: "+month+" 2016", type:"header" },
        { view:"chart", type:"line", preset:"plot",
         value:"#sales#", xAxis:{ template:"#ind#" }, yAxis:{},
         data: random_data()
        }
      ]
    }
  };

  var flex = {
    margin:10, padding:0, type:"wide",
    view:"flexlayout",
    cols:[
      cell("January"),
      cell("February"),
      cell("March"),
      cell("April"),
      cell("May"),
      cell("June"),
      cell("July"),
      cell("August"),
      cell("September"),
      cell("October"),
      cell("November"),
      cell("December")
    ]
  };

  webix.ui({
    rows:[
      { template:"My App", type:"header" },
      { cols:[
        { view:"scrollview", body:flex },
        { view:"resizer" },
        { template:"<b>Drag resizer to see flex in action</b>" }
      ]},
      { template:"Status: all data is saved", height:30}
    ]
  });
  webix.ui.fullScreen();
})