table graph tile and css combination

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()

},

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;

}

OUTPUT: