piegraph

by Angelo Tirambulo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<div class="box-container">
    <div class="box dicking-around-color hide">
        <p class="text-box">Dicking Around </p>
    </div>
</div>

<canvas id="myChart" height="100" width="100"></canvas>

<div class="box-container">
    <div class="box makingshit-color hidden">
        <p class="text-box">Making Shit</p>
    </div>

CSS

.box-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.box {
    width: 30%;
}

.hide {
    visibility:hidden;
}

.dicking-around-color {
    border: solid 4px #E986E6;
    margin-top: 4%;
    margin-left: 4%;
    align-self: flex-start;
}

.makingshit-color {
    border: solid 4px black;
    color: #E986E6;
    align-self: flex-end;
    margin-right: 4%;
    margin-bottom: 4%;
}

JavaScript

// Start of Pie Chart JS

var ctx = document.getElementById("myChart");
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.hover.onHover = function(x) {

    var i = x[0]._index;
    var DA = $(".dicking-around-color");
    var MS=$(".makingshit-color");
    

    function showDA() {
        DA.removeClass("hide");
    },
     function hideDA() {
        DA.addClass("hide");
    }
    
    
    if (i === 0) {
        showDA();
        hideDA();
    };
    
    function showMS() {
    MS.removeClass("hide");
    }
    
    if (i === 1) {
     showMS();
    };


};

var data = {
    datasets: [{
        data: [95, 1],
        backgroundColor: [
            "#E986E6",
            "#000"
        ],
        borderColor: [
            'rgba(255,99,132,0)',
            'rgba(54, 162, 235, 0)'
        ],
        hover: []

    }]
};
var options = {
    toolTip: {

    },

};



var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: options
});