<!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="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" 
  id="sap-ui-bootstrap" 
  data-sap-ui-libs="sap.m" 
  data-sap-ui-resourceroots='{"view": "./"}' 
  data-sap-ui-theme="sap_bluecrystal" 
  data-sap-ui-xx-bindingSyntax="complex">
  </script>

  <script>

    sap.ui.localResources("view");
    var app = new sap.m.App({
      initialPage: "idMain"
    });
    var page = sap.ui.view({
      id: "idMain",
      viewName: "view.Main",
      type: sap.ui.core.mvc.ViewType.XML
    });
    app.addPage(page);
    app.placeAt("content");
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>
# SAPUI5 MVC example with JSON file databinding

This is a simple MVC example where we load JSON data from an external file
and then bind this data against a table.

This example is based on:
[SAPUI5 Demokit Tables](https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/sample)
<core:View
	xmlns:core="sap.ui.core" 
	xmlns:mvc="sap.ui.core.mvc" 
	xmlns="sap.m"
	xmlns:viz="sap.viz.ui5.controls" 
	xmlns:l="sap.ui.layout"
	controllerName="view.Main" 
	xmlns:html="http://www.w3.org/1999/xhtml">
  <Page
    title="Page"
    class="marginBoxContent" >
    <content>
     <l:Grid id="gridHeader" defaultSpan="XL3 L4 M6 S12">
  					<l:content>
	 					<viz:VizFrame id="idChart1"
								width="100%">
	 					 <viz:layoutData> <l:GridData span="L12 M12 S12" /> </viz:layoutData>
	 			
					     </viz:VizFrame>

 						<viz:VizFrame id="idChart2"
							width="100%">
						</viz:VizFrame>
		
						<viz:VizFrame id="idChart3"
							width="100%">
						</viz:VizFrame>
 					</l:content>
 			</l:Grid>
    </content>
  </Page>
</core:View>
sap.ui.controller("view.Main", {

onInit: function() {
		// Chart
		   this.renderChartAllEvents("idChart1");
		   this.renderChartAllEvents("idChart2");        
		   this.renderChartAllEvents("idChart3");
	},
//	Chart - Generic Mockup only..
	renderChartAllEvents : function (id) {
		var oVizFrame = this.getView().byId(id); // is an importing parameter
		var oModel = new sap.ui.model.json.JSONModel();
		var data = {
				'Events' : [
		            {"Year": "2010","Value": "1"},
		            {"Year": "2011","Value": "531160"},
		            {"Year": "2012","Value": "915105"},
		            {"Year": "2013","Value": "109378"},
		            {"Year": "2014","Value": "127401"},
		           ]};
		oModel.setData(data);

		var oDataset = new sap.viz.ui5.data.FlattenedDataset({
			dimensions : [{
				name : 'Year',
				value : "{Year}"}],
			               
			measures : [{
				name : 'Events',
				value : '{Value}'} ],
			             
			data : {
				path : "/Events"
			}
		});		
		oVizFrame.setDataset(oDataset);
		oVizFrame.setModel(oModel);	
		oVizFrame.setVizType('column');
		
		oVizFrame.setVizProperties({
            plotArea: {
            	colorPalette : d3.scale.category20().range()
                }});
		
		var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
		      'uid': "valueAxis",
		      'type': "Measure",
		      'values': ["Events"]
		    }), 
		    feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
		      'uid': "categoryAxis",
		      'type': "Dimension",
		      'values': ["Year"]
		    });
		oVizFrame.addFeed(feedValueAxis);
		oVizFrame.addFeed(feedCategoryAxis);
	},
});