Dashboard with chart binding help me

View:
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.ui.layout.form" xmlns="sap.m"
xmlns:l="sap.ui.layout"
controllerName="LiveDataset.controller.s1"
xmlns:viz="sap.viz.ui5.controls"
xmlns:html="http://www.w3.org/1999/xhtml">
<Toolbar class="sapUiSizeCompact ">
<ComboBox id="cmb_1" selectionChange="onSelect">
<core:Item key="key;" text="xyz" />
</ComboBox>
<ToolbarSpacer />
<ComboBox>
<core:Item key="{key}" text="xyz" />
</ComboBox>
<ToolbarSpacer />
<ComboBox>
<core:Item key="{key}" text="xyz" />
</ComboBox>
<ToolbarSpacer />
<ComboBox>
<core:Item key="{key}" text="xyz" />
</ComboBox>
<ToolbarSpacer/>
<Text id="date" />
</Toolbar>
<f:Form id="FormToolbar" ariaLabelledBy="Title1"
class="sapUiSizeCompact ">
<f:layout>
<f:ResponsiveGridLayout
adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0"
emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="2"
columnsM="2" singleContainerFullSize="false" />
</f:layout>
<f:formContainers>
<f:FormContainer ariaLabelledBy="Title1">
<f:formElements>
<f:FormElement>

<l:HorizontalLayout width="100%"
class="sapUiContentPadding equalColumns">
<HBox
height="140px"
width="300px"
alignItems="Center"
justifyContent="Center">
<Text text="Quantity"/>
</HBox>
<HBox
height="140px"
width="300px"
alignItems="Center"
justifyContent="Center">
<Text text="Amount"/>
</HBox>
</l:HorizontalLayout>
<!-- <Panel class="panel1">
<l:HorizontalLayout width="100%"
class="sapUiContentPadding equalColumns">
<HBox
height="250px"
width="150px"
alignItems="Center"
justifyContent="Center">
<Text text="Quantity"/>
</HBox>
<HBox
height="100px"
width="150px"
alignItems="Center"
justifyContent="Center">
<Text text="Amount"/>
</HBox>
</l:HorizontalLayout>
</Panel> -->
</f:FormElement>
</f:formElements>
</f:FormContainer>
<f:FormContainer ariaLabelledBy="Title2">
<f:formElements>
<f:FormElement>
<Panel class="panel1">
<Panel class="panel1" id="idpiechart3"></Panel>
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
<f:FormContainer ariaLabelledBy="Title3">
<f:formElements>
<f:FormElement>
<Panel id="piecharts" class="panel1">
<viz:VizFrame id="idpiechart1" vizType="pie"
width="100%" height="450px" selectData="pie1">
</viz:VizFrame>
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
<f:FormContainer ariaLabelledBy="Title4">
<f:formElements>
<f:FormElement>
<Panel class="panel1" >
<viz:VizFrame id="idcolumn" vizType="pie"
width="100%" height="450px" selectData="pie2" />
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</core:View>



Controller:


sap.ui.define(
[ 'jquery.sap.global', 'sap/m/GroupHeaderListItem',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/viz/ui5/data/FlattenedDataset',

],
function(jQuery, GroupHeaderListItem, Controller, JSONModel,
FlattenedDataset) {
"use strict";
var that;
var ListController = Controller.extend("LiveDataset.controller.s1",
{

onInit : function() {
this.oModel = new sap.ui.model.json.JSONModel();
var that = this;
var oData = jQuery.ajax({
type: "GET",
contentType: "application/json",
url: "http://142.93.216.68:5000/get_data",
dataType: "json",
async: false,
success: function(oData, textStatus, jqXHR) {
that.oModel.setData(oData);
}

});
sap.ui.getCore().setModel(that.oModel)

/*var oData = [ {
exp : "Today Pending",
exp1 : "20"
}, {
exp : "Total Pending",
exp1 : "70"
}, {
exp : "Total Reporting",
exp1 : "40"
} ]*/

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; // January
// is
// 0!
var yyyy = today.getFullYear();
var hour = today.getHours();
var Minutes = today.getMinutes();
var Seconds = today.getSeconds();
var today1 = (dd + '.' + mm + '.' + yyyy);
this.getView().byId("date").setText(today1.valueOf(Text));



// first pie chart
// //////////////////////////////////////////////////////////////////////////////////////////////////
var oVizFrame1 = this.getView()
.byId("idpiechart1");
var oModel = new sap.ui.model.json.JSONModel();
var data = {
odata0 : [ {
exp : "Today Pending",
exp1 : "20"
}, {
exp : "Total Pending",
exp1 : "70"
}, {
exp : "Total Reporting",
exp1 : "40"
}, ]
};
oModel.setData(data);

var oDataset = new sap.viz.ui5.data.FlattenedDataset(
{
dimensions : [ {
name : 'Report',
value : "{exp}"
} ],

measures : [ {
name : 'Pending',
value : '{exp1}'
} ],

data : {
path : "/odata0"
}
});
oVizFrame1.setDataset(oDataset);
oVizFrame1.setModel(oModel);
oVizFrame1.setVizProperties({
title : {
visible : false,
text : "Gate Reporting"
},

plotArea : {
colorPalette : d3.scale
.category20()
.range(),
drawingEffect : "glossy"
},

dataLabel : {
positionPreference : true,
automaticInOutside : false,
outsideVisible : false,
position : 'inside',
visible : true,
type : 'value',
},

});
var feedSize = new sap.viz.ui5.controls.common.feeds.FeedItem(
{
'uid' : "size",
'type' : "Measure",
'values' : [ "Pending" ]
}), feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem(
{
'uid' : "color",
'type' : "Dimension",
'values' : [ "Report" ]
});
oVizFrame1.addFeed(feedSize);
oVizFrame1.addFeed(feedColor);



var oVizFrame = this.getView()
.byId("idcolumn");

// 2.Create a JSON Model and set the
// data
var oModel = new sap.ui.model.json.JSONModel();
var data = {
'' : [ {
"Model" : "Alto",
"Value" : "758620"
}, {
"Model" : "Zen",
"Value" : "431160"
}, {
"Model" : "Santro",
"Value" : "515100"
}, {
"Model" : "Matiz",
"Value" : "293780"
}, {
"Model" : "Wagan R",
"Value" : "974010"
}, ]
};
oModel.setData(data);

// 3. Create Viz dataset to feed to
// the data to the graph
var oDataset = new sap.viz.ui5.data.FlattenedDataset(
{
dimensions : [ {
name : 'Model',
value : "{Model}"
} ],

measures : [ {
name : 'Cars Bought',
value : '{Value}'
} ],

data : {
path : "/Cars"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizType('bar');

// 4.Set Viz properties
oVizFrame.setVizProperties({
plotArea : {
colorPalette : d3.scale
.category20()
.range()
}
});

var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem(
{
'uid' : "valueAxis",
'type' : "Measure",
'values' : [ "Cars Bought" ]
}), feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem(
{
'uid' : "categoryAxis",
'type' : "Dimension",
'values' : [ "Model" ]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);

that.bindLineChart(oData);


},

bindLineChart : function(oData) {

var lineChartData = oData;
var lineChartModel = new sap.ui.model.json.JSONModel(
lineChartData);
var dataset = new sap.viz.ui5.data.FlattenedDataset(
{
dimensions : [ {
axis : 1,
name : 'Country',
value : "{exp}"
} ],
measures : [ {
name : 'Revenue',
value : '{exp1}'
} ],
data : {
path : "/"
}
});
var line = new sap.viz.ui5.Line({
width : "80%",
height : "400px",
plotArea : {},
title : {
visible : true,
text : 'Line Chart'
},
xAxis : {
title : {
visible : true,
}
},
yAxis : {
title : {
visible : true,
}
},
dataset : dataset
});
line.setModel(lineChartModel);
this.byId("idpiechart3")
.addContent(line);
},
onSelect:function(oEvent){
debugger;
var e=oEvent.getSource().getSelectedKey();
this.oModel = new sap.ui.model.json.JSONModel();
this.getView().byId("cmb_1").setModel(this.oModel);
//var oModel11=new sap.ui.model.json.JSONModel();
//this.getView().byId("cmb_1").setModel(oModel11,"modeldata");
//this.getView().byId("cmb_1").bindAggregation("items","modeldata>/oData",this.getView().byId("ListItem"));

}



});
});

Post a Comment

Previous Post Next Post