View:
<?xml version="1.0"?>
-<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:viz="sap.viz.ui5.controls" controllerName="Dashbbbboard.controller.s1" xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">
-<App id="AppId">
<Page title="DashBoard" showHeader="true" class="sapUiSizeCompact">
<Panel>
<Toolbar>
<Select width="10%" forceSelection="false" id="region_id" items="{path: 'Model_month>/data/'}">
<core:Item key="{Model_month>region}" text="{Model_month>region}" />
</Select>
<ToolbarSpacer />
<Select width="10%" forceSelection="false" id="state_id" items="{path: 'Model_month>/data/'}">
<core:Item key="{Model_month>state}" text="{Model_month>state}" />
</Select>
<ToolbarSpacer />
<Select width="10%" forceSelection="false" id="cust_name_id" items="{path: 'Model_month>/data/'}">
<core:Item key="{Model_month>customer_name}" text="{Model_month>customer_name}" />
</Select>
<ToolbarSpacer />
<Select width="10%" forceSelection="false" id="date_id" items="{path: 'Model_month>/data/'}">
<core:Item key="{Model_month>date}" text="{Model_month>date}" />
</Select>
<ToolbarSpacer />
<Text id="date" />
</Toolbar>
</Panel>
-<f:Form id="FormToolbar" class="sapUiSizeCompact " ariaLabelledBy="Title1">
-<f:layout>
<f:ResponsiveGridLayout singleContainerFullSize="false" columnsM="2" columnsL="2" columnsXL="2" emptySpanS="0" emptySpanM="0" emptySpanL="0" emptySpanXL="0" adjustLabelSpan="false"/>
</f:layout>
-<f:formContainers>
-<f:FormContainer ariaLabelledBy="Title2">
-<f:formElements>
-<f:FormElement>
-<Panel class="panel1">
-<l:HorizontalLayout class="sapUiContentPadding equalColumns" width="100%">
-<HBox width="120px" justifyContent="Center" alignItems="Center" height="100px">
<Text text="quantity"/>
</HBox>
-<HBox width="120px" justifyContent="Center" alignItems="Center" height="100px">
<Text text="Amount"/>
</HBox>
</l:HorizontalLayout>
<viz:VizFrame id="idpiechart1" class="borderp" width="100%" height="285px" selectData="pie1" vizType="pie"> </viz:VizFrame>
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
-<f:FormContainer ariaLabelledBy="Title3">
-<f:formElements>
-<f:FormElement>
-<Panel id="idpiechart2" class="panel1">
<viz:VizFrame id="idcolumn" width="100%" height="430px" selectData="pie2" vizType="pie"/>
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
-<f:FormContainer ariaLabelledBy="Title3">
-<f:formElements>
-<f:FormElement>
<Panel id="idpiechart3" class="panel1"> </Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</Page>
</App>
</mvc: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 oView;
var ListController = Controller
.extend(
"Dashbbbboard.controller.s1",
{
onInit : function() {
var oView = this.getView();
debugger;
var ToolV = this; $.ajax({ url: 'http://142.93.216.68:5000/get_data', method: 'GET',
success: function(data,response)
{ debugger;
this.month = new JSONModel() this.month.setData(data); //data.toString(); ToolV.getView().byId('region_id').setModel(this.month,"Model_month"); ToolV.getView().byId('state_id').setModel(this.month,"Model_month"); ToolV.getView().byId('cust_name_id').setModel(this.month,"Model_month"); ToolV.getView().byId('date_id').setModel(this.month,"Model_month"); ToolV.getView().byId('Id_table').setModel(this.month,"Model_month");
}
that = this;
/* 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 = {
'Cars' : [ {
"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);*/
},
onAfterRendering:function(){
//var oView = this.getView();
//this.OModel=new sap.ui.model.json.JSONModel();
debugger;
$.ajax({
url: 'http://142.93.216.68:5000/get_data',
method: 'GET',
success: function(data,response){
debugger;
var that = this;
// var oVizFramepie = this.getView().byId("idpiechart1");
//var oView=this.getView();
this.OModel=new sap.ui.model.json.JSONModel(data);
var dataset = new sap.viz.ui5.data.FlattenedDataset({
data : {
path : "/data"
},
dimensions : [ {
axis : 1,
name : 'Amount',
value : "{data>/amount}",
} ],
measures : [ {
name : 'Quantity',
value : "{data>/quantity}",
} ],
});
this.getView().byId("idpiechart1").setData(dataset);
var pie = new sap.viz.ui5.Pie({
id : "idpiechart1",
width : "100%",
height : "285px",
selectData : function(oEvent) {
that.pie1(oEvent);
},
});
},
});
this.getView().byId("idpiechart1").setDataset(dataset);
this.getView().byId("idpiechart1").setModel(this.OModel,"G");
},
/*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);
},
*/
});
});
<?xml version="1.0"?>
-<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:viz="sap.viz.ui5.controls" controllerName="Dashbbbboard.controller.s1" xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">
-<App id="AppId">
<Page title="DashBoard" showHeader="true" class="sapUiSizeCompact">
<Panel>
<Toolbar>
<Select width="10%" forceSelection="false" id="region_id" items="{path: 'Model_month>/data/'}">
<core:Item key="{Model_month>region}" text="{Model_month>region}" />
</Select>
<ToolbarSpacer />
<Select width="10%" forceSelection="false" id="state_id" items="{path: 'Model_month>/data/'}">
<core:Item key="{Model_month>state}" text="{Model_month>state}" />
</Select>
<ToolbarSpacer />
<Select width="10%" forceSelection="false" id="cust_name_id" items="{path: 'Model_month>/data/'}">
<core:Item key="{Model_month>customer_name}" text="{Model_month>customer_name}" />
</Select>
<ToolbarSpacer />
<Select width="10%" forceSelection="false" id="date_id" items="{path: 'Model_month>/data/'}">
<core:Item key="{Model_month>date}" text="{Model_month>date}" />
</Select>
<ToolbarSpacer />
<Text id="date" />
</Toolbar>
</Panel>
-<f:Form id="FormToolbar" class="sapUiSizeCompact " ariaLabelledBy="Title1">
-<f:layout>
<f:ResponsiveGridLayout singleContainerFullSize="false" columnsM="2" columnsL="2" columnsXL="2" emptySpanS="0" emptySpanM="0" emptySpanL="0" emptySpanXL="0" adjustLabelSpan="false"/>
</f:layout>
-<f:formContainers>
-<f:FormContainer ariaLabelledBy="Title2">
-<f:formElements>
-<f:FormElement>
-<Panel class="panel1">
-<l:HorizontalLayout class="sapUiContentPadding equalColumns" width="100%">
-<HBox width="120px" justifyContent="Center" alignItems="Center" height="100px">
<Text text="quantity"/>
</HBox>
-<HBox width="120px" justifyContent="Center" alignItems="Center" height="100px">
<Text text="Amount"/>
</HBox>
</l:HorizontalLayout>
<viz:VizFrame id="idpiechart1" class="borderp" width="100%" height="285px" selectData="pie1" vizType="pie"> </viz:VizFrame>
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
-<f:FormContainer ariaLabelledBy="Title3">
-<f:formElements>
-<f:FormElement>
-<Panel id="idpiechart2" class="panel1">
<viz:VizFrame id="idcolumn" width="100%" height="430px" selectData="pie2" vizType="pie"/>
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
-<f:FormContainer ariaLabelledBy="Title3">
-<f:formElements>
-<f:FormElement>
<Panel id="idpiechart3" class="panel1"> </Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</Page>
</App>
</mvc: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 oView;
var ListController = Controller
.extend(
"Dashbbbboard.controller.s1",
{
onInit : function() {
var oView = this.getView();
debugger;
var ToolV = this; $.ajax({ url: 'http://142.93.216.68:5000/get_data', method: 'GET',
success: function(data,response)
{ debugger;
this.month = new JSONModel() this.month.setData(data); //data.toString(); ToolV.getView().byId('region_id').setModel(this.month,"Model_month"); ToolV.getView().byId('state_id').setModel(this.month,"Model_month"); ToolV.getView().byId('cust_name_id').setModel(this.month,"Model_month"); ToolV.getView().byId('date_id').setModel(this.month,"Model_month"); ToolV.getView().byId('Id_table').setModel(this.month,"Model_month");
}
that = this;
/* 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 = {
'Cars' : [ {
"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);*/
},
onAfterRendering:function(){
//var oView = this.getView();
//this.OModel=new sap.ui.model.json.JSONModel();
debugger;
$.ajax({
url: 'http://142.93.216.68:5000/get_data',
method: 'GET',
success: function(data,response){
debugger;
var that = this;
// var oVizFramepie = this.getView().byId("idpiechart1");
//var oView=this.getView();
this.OModel=new sap.ui.model.json.JSONModel(data);
var dataset = new sap.viz.ui5.data.FlattenedDataset({
data : {
path : "/data"
},
dimensions : [ {
axis : 1,
name : 'Amount',
value : "{data>/amount}",
} ],
measures : [ {
name : 'Quantity',
value : "{data>/quantity}",
} ],
});
this.getView().byId("idpiechart1").setData(dataset);
var pie = new sap.viz.ui5.Pie({
id : "idpiechart1",
width : "100%",
height : "285px",
selectData : function(oEvent) {
that.pie1(oEvent);
},
});
},
});
this.getView().byId("idpiechart1").setDataset(dataset);
this.getView().byId("idpiechart1").setModel(this.OModel,"G");
},
/*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);
},
*/
});
});