Dashboard 100% size

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!-- Dashboard example using FusionCharts.
This dashboard is built keeping the requirements of a store manager in any of Harry's supermart. It tries to provide insight on the 4 key metrics of a store. They are :
1. Sales / Revenue (Trend last 3 weeks)
2. No of Transactions (Trend last 3 weeks)
3. No of Footfalls (Trend last 3 weeks)
4. Customer Satisfaction Index (Trend last 3 weeks)

For the sake of simplicity this dashboard is based on a fixed date. Wich is 4th June 2014. Though the year is not relevant as all charts data is limited to last 3 weeks.
 -->
<div id='controllers'>
    <label for='width'>Width</label>
    <input id='width' type='text' value='550' />
    <label for='height'>Height</label>
    <input id='height' type='text' value='350' />
    <input id='change' class='resizebtn' type='Button' value='Resize' />
</div>
<div id='container'>
    <div id='header'>
        <div id='logoContainer'>
            <img src="http://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png" alt='Logo' />
            <div>
                	<h2>Harry's Supermart</h2>

                	<h4>Los Angeles Topanga</h4>
                    <p>Today: 4th June, 2014</p>

            </div>
        </div>
        <div id='userDetail'>
            <img src="http://static.fusioncharts.com/sampledata/images/user_image.jpg" alt='Logo' />
            <div>
                <p>Welcome John</p>
                <p>Store Manager</p>
            </div>
        </div>
        <div></div>
    </div>
    <div class='border-bottom' id='content'>
			<div class='border-bottom'>
				<div class='chartCont border-right' id='sales-chart-container'>FusionCharts will load here.</div>
				<div class='chartCont'...

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #00406A;
    font-family: Tahoma, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.chartCont {
    padding: 0px 12px;
}
.border-bottom {
    border-bottom: 1px dashed rgba(0, 117, 194, 0.2);
}
.border-right {
    border-right: 1px dashed rgba(0, 117, 194, 0.2);
}
#container {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
#container> div {
    width: 100%;
    background-color: #ffffff;
}
#logoContainer {
    float: left;
}
#logoContainer img {
    padding: 0 10px;
}
#logoContainer div {
    position: absolute;
    top: 8px;
    left: 95px;
}
#logoContainer div h2 {
    color: #0075c2;
}
#logoContainer div h4 {
    color: #0e948c;
}
#logoContainer div p {
    color: #719146;
    font-size: 12px;
    padding: 5px 0;
}
#userDetail {
    float: right;
}
#userDetail img {
    position: absolute;
    top: 16px;
    right: 130px;
}
#userDetail div {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #0075c2;
}
#userDetail div p {
    margin: 0;
}
#userDetail div p:nth-child(2) {
    color: #0e948c;
}
#header div:nth-child(3) {
    clear: both;
    border-bottom: 1px solid #0075c2;
}
#content div {
    display: inline-block;
}
#content > div {
    margin: 0px 20px;
}
#content > div:nth-child(1) > div {
    margin: 20px 0 0;
}
#content > div:nth-child(2) > div {
    margin: 0 0 20px;
}
#footer p {
    margin: 0;
    font-size: 9pt;
    color: black;
    padding: 5px 0;
    text-align: center;
}

JavaScript

FusionCharts.ready(function () {
    var chartWidth = '100%',
        chartHeight = '100%',
        dataType = 'json';
        
        var salesRevChart = new FusionCharts({
            type: 'column2d',
            renderAt: 'sales-chart-container',
            width: chartWidth,
            height: chartHeight,
            dataFormat: dataType,
            dataSource: {
                "chart":{
                    "caption":"Daily Revenue",
                    "subcaption":"Last 3 weeks",
                    "xaxisname":"Date",
                    "yaxisname":"Revenue (In USD)",
                    "numberprefix":"$",
                    "showvalues":"0",
                    "theme":"fint"
                },
                "data":[
                    {
                        "label":"14 May",
                        "value":"267111"
                    },
                    {
                        "label":"15 May",
                        "value":"217207"
                    },
                    {
                        "label":"16 May",
                        "value":"185836"
                    },
                    {
                        "label":"17 May",
                        "value":"251074"
                    },
                    {
                        "label":"18 May",
                        "value":"273374"
                    },
                    {
                        "label":"19 May",
                        "value":"215724"
                    },
                    {
                        "label":"20 May",
                        "value":"227219"
                    },
                    {
                        "label":"21 May",
                        "value":"268160"
                    },
                    {
                        "label":"22 May",
                        "value":"239446"
                    },
                    {
                        "label":"23 May",
                       ...