Updated One Dashboard project:

January 02, 2020

0

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);
},
*/
});

});

Tags: sap sap fiori

Updated One Dashboard project:

Post a Comment

Contact form