Widget:WJG UserExamQuery: Difference between revisions

Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 25: Line 25:
text-align: center;
text-align: center;
}
}
.cell{
#tableContainer .cell{
width:20%;
width:20%;
text-align: center;
text-align: center;
display: inline-block;
display: inline-block;
}
}
span{
#tableContainer span{
width:100%;
width:100%;
}
}
Line 102: Line 102:


}
}
var plotNewGraph = function(){
console.log('Now plotting a graph of the user test information');
$("tr:odd").addClass("odd");
$("tr:not(.odd)").hide();
$("tr:first-child").show();
$("tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
}


var runQuery= function() {
var runQuery= function() {
Line 190: Line 204:
</script>
</script>


     </head>
     <div id="wjgChartArea">
    <body>
         <!-- line chart canvas element -->
         <!-- line chart canvas element -->
         <canvas id="buyers" width="600" height="400"></canvas>
         <canvas id="buyers" width="600" height="400"></canvas>
        <!-- pie chart canvas element -->
 
        <canvas id="countries" width="600" height="400"></canvas>
         <canvas id="newGraph" width="600" height="400"></canvas>
        <!-- bar chart canvas element -->
         <canvas id="income" width="600" height="400"></canvas>
         <script>
         <script>
             // line chart data
             // line chart data
Line 249: Line 260:
             // draw line chart
             // draw line chart
             new Chart(buyers).Line(buyerData,newopts);
             new Chart(buyers).Line(buyerData,newopts);
            // pie chart data
            var pieData = [
                {
                    value: 20,
                    color:"#878BB6"
                },
                {
                    value : 40,
                    color : "#4ACAB4"
                },
                {
                    value : 10,
                    color : "#FF8153"
                },
                {
                    value : 30,
                    color : "#FFEA88"
                }
            ];
            // pie chart options
            var pieOptions = {
                segmentShowStroke : false,
                animateScale : true
            }
            // get pie chart canvas
            var countries= document.getElementById("countries").getContext("2d");
            // draw pie chart
            new Chart(countries).Pie(pieData, pieOptions);
            // bar chart data
            var barData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                    {
                        fillColor : "#48A497",
                        strokeColor : "#48A4D1",
                        data : [456,479,324,569,702,600]
                    },
                    {
                        fillColor : "rgba(73,188,170,0.4)",
                        strokeColor : "rgba(72,174,209,0.4)",
                        data : [364,504,605,400,345,320]
                    }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);
         </script>
         </script>
     </body>
     </div>
<div id="metrics"></div>
<div id="metrics"></div>


<div id="wjgContainer">
<div id="wjgContainer">
    <h1>My Exams</h1>
     <table id="report">
     <table id="report">
         <thead>
         <thead>

Latest revision as of 01:11, 17 August 2014

Retrieved from "https://www.wikidoc.org/index.php?title=Widget:WJG_UserExamQuery&oldid=1009210"