(fixed browser issue) 2 charts - overlap assetAllocationDesktop

(fixed browser issue) 2 charts - overlap assetAllocationDesktop

by pj_js15

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.js"></script>
<div class='asset-allocation-data'>
    <div class='asset-allocation-data-header-text'>
        <h3>How your money is invested</h3>
        <p>
            With more time to ride out the ups and downs of investment markets, more of your super will be invested in growth assets, such as property and shares. These assets have a greater potential to deliver higher returns and grow your retirement savings above
            inflation.
        </p>
    </div>

    <div class='chart-container'>
        <div class='asset-allocation-data-chart'>
            <canvas id="defensiveChart" width="410" height="410"></canvas>
            <canvas id="growthChart" width="300" height="300"></canvas>
            <div id='chart-title' style="display:none;">Asset Class</div>
        </div>

        <div class='asset-allocation-data-legend'>
            <dl>
                <dt class="defensive">xx% of your assets are classified as Defensive</dt>
                <dd>
                    <div class="legend-color fixed-interest"></div> Fixed Interest</dd>
                <dd>
                    <div class="legend-color australian-shares"></div> Australian Shares</dd>
            </dl>
            <dl>
                <dt class="defensive">&nbsp;</dt>
                <dd>90.00%</dd>
                <dd>10.00%</dd>
            </dl>

            <dl>
                <dt class="growth">xx% of your assets are classified as Growth</dt>
                <dd>
                    <div class="legend-color global-shares"></div> Global Shares</dd>
                <dd>
                    <div class="legend-color global-fixed-interest"></div> Global Fixed Interest</dd>
                <dd>
                    <div class="legend-color property-securities"></div> Property Securities</dd>
                <dd>
                    <div...

CSS

* {
    font-family: "Helvetica W01 Roman", Helvetica, arial, sans-serif;
}

/** chart-specific styles **/
#chart-title {
    font-size: 25px;
    color: #666666;
    position: relative;
    top: -610px;
    left: 160px;
}
#growthChart {
    position: relative;
    height: 350px !important;
    width: 350px !important;
    top: -421px;
    left: 50px;
}
.asset-allocation-data-chart {
    width: 420px;
    height: 420px;
}
#defensiveChart {
    width: 450px !important;
    height: 450px !important;
}
#growthChart {
    margin-top: 18px;
}
.asset-allocation-data-chart {
    float: left;
    margin: 20px 0 0 20px;
}
/** chart-specific styles **/

.asset-allocation-data {
    height: 1500px;
    padding: 10px;
}

.asset-allocation-data-header-text h3 {
    background-color: #203A5D;
    color: #FFF;
    padding: 0 0 0 5px;
}

.asset-allocation-data-header-text p {
    color: #666666;
    padding: 5px;
}

.asset-allocation-data-legend {
    float: right;
    margin: 20px 0 0 20px;
    width: 575px;
}

dl {
    float: left
}

dt {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    font-weight: bold;
    color: #666666;
    text-align: center;
    padding: 12px;
}

dt.defensive {
    background-color: #9FD6F6;
}

dt.growth {
    background-color: #99D0BC;
    width: 100%;
}

dd {
    color: #666666;
    border-bottom: 1px solid silver;
    font-family: "Helvetica W01 Roman", Helvetica, arial, sans-serif;
    margin-left: 0px;
    padding: 12px;
}




.legend-color {
    width: 20px;
    height: 20px;
    position: relative;
    float: left;
    margin-right: 5px;
    border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
}
.legend-color.fixed-interest {
    background-color: #014990;
}
.legend-color.australian-shares {
    background-color: #00AEEF;
}
.legend-color.global-shares {
    background-color: #89D3F4;
}
.legend-color.global-fixed-interest {
    background-color:...

JavaScript

var data = {
    "type": "doughnut",
    "data": {
        "labels": [],
        "datasets": [{
            data: [30, 27, 10, 10, 10, 13],
            backgroundColor: [
                "#014990",
                "#00AEEF",
                "#89D3F4",
                "#FAE13C",
                "#F6A01B",
                "#F16142"
            ]
        }]
    }
};

var growthChart = new Chart($('#growthChart'), data);

var data2 = {
    "type": "doughnut",
    "data": {
        "labels": [],
        "datasets": [{
            "data": [57, 43, 0],
            "backgroundColor": [
                "#0077C0",
                "#8BC63E"
            ]
        }]
    }
};

var growthChart = new Chart($('#growthChart'), data);

setTimeout(function() {
    var defensiveChart = new Chart($('#defensiveChart'), data2);
    defensiveChart.config.options.cutoutPercentage = 80;
    defensiveChart.config.options.hover.mode = 'dataset';
debugger;
    defensiveChart.update();
    $('#chart-title').delay(500).fadeIn();
}, 1000);