Responsive - AA Chart

Responsive - AA Chart

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-legend-container'>
        <div class='chart-container'>
            <div class='asset-allocation-data-chart'>
                <canvas id="defensiveChart" width="1" height="1"></canvas>
                <canvas id="growthChart" width="1" height="1"></canvas>
                <div id='chart-title' style="display:none;">Asset Class</div>
            </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 cash"></div> Cash</dd>
                <dd>
                    <div class="legend-color fixed-interest"></div> Australian Fixed Interest</dd>
            </dl>
            <dl>
                <dt class="defensive percentage">Header</dt>
                <dd>30.00%</dd>
                <dd>27.00%</dd>
            </dl>
            <dl>
                <dt class='defensive value hide-on-mobile'>Value</dt>
                <dd class='hide-on-mobile'>10.00%</dd>
                <dd class='hide-on-mobile'>12.00%</dd>
            </dl>

            <dl>
                <dt class="growth">xx% of your assets are classified as Growth</dt>
                <dd>
                    <div class="legend-color property-securities"></div> Property</dd>
            </dl>
   ...

CSS

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


/** chart-specific styles **/

.chart-legend-container {
    width: 1100px;
    height: 500px;
}

#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;
    float: left;
    margin: 20px 0 0 20px;
}

#defensiveChart {
    width: 450px !important;
    height: 450px !important;
}

#growthChart {
    margin-top: 18px;
}


/** chart-specific styles **/

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

.asset-allocation-data-header-text h3 {
    color: #192B4B;
    padding: 10px 0;
}

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

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

.note {
    font-color: #333;
    font-size: smaller;
}

dl {
    float: left;
    margin: 0;
}

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: #0077C0;
    color: #FFFFFF;
    width: 380px;
}

dt.growth {
    background-color: #8BC63E;
    color: #FFFFFF;
    width: 380px;
}

dt.defensive.percentage,
dt.defensive.value,
dt.growth.percentage,
dt.growth.value {
    width: 100%;
    text-align: left;
}

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


/* Desktop */

@media screen and (min-width: 768px) {
    .asset-allocation-data-header-text h3 {}
}


/*mobile-all*/

@media screen and (min-width: 0px) and (max-width: 767px) {
    .asset-allocation-data-header-text h3 {}
}


/*...

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);
//debugger;

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

var growthChart = new Chart($('#growthChart'), data);
growthChart.config.options.hover.mode = 'none';

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