View.xml
<Page title=" SEL Production Status">
<customHeader>
<Bar>
<contentLeft>
<Text text = "Swaraj" class="logo"></Text>
</contentLeft>
<contentMiddle>
<Text text = "SEL Production Status" class="head1"></Text>
</contentMiddle>
<contentRight>
<Text text = " "></Text>
</contentRight>
</Bar>
</customHeader>
<content>
<VBox>
<Table id="tableId" >
<headerToolbar>
<OverflowToolbar width="auto" enabled="true"
showSeparators="All" >
<content>
<Label text=" " id="date" class="head2"/>
<ToolbarSpacer width=""/>
<Label text="Monthly Production :7670" class="head2"/>
<ToolbarSpacer width=""/>
<Label text="Monthly Target :1307" class="head2"/>
<ToolbarSpacer width=""/>
</content>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column>
<Text text=" "/>
</Column>
<Column>
<Text text="Target" class="target"/>
</Column>
<Column>
<Text text="OP1 Assy" class="target"/>
</Column>
<Column>
<Text text="Coupling" class="target"/>
</Column>
<Column>
<Text text="Advise" class="target"/>
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<Text text="SHIFT- A" class="shift"/>
<Text text="140" class="shift1"/>
<Text text="141" class="shift2"/>
<Text text="123" class="shift3"/>
<Text text="092" class="shift4"/>
</cells>
</ColumnListItem>
<ColumnListItem>
<cells>
<Text text="SHIFT- B" class="shift"/>
<Text text="140" class="shift1"/>
<Text text="074" class="shift2"/>
<Text text="078" class="shift3"/>
<Text text="055" class="shift4"/>
</cells>
</ColumnListItem>
</items>
</Table>
<ObjectHeader>
</ObjectHeader>
<HBox>
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Todays Thought :"
frameType="TwoByOne">
<TileContent footer=" ">
<FeedContent contentText="There is something beautiful in everyday.. you just have to find it..! "
subheader=" " value="007" />
</TileContent>
</GenericTile>
<ToolbarSpacer width="20em"/>
<viz:VizFrame id="idcolumn" width="50em" height="20em" class="tileLayout1">
</viz:VizFrame>
</HBox>
</VBox>
</content>
</Page>
Controller.js :
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel(this._data);
// debugger;
this.getView().setModel(oModel);
// 1.Get the id of the VizFrame
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 = {
'Population' : [
{"Year": "2010","Value": "158626687"},
{"Year": "2011","Value": "531160986"},
{"Year": "2012","Value": "915105168"},
{"Year": "2013","Value": "1093786762"},
{"Year": "2014","Value": "1274018495"},
]};
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 : 'Year',
value : "{Year}"}],
measures : [{
name : 'Population',
value : '{Value}'} ],
data : {
path : "/Population"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizType('column');
// 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': ["Population"]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Year"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
},
date : {
"date" : new Date()
},
<Page title=" SEL Production Status">
<customHeader>
<Bar>
<contentLeft>
<Text text = "Swaraj" class="logo"></Text>
</contentLeft>
<contentMiddle>
<Text text = "SEL Production Status" class="head1"></Text>
</contentMiddle>
<contentRight>
<Text text = " "></Text>
</contentRight>
</Bar>
</customHeader>
<content>
<VBox>
<Table id="tableId" >
<headerToolbar>
<OverflowToolbar width="auto" enabled="true"
showSeparators="All" >
<content>
<Label text=" " id="date" class="head2"/>
<ToolbarSpacer width=""/>
<Label text="Monthly Production :7670" class="head2"/>
<ToolbarSpacer width=""/>
<Label text="Monthly Target :1307" class="head2"/>
<ToolbarSpacer width=""/>
</content>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column>
<Text text=" "/>
</Column>
<Column>
<Text text="Target" class="target"/>
</Column>
<Column>
<Text text="OP1 Assy" class="target"/>
</Column>
<Column>
<Text text="Coupling" class="target"/>
</Column>
<Column>
<Text text="Advise" class="target"/>
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<Text text="SHIFT- A" class="shift"/>
<Text text="140" class="shift1"/>
<Text text="141" class="shift2"/>
<Text text="123" class="shift3"/>
<Text text="092" class="shift4"/>
</cells>
</ColumnListItem>
<ColumnListItem>
<cells>
<Text text="SHIFT- B" class="shift"/>
<Text text="140" class="shift1"/>
<Text text="074" class="shift2"/>
<Text text="078" class="shift3"/>
<Text text="055" class="shift4"/>
</cells>
</ColumnListItem>
</items>
</Table>
<ObjectHeader>
</ObjectHeader>
<HBox>
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Todays Thought :"
frameType="TwoByOne">
<TileContent footer=" ">
<FeedContent contentText="There is something beautiful in everyday.. you just have to find it..! "
subheader=" " value="007" />
</TileContent>
</GenericTile>
<ToolbarSpacer width="20em"/>
<viz:VizFrame id="idcolumn" width="50em" height="20em" class="tileLayout1">
</viz:VizFrame>
</HBox>
</VBox>
</content>
</Page>
Controller.js :
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel(this._data);
// debugger;
this.getView().setModel(oModel);
// 1.Get the id of the VizFrame
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 = {
'Population' : [
{"Year": "2010","Value": "158626687"},
{"Year": "2011","Value": "531160986"},
{"Year": "2012","Value": "915105168"},
{"Year": "2013","Value": "1093786762"},
{"Year": "2014","Value": "1274018495"},
]};
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 : 'Year',
value : "{Year}"}],
measures : [{
name : 'Population',
value : '{Value}'} ],
data : {
path : "/Population"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizType('column');
// 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': ["Population"]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Year"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
},
date : {
"date" : new Date()
},
index.html :
<link rel="stylesheet" type="text/css" href="style.css">
style.css :
.sapMText{
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
}
.shift{
font-size: 3em !important;
color: #ff00ff!important;
font-weight: normal !important;
},
.target{
font-size: 2em !important;
color: #400080!important;
font-weight: bold !important;
}
.logo{
font-size: 2em !important;
color: #00ff00!important;
font-weight: bold !important;
}
.head1{
font-size: 2em !important;
color: #8000ff!important;
font-weight: bold !important;
}
.head2{
font-size: 1em !important;
color: #006400!important;
font-weight: bold !important;
}
.shift1{
font-size: 3em !important;
color: #ff0080!important;
font-weight: normal !important;
}
.shift2{
font-size: 3em !important;
color: #0000ff!important;
font-weight: normal !important;
}
.shift3{
font-size: 3em !important;
color: #9d3134!important;
font-weight: normal !important;
}
.shift4{
font-size: 3em !important;
color: #80ff00!important;
font-weight: normal !important;
}
.tileLayout {
float: left!important ;
width: 120%!important;
height: 70%!important;
}