File: /home/cafsindia/wealth_cafsindia_com/application/views/home.php
<?php
$this->load->view("partial/header");
?>
<div class="container-fluid bg">
<div class="row">
<div class="col-md-12" style="margin-bottom:12px;">
<div class="col-md-8">
<h3 class="bold title" style="margin-bottom: 0px;">Overall Analysis</h3>
</div>
<div class="col-md-4">
<div class="dropdown T_dropdown">
<button class="btn btn-default dropdown-toggle d_btn" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
All Family Members
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Members 1</a></li>
<li><a href="#">Members 2</a></li>
<li><a href="#">Members 3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Members more than 3</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
</div>
</div>
<div class="col-md-12" style="margin-bottom: 104px;">
<div class="row">
<div class="col-md-3">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card card-1">
<h5 class="bold">Asset</h5>
<h6>30000 <i class="fa fa-thumbs-up" aria-hidden="true"></i></h6>
<p class="para"><i class="fa fa-undo" aria-hidden="true"></i>
Hover and View More Details</p>
</div>
</div>
<div class="flip-card-back">
<div class="card card-1">
<h5 class="bold">Yearly Commitment</h5>
<h6 class="bold">Invetment-x   savings-y</h6>
<h6 class="bold">Loan-z</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card card-2">
<h5 class="bold">Live SIP</h5>
<h6>30000 <i class="fa fa-thumbs-up" aria-hidden="true"></i></h6>
<p class="para"><i class="fa fa-undo" aria-hidden="true"></i>
Hover and View More Details</p>
</div>
</div>
<div class="flip-card-back">
<div class="card card-2">
<h5 class="bold">Equity - 30000</h5>
<h5 class="bold">Debt - 400000</h5>
<p class="para"><i class="fa fa-undo" aria-hidden="true"></i>
Hover and View More Details</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card card-3">
<h5 class="bold">Life Cover</h5>
<h6>30000 <i class="fa fa-thumbs-up" aria-hidden="true"></i></h6>
<p class="para"><i class="fa fa-undo" aria-hidden="true"></i>
Hover and View More Details</p>
</div>
</div>
<div class="flip-card-back">
<div class="card card-3">
<h5 class="bold">Health Cover</h5>
<h6>30000 <i class="fa fa-thumbs-up" aria-hidden="true"></i></h6>
<h6>30000 <i class="fa fa-thumbs-up" aria-hidden="true"></i></h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card card-4">
<h5 class="bold">Mutual Fund(Total)</h5>
<h6>CAGR-40% <i class="fa fa-thumbs-up" aria-hidden="true"></i></h6>
<p class="para"><i class="fa fa-undo" aria-hidden="true"></i>
Hover and View More Details</p>
</div>
</div>
<div class="flip-card-back">
<div class="card card-4">
<h5 class="bold">Absolute - 2000</h5>
<h5 class="bold">CAGR - 40%</h5>
<p class="para"><i class="fa fa-undo" aria-hidden="true"></i>
Hover and View More Details</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-8">
<h3 class="bold title">Investments Summary</h3>
<div class="layer">
<div class="col-md-6">
<div style="">
<table class="table">
<thead>
<tr class="default_c">
<th scope="col"><i class="fa fa-area-chart Life_c" aria-hidden="true"></i></th>
<th scope="col">Life Insurance</th>
<th scope="col">(Premium Paid)</th>
<th scope="col">51800</th>
</tr>
<tr class="default_c">
<th scope="col"><i class="fa fa-line-chart ULIP_c" aria-hidden="true"></i></th>
<th scope="col">ULIP</th>
<th scope="col">(as on 17-06-2019)</th>
<th scope="col">0</th>
</tr>
<tr class="default_c">
<th scope="col"><i class="fa fa-pie-chart saving_c" aria-hidden="true"></i></th>
<th scope="col">Saving</th>
<th scope="col">(as on 17-06-2019)</th>
<th scope="col">445515</th>
</tr>
<tr class="default_c">
<th scope="col"><i class="fa fa-area-chart bullion_c" aria-hidden="true"></i></th>
<th scope="col">Bullion</th>
<th scope="col">(as on 17-06-2019)</th>
<th scope="col">85500</th>
</tr>
<tr class="default_c">
<th scope="col"><i class="fa fa-area-chart Property_c" aria-hidden="true"></i></th>
<th scope="col">Property</th>
<th scope="col">(as on 17-06-2019)</th>
<th scope="col">100000</th>
</tr>
<tr class="default_c">
<th scope="col"><i class="fa fa-line-chart Mutual_c" aria-hidden="true"></i></th>
<th scope="col">Mutual Fund</th>
<th scope="col">(as on 17-06-2019)</th>
<th scope="col">0</th>
</tr>
<tr class="default_c">
<th scope="col"><i class="fa fa-bar-chart Stock_c" aria-hidden="true"></i></th>
<th scope="col">Stock</th>
<th scope="col">(as on 17-06-2019)</th>
<th scope="col">244</th>
</tr>
<tr class="default_c">
<th scope="col"><i class="fa fa-area-chart others_c" aria-hidden="true"></i></th>
<th scope="col">Others</th>
<th scope="col">(as on 17-06-2019)</th>
<th scope="col">0</th>
</tr>
<tr class="Total_c">
<th scope="col"><i class="fa fa-pie-chart" aria-hidden="true"></i></th>
<th scope="col">Total</th>
<th scope="col"></th>
<th scope="col"><i class="fa fa-star" aria-hidden="true"></i> 683059</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="col-md-6">
<h3 class="bold title">Asset Allocation 2019</h3>
<div id="container" style=" height: 249px;">
</div>
</div>
</div>
</div>
<div class="col-md-4" style="padding: 0 4px;">
<h3 class="bold title">Renewal calendar</h3>
<div class="layer">
<div class="col-md-8">
<ul class='nav navv-tabs d_pills' data-tabs='tabs'>
<li role='presentation' class="active">
<a data-toggle='tab' href='#upcom_tab'>Up Comming</a>
</li>
<li role='presentation'>
<a data-toggle='tab' href='#outstand_tab'>Outstanding</a>
</li>
</ul>
</div>
<div class="col-md-4">
<div class="dropdown d_dropdown" id="">
<button class="btn btn-default dropdown-toggle d_btn" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Year Period
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">3 years</a></li>
<li><a href="#">5 Years</a></li>
<li><a href="#">10 Years</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">10 Years +</a></li>
</ul>
</div>
</div>
<div class='tab-content' style=''>
<div class='tab-pane active' id='upcom_tab'>
<table class="table">
<thead>
<tr class="Total_c">
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">Event</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>01-jan-2017</td>
<td>Mutual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Health</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Portfolio</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Health</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Portfolio</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Portfolio</td>
<td>200000</td>
</tr>
</tbody>
</table>
</div>
<div class='tab-pane' id='outstand_tab' style=''>
<div class='tab-pane active' id='customer_tab'>
<table class="table">
<thead>
<tr class="Total_c">
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">Event</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Health</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Portfolio</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Health</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Portfolio</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Health</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>Health</td>
<td>200000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--<ul class="nav nav-tabs d_pills" data-tabs='tabs'>
<li role="presentation" class="active d_atab"><a data-toggle='tab' href="#upcoming">Up Comming</a></li>
<li role="presentation" class="d_tab"><a data-toggle='tab' href="#outstanding">Outstanding</a></li>
</ul>
<div class="tab-content">
<div style="tab-pane active" id="upcoming">
<div class="dropdown d_dropdown" id="">
<button class="btn btn-default dropdown-toggle d_btn" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Year Period
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">3 years</a></li>
<li><a href="#">5 Years</a></li>
<li><a href="#">10 Years</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">More Than 10 Years</a></li>
</ul>
</div>
<table class="table">
<thead>
<tr class="Total_c">
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">Event</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
</tbody>
</table>
</div>
<div style="tab-pane" id="outstanding">
<div class="dropdown d_dropdown" id="">
<button class="btn btn-default dropdown-toggle d_btn" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Year Period
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">3 years</a></li>
<li><a href="#">5 Years</a></li>
<li><a href="#">10 Years</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">More Than 10 Years</a></li>
</ul>
</div>
<table class="table">
<thead>
<tr class="Total_c">
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">Event</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
<tr>
<th scope="row">1</th>
<td>01-jan-2019</td>
<td>MUtual Fund</td>
<td>200000</td>
</tr>
</tbody>
</table>
</div>
</div>-->
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-8">
<h3 class="bold title">Mutual Fund</h3>
<div class="layer">
<div style="">
<table class="table">
<thead>
<tr class="Total_c">
<th scope="col">#</th>
<th scope="col">Fund Name</th>
<th scope="col">Start Date</th>
<th scope="col">Invested Amount</th>
<th scope="col">Mode</th>
<th scope="col">Fund Value</th>
<th scope="col">CAGR</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><p data-toggle="tooltip" data-placement="left" data-container="body" title="Venkatanarasim" class="tool">Venkatanarasim</p></td>
<td>01-jan-2019</td>
<td>7000000</td>
<td>SIP</td>
<td>600000</td>
<td>02%   <i class="fa fa-long-arrow-down icon_dec_color" aria-hidden="true"></i></td>
</tr>
<tr>
<th scope="row">1</th>
<td><p data-toggle="tooltip" data-placement="left" data-container="body" title="Venkatanarasimharajuvaripeta railway station" class="tool">Venkatanarasimharajuvaripeta railway station</p></td>
<td>01-jan-2019</td>
<td>7000000</td>
<td>lump sum</td>
<td>600000</td>
<td>51%   <i class="fa fa-long-arrow-up icon_inc_color" aria-hidden="true"></i></td>
</tr>
<tr>
<th scope="row">1</th>
<td><p data-toggle="tooltip" data-placement="left" data-container="body" title="Venkatanarasimharajuvaripeta railway station" class="tool">Venkatanarasimharajuvaripeta railway station</p></td>
<td>01-jan-2019</td>
<td>7000000</td>
<td>lump sum</td>
<td>600000</td>
<td>12%   <i class="fa fa-long-arrow-down icon_dec_color" aria-hidden="true"></i></td>
</tr>
<tr>
<th scope="row">1</th>
<td><p data-toggle="tooltip" data-placement="left" data-container="body" title="Venkatanarasimharajuvaripeta railway station" class="tool">Venkatanarasimharajuvaripeta railway station</p></td>
<td>01-jan-2019</td>
<td>7000000</td>
<td>SIP</td>
<td>600000</td>
<td>25%   <i class="fa fa-long-arrow-up icon_inc_color" aria-hidden="true"></i></td>
</tr>
<tr>
<th scope="row">1</th>
<td><p data-toggle="tooltip" data-placement="left" data-container="body" title="Venkatanarasimharajuvaripeta railway station" class="tool">Venkatanarasimharajuvaripeta railway station</p></td>
<td>01-jan-2019</td>
<td>7000000</td>
<td>SIP</td>
<td>600000</td>
<td>09%   <i class="fa fa-long-arrow-down icon_dec_color" aria-hidden="true"></i></td>
</tr>
<tr>
<th scope="row">1</th>
<td>
<p data-toggle="tooltip" data-placement="left" data-container="body" title="Venkatanarasimharajuvaripeta railway station" class="tool">Venkatanarasimharajuvaripeta railway station</p>
</td>
<td>01-jan-2019</td>
<td>7000000</td>
<td>lump sum</td>
<td>600000</td>
<td>35%   <i class="fa fa-long-arrow-up icon_inc_color" aria-hidden="true"></i></td>
</tr>
<tr>
<th scope="row">1</th>
<td><p data-toggle="tooltip" data-placement="left" data-container="body" title="Venkatanarasimharajuvaripeta railway station" class="tool">Venkatanarasimharajuvaripeta railway station</p></td>
<td>01-jan-2019</td>
<td>7000000</td>
<td>SIP</td>
<td>600000</td>
<td>11%   <i class="fa fa-long-arrow-down icon_dec_color" aria-hidden="true"></i></td>
</tr>
<tr>
<th scope="row">1</th>
<td><p data-toggle="tooltip" data-placement="left" data-container="body" title="Venkatanarasimharajuvaripeta railway station" class="tool">Venkatanarasimharajuvaripeta railway station</p></td>
<td>01-jan-2019</td>
<td>7000000</td>
<td>lump sum</td>
<td>600000</td>
<td>19%   <i class="fa fa-long-arrow-up icon_inc_color" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4" style="padding: 0 4px;">
<h3 class="bold title">Market Action</h3>
<div class="layer">
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a href="https://in.tradingview.com" rel="noopener" target="_blank"><span class="blue-text">Market Data</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
{
"colorTheme": "light",
"showChart": true,
"locale": "in",
"largeChartUrl": "",
"isTransparent": false,
"width": "400",
"height": "660",
"plotLineColorGrowing": "rgba(33, 150, 243, 1)",
"plotLineColorFalling": "rgba(33, 150, 243, 1)",
"gridLineColor": "rgba(233, 233, 234, 1)",
"scaleFontColor": "rgba(120, 123, 134, 1)",
"belowLineFillColorGrowing": "rgba(33, 150, 243, 0.12)",
"belowLineFillColorFalling": "rgba(33, 150, 243, 0.12)",
"symbolActiveColor": "rgba(33, 150, 243, 0.12)",
"tabs": [
{
"title": "Indices",
"symbols": [
{
"s": "OANDA:SPX500USD",
"d": "S&P 500"
},
{
"s": "INDEX:XLY0",
"d": "Shanghai Composite"
},
{
"s": "FOREXCOM:DJI",
"d": "Dow 30"
},
{
"s": "INDEX:NKY",
"d": "Nikkei 225"
},
{
"s": "INDEX:DAX",
"d": "DAX Index"
},
{
"s": "OANDA:UK100GBP",
"d": "FTSE 100"
},
{
"s": "BSE:SENSEX",
"d": "BSE"
},
{
"s": "NSE:NIFTY",
"d": "NSE"
}
],
"originalTitle": "Indices"
},
{
"title": "Commodities",
"symbols": [
{
"s": "CME_MINI:ES1!",
"d": "E-Mini S&P"
},
{
"s": "CME:E61!",
"d": "Euro"
},
{
"s": "COMEX:GC1!",
"d": "Gold"
},
{
"s": "NYMEX:CL1!",
"d": "Crude Oil"
},
{
"s": "NYMEX:NG1!",
"d": "Natural Gas"
},
{
"s": "CBOT:ZC1!",
"d": "Corn"
}
],
"originalTitle": "Commodities"
},
{
"title": "Bonds",
"symbols": [
{
"s": "CME:GE1!",
"d": "Eurodollar"
},
{
"s": "CBOT:ZB1!",
"d": "T-Bond"
},
{
"s": "CBOT:UD1!",
"d": "Ultra T-Bond"
},
{
"s": "EUREX:GG1!",
"d": "Euro Bund"
},
{
"s": "EUREX:II1!",
"d": "Euro BTP"
},
{
"s": "EUREX:HR1!",
"d": "Euro BOBL"
}
],
"originalTitle": "Bonds"
},
{
"title": "Forex",
"symbols": [
{
"s": "FX:EURUSD"
},
{
"s": "FX:GBPUSD"
},
{
"s": "FX:USDJPY"
},
{
"s": "FX:USDCHF"
},
{
"s": "FX:AUDUSD"
},
{
"s": "FX:USDCAD"
}
],
"originalTitle": "Forex"
}
]
}
</script>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<h3 class="bold title">Recommendation <span class="blinking"> <i class="fa fa-bullhorn" aria-hidden="true"></i> (COMMING SOON)</span></h3>
<div class="layer_com">
<img src="./images/recom.gif" style="width: 630px;
height: 437px;">
</div>
</div>
<div class="col-md-6">
<h3 class="bold title">Goal Status</h3>
<div class="bg_layer">
<div class="col-md-12 Small_layer">
<div class="col-md-3">
<div><i class="fa fa-car fa-3x icon_pink" aria-hidden="true"></i> BMW</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Date</div>
<div>07 Jun 2021</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Years to go</div>
<div>1 y 11 m and 20 d</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Status</div>
<div><i class="fa fa-thumbs-up fa-2x icon_green" aria-hidden="true"></i></div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Current Expence</div>
<div>2000000</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Amount</div>
<div>2160000</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Deficit</div>
<div>1103995</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Rsik Factor</div>
<div>Good</div>
</div>
</div>
<div class="col-md-12 Small_layer">
<div class="col-md-3">
<div><i class="fa fa-home fa-3x icon_pink" aria-hidden="true"></i> House</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Date</div>
<div>07 Jun 2021</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Years to go</div>
<div>1 y 11 m and 20 d</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Status</div>
<div><i class="fa fa-thumbs-down fa-2x icon_red" aria-hidden="true"></i></div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Current Expence</div>
<div>2000000</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Amount</div>
<div>2160000</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Deficit</div>
<div>1103995</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Rsik Factor</div>
<div>Not Bad</div>
</div>
</div>
<div class="col-md-12 Small_layer">
<div class="col-md-3">
<div><i class="fa fa-building fa-3x icon_pink" aria-hidden="true"></i> Flat</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Date</div>
<div>07 Jun 2021</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Years to go</div>
<div>1 y 11 m and 20 d</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Status</div>
<div><i class="fa fa-thumbs-up fa-2x icon_green" aria-hidden="true"></i></div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Current Expence</div>
<div>2000000</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Amount</div>
<div>2160000</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Deficit</div>
<div>1103995</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Rsik Factor</div>
<div>Good</div>
</div>
</div>
<div class="col-md-12 Small_layer">
<div class="col-md-3">
<div><i class="fa fa-motorcycle fa-3x icon_pink" aria-hidden="true"></i> Bike</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Date</div>
<div>07 Jun 2021</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Years to go</div>
<div>1 y 11 m and 20 d</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Status</div>
<div><i class="fa fa-thumbs-down fa-2x icon_red" aria-hidden="true"></i></div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Current Expence</div>
<div>2000000</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Goal Amount</div>
<div>2160000</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Deficit</div>
<div>1103995</div>
</div>
<div class="col-md-3">
<div class="bold color_blue">Rsik Factor</div>
<div>Not Bad</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h3 class="bold title">Inflow & Outflow</h3>
<div class="layer" id="inout_flow">
</div>
</div>
<div class="col-md-6" style="margin-bottom:49px;">
<h3 class="bold title">Contribution Chart</h3>
<div class="layer" id="contribution">
</div>
</div>
</div>
</div>
<script>
/*Accert Allocation Chart*/
Highcharts.setOptions({
colors: ['#E64A6B', '#FF9124', '#22CECE', '#FFC233', '#059BFF','#FF8F00']
});
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Property', 45.0],
['Stock', 26.8],
{
name: 'Savings',
y: 12.8,
sliced: true,
selected: true
},
['Life Insurence', 8.5],
['Bullion', 6.2],
['Others', 0.7]
]
}]
});
/*infow and out flow Chart*/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('inout_flow', {
chart: {
type: 'bar'
},
title: {
text: 'Inflow and Outflow Chart, 2018'
},
subtitle: {
text: 'Source: <a href="http://populationpyramid.net/germany/2018/">Inflow and Outflow Chart of the World from 1950 to 2100</a>'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Inflow',
data: [
-2.2, -2.1, -2.2, -2.4,
-2.7, -3.0, -3.3, -3.2,
-2.9, -3.5, -4.4, -4.1,
-3.4, -2.7, -2.3, -2.2,
-1.6, -0.6, -0.3, -0.0,
-0.0
]
}, {
name: 'Outflow',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}]
});
/*Contribution Chart*/
Highcharts.chart('contribution', {
chart: {
type: 'column'
},
title: {
text: 'Contribution Chart'
},
xAxis: {
categories: ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021','2022','2023','2024']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Income',
data: [5, 3, 4, 7, 2, 1, 4, 1, 1, 1, 1]
}, {
name: 'Expense',
data: [2, 2, 3, 2, 1, 2, 5, 7, 5, 7, 2]
}, {
name: 'Investments',
data: [3, 4, 4, 2, 5, 4, 5, 5, 4, 7, 1]
}]
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
});
</script>
<?php
$this->load->view('partial/footer');
?>