Viz Column graph simple example code
view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
xmlns:viz.data="sap.viz.ui5.data" height="100%"
controllerName="chartinframe.s1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
<Panel id="columncharts" height="auto" width="50%"></Panel>
</content>
</Page>
</core:View>
controller.js
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/model/BindingMode',
'sap/ui/model/json/JSONModel',
'sap/viz/ui5/data/FlattenedDataset',
'sap/viz/ui5/format/ChartFormatter',
'sap/viz/ui5/api/env/Format',
'./InitPage'
], function(Controller, BindingMode, JSONModel, FlattenedDataset, ChartFormatter, Format, InitPageUtil) {
"use strict";
var Controller = Controller.extend("chartinframe.s1", {
onInit: function() {
var that=this;
var oData=[
{Company: "Honda",Country: "India",Measures: "150",Population: "10000000",Product: "Car",Profit: "41.25",Region: "Asia",Revenue: "810.87",Year: "2002" },
{Company: "Samsung",Country: "China",Measures: "50",Population: "35589000",Product: "Mobiles",Profit: "10.25",Region: "Asia",Revenue: "210.87",Year: "2003"},
{Company: "Toshiba",Country: "France",Measures: "90",Population: "569000",Product: "TV",Profit: "81.25",Region: "Asia",Revenue: "487.12",Year: "2010"},
{Company: "Honda",Country: "Germany",Measures: "40",Population: "4789000",Product: "Car",Profit: "56.25",Region: "Europe",Revenue: "210.87",Year: "2004"},
{Company: "Samsung",Country: "Switzerland",Measures: "80",Population: "56789000",Product: "Mobiles",Profit: "125.56",Region: "Europe",Revenue: "510.55",Year: "2005"},
{Company: "Toshiba",Country: "Russia",Measures: "20",Population: "55789000",Product: "TV",Profit: "25.23",Region: "Europe",Revenue: "41.87",Year: "2006"},
{Company: "Honda",Country: "SouthAfrica",Measures: "80",Population: "4789000",Product: "Car",Profit: "14.25",Region: "Africa",Revenue: "510.07",Year: "2001"},
{Company: "Samsung",Country: "Kenya",Measures: "70",Population: "5589000",Product: "Mobiles",Profit: "51.25",Region: "Africa",Revenue: "87.12",Year: "2008"},
{Company: "Toshiba",Country: "Egypt",Measures: "20",Population: "122000",Product: "TV",Profit: "68.25",Region: "Africa",Revenue: "57.12",Year: "2009"}
]
var oData1=[
{car:"25",
date:"20-11"},
{car:"29",
date:"21-11"},
{car:"50",
date:"22-11"},
{car:"20",
date:"23-11"},
{car:"25",
date:"24-11"},
{car:"29",
date:"25-11"},
{car:"50",
date:"26-11"},
{car:"20",
date:"27-11"},
{car:"25",
date:"28-11"},
{car:"29",
date:"29-11"},
{car:"50",
date:"30-11"},
{car:"20",
date:"31-11"},
]
that.bindColumnChart(oData1);
},
bindColumnChart : function(oData1){
var colChartData=oData1;
var colChartDataModel = new sap.ui.model.json.JSONModel(colChartData);
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
axis : 1,
name : 'date',
value : "{date}"
} ],
measures : [ {
name : 'car',
value : '{car}'
}/*, {
name : 'Profit',
value : '{Profit}'
}*/ ],
data : {
path : "/"
}
});
var bar = new sap.viz.ui5.Column({
width : "100%",
height : "200px",
plotArea : {
drawingEffect: "glossy",
colorPalette : ['#16588E','#81C4FF','#16588E','orangered','#d13434','#e8ac33']
},
xAxis : {
title : {
visible : true,
}
},
yAxis : {
title : {
visible : true,
}
},
dataset : dataset
});
bar.setModel(colChartDataModel);
this.byId("columncharts").addContent(bar);
},
});
return Controller;
});
Output :
