Doughnut Chart

by nathanziarek

HTML

<script src="https://rawgit.com/tannerlinsley/Chart.js/master/Chart.min.js"></script>
<canvas id="budgetChart" width="60" height="60"></canvas>
<canvas id="dateChart" width="100" height="100"></canvas>
<div id="values">
    <div class="small">GL 88377-7872</div>
    <div>Food &amp; Kitchen Supplies</div>
    <div>Order $<span id="spendval"></span>
    &nbsp;&nbsp;&bull;&nbsp;&nbsp;
        Trending <span id="trend"></span>
    </div>

</div>

<div id="stuff">
<label>Budget</label><input id="budget" value="500"/>
<label>Spend to date</label><input id="spend" value="50" />
<label>Spend this order</label><input id="orderspend" value="75"/>
<label>Day of Month</label><input id="day" value="5"/>
</div>

CSS

body { font-family: Helvetica, Calibri, Arial; font-size: 14px; }

label { width: 150px; display: block; float: left; text-align: right; margin: 5px }
input { width: 50px; display: block; float: left; margin: 5px }
#stuff{ width: 250px; position: absolute; top: 10px; right: 10px }
#values{ width: 500px; position: absolute; top: 10px; left: 75px }
.small { color: #777; font-size: .85em }

#values div { margin: 4px; } 

canvas { position: absolute; top: 10px; left: 10px }

JavaScript

var budget, 
    spend, 
    orderspend, 
    day, 
    data = [{
        value: 100,
        color: "hsl(190, 40%, 50%)",
        label: "Spend To-Date"
    }, {
        value: 100,
        color: "hsl(190, 40%, 45%)",
        label: "This Order"
    }, {
        value: 100,
        color: "hsl(190, 5%, 95%)",
        label: "Remaining"
    }], 
    data2 = [{value:15, color: "rgba(0,0,0,.5)"}, {value:15, color: "rgba(200,0,0,1)"}, {value:15, color: "rgba(0,0,0,.05)"}], 
    options = {
        animation: true,
        percentageInnerCutout: 70,
        showTooltips: false,
        segmentStrokeWidth: 1,
        animationEasing: "ease",
        animationSteps: 40
    };


$("#budget, #spend, #orderspend, #day").keyup( updateData );

function updateData() {
    
    budget = parseFloat($("#budget").val()) || 0;
    spend = parseFloat($("#spend").val());
    orderspend = parseFloat($("#orderspend").val());
    remaining = Math.max(0, budget-(spend+orderspend));
    day = Math.min(30, parseFloat($("#day").val())); //of 30  
    
    $("#spendval").text(orderspend.toFixed(2));
    $("#budgetval").text(" / " + budget.toFixed(2));
    $("#varianceamount").text((budget-(spend+orderspend)).toFixed(2));
    $("#variancepercent").text(((budget-(spend+orderspend))/budget*100).toFixed(0) + "%");
        $("#trend").text(((((30 * (orderspend + spend)) / day) / budget) * 100).toFixed(0) + "%");

    
    budgetChart.segments[0].value = spend;
    budgetChart.segments[1].value = orderspend;
    budgetChart.segments[2].value = remaining;
    budgetChart.options.onAnimationComplete = function(){
        context.font = (($(canvas).width() * options.percentageInnerCutout / 100) / 2.8) + 'px Calibri';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        if(((orderspend+spend) / budget) > 1) {
            context.fillStyle = 'rgba(200, 0, 0, 1)';
            budgetChart.segments[1].color = 'red';
        } else {
            context.fillStyle =...