Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<template name="visualize">
    <h1>Charts!</h1>
    <canvas id="age-groups" width="400" height="400"></canvas>
</template>
 
Template.visualize.onRendered(function() {
   Questions.find().observeChanges({
        added: function(){
            showAgeGroups();
        }
    });
});
function showAgeGroups() {
    var data = [
        {
            value: Questions.find({"age": "Under 18"}).count(),
            color: "#F38630"
        },
        {
            value: Questions.find({"age": "18-25"}).count(),
            color: "#E0E4CC"
        },
        {
            value: Questions.find({"age": "Over 35"}).count(),
            color: "#69D2E7"
        },
        {
            value: Questions.find({"age": "35-45"}).count(),
            color: "green"
        }
    ];
    var ctx = $("#age-groups").get(0).getContext("2d");
    ageChart = new Chart(ctx);
    new Chart(ctx).Pie(data);
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers