Viz Column graph simple example code sapui5

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 : 








Post a Comment

Previous Post Next Post