guillaumegarcia13 · January 27, 2015 11:17
diff --git a/index.html b/index.html
 <html>
 <!-- Original: http://www.wenda.io/questions/2410986/sapui5-showing-pie-chart-or-bar-chart-using-odata-service-from-hana-db.html -->
  
 <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Flattened DataSet bound to OData Entity with filter</title>
    <link rel="stylesheet" type="text/css" href="">

    <script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" 
            data-sap-ui-libs="sap.ui.core,sap.viz, sap.ui.commons, sap.m" 
            data-sap-ui-theme="sap_goldreflection">
    </script>
    <script>
    //var sURI = 'http://demos.kendoui.com/service/Northwind.svc/';
    //var oModel = new sap.ui.model.odata.ODataModel(sURI, true);

    var oModel = new sap.ui.model.json.JSONModel({
 			businessData : [
 				{Country :"Canada",       revenue: 410.87, profit: -141.25, population: 34789000},
 				{Country :"China",        revenue: 338.29, profit:  133.82, population: 1339724852},
 				{Country :"France",       revenue: 487.66, profit:  348.76, population: 65350000},
 				{Country :"Germany",      revenue: 470.23, profit:  217.29, population: 81799600},
 				{Country :"India",        revenue: 170.93, profit:  117.00, population: 1210193422},
 				{Country :"United States",revenue: 905.08, profit:  609.16, population: 313490000}
 			]
 	});		

    // A Dataset defines how the model data is mapped to the chart 
    var oDataset = new sap.viz.ui5.data.FlattenedDataset({

      // a Bar Chart requires exactly one dimension (x-axis) 
      dimensions : [ 
        {
          axis : 1, // must be one for the x-axis, 2 for y-axis
          name : 'Country', 
          value : "{Country}"
        } 
      ],

      // it can show multiple measures, each results in a new set of bars in a new color 
      measures : [ 
        // measure 1
        {
          name : 'Profit', // 'name' is used as label in the Legend 
          value : '{profit}' // 'value' defines the binding for the displayed value   
        },
        {
          name : 'Revenue', 
          value : '{revenue}'
        } 
      ],

      // 'data' is used to bind the whole data collection that is to be displayed in the chart 
      data : {
        path : "/businessData"
      }

    });


    var oSliderBarChart = new sap.ui.commons.Slider({
      id            : 'sliderGauge',
      tooltip       : 'Slider for Gauge',
      width         : '200px',
      min           : 0,
      max           : 100,
      value         : 25,
      totalUnits    : 5,
      smallStepWidth: 1,
      stepLabels    : true,
      change        : function() { var oAttr = oBarChart.getModel().getProperty("/businessData/0/");
                                   oAttr.revenue = oSliderBarChart.getValue() * 13;
                                   oBarChart.getModel().setProperty("/businessData/0/", oAttr);
                                   oBarChart.getDataset().invalidate(); }
    });
      
    var oBarChart = new sap.viz.ui5.Bar({
        width: "800px",
        height: "400px",
        plotArea: {
            'colorPalette': d3.scale.category20().range()
        },
        title: {
            visible: true,
            text: 'Total Product Sales by Unit Price'
        },
        dataset: oDataset
    });

    var oLayout = new sap.ui.commons.layout.MatrixLayout({
 			id         : 'Matrix',
 			layoutFixed: false,
 			columns    : 1
 	});     
      
    oLayout.createRow(new sap.m.Label({text: "BarChart Showcase (slider change Canada revenue value)"}));
    oLayout.createRow(oSliderBarChart);
    oLayout.createRow(oBarChart);
      
    oBarChart.setModel(oModel);
    oLayout.placeAt("content");
    </script>

 </head>

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


 </body>

 </html>
	<html>
	<!-- Original: http://www.wenda.io/questions/2410986/sapui5-showing-pie-chart-or-bar-chart-using-odata-service-from-hana-db.html -->

	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<title>Flattened DataSet bound to OData Entity with filter</title>
	<link rel="stylesheet" type="text/css" href="">

	<script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript"
	data-sap-ui-libs="sap.ui.core,sap.viz, sap.ui.commons, sap.m"
	data-sap-ui-theme="sap_goldreflection">
	</script>
	<script>
	//var sURI = 'http://demos.kendoui.com/service/Northwind.svc/';
	//var oModel = new sap.ui.model.odata.ODataModel(sURI, true);

	var oModel = new sap.ui.model.json.JSONModel({
	businessData : [
	{Country :"Canada", revenue: 410.87, profit: -141.25, population: 34789000},
	{Country :"China", revenue: 338.29, profit: 133.82, population: 1339724852},
	{Country :"France", revenue: 487.66, profit: 348.76, population: 65350000},
	{Country :"Germany", revenue: 470.23, profit: 217.29, population: 81799600},
	{Country :"India", revenue: 170.93, profit: 117.00, population: 1210193422},
	{Country :"United States",revenue: 905.08, profit: 609.16, population: 313490000}
	]
	});

	// A Dataset defines how the model data is mapped to the chart
	var oDataset = new sap.viz.ui5.data.FlattenedDataset({

	// a Bar Chart requires exactly one dimension (x-axis)
	dimensions : [
	{
	axis : 1, // must be one for the x-axis, 2 for y-axis
	name : 'Country',
	value : "{Country}"
	}
	],

	// it can show multiple measures, each results in a new set of bars in a new color
	measures : [
	// measure 1
	{
	name : 'Profit', // 'name' is used as label in the Legend
	value : '{profit}' // 'value' defines the binding for the displayed value
	},
	{
	name : 'Revenue',
	value : '{revenue}'
	}
	],

	// 'data' is used to bind the whole data collection that is to be displayed in the chart
	data : {
	path : "/businessData"
	}

	});


	var oSliderBarChart = new sap.ui.commons.Slider({
	id : 'sliderGauge',
	tooltip : 'Slider for Gauge',
	width : '200px',
	min : 0,
	max : 100,
	value : 25,
	totalUnits : 5,
	smallStepWidth: 1,
	stepLabels : true,
	change : function() { var oAttr = oBarChart.getModel().getProperty("/businessData/0/");
	oAttr.revenue = oSliderBarChart.getValue() * 13;
	oBarChart.getModel().setProperty("/businessData/0/", oAttr);
	oBarChart.getDataset().invalidate(); }
	});

	var oBarChart = new sap.viz.ui5.Bar({
	width: "800px",
	height: "400px",
	plotArea: {
	'colorPalette': d3.scale.category20().range()
	},
	title: {
	visible: true,
	text: 'Total Product Sales by Unit Price'
	},
	dataset: oDataset
	});

	var oLayout = new sap.ui.commons.layout.MatrixLayout({
	id : 'Matrix',
	layoutFixed: false,
	columns : 1
	});

	oLayout.createRow(new sap.m.Label({text: "BarChart Showcase (slider change Canada revenue value)"}));
	oLayout.createRow(oSliderBarChart);
	oLayout.createRow(oBarChart);

	oBarChart.setModel(oModel);
	oLayout.placeAt("content");
	</script>

	</head>

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


	</body>

	</html>