Widget:WJG UserExamQuery: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (7 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 189: | Line 203: | ||
}); | }); | ||
</script> | </script> | ||
<div id="wjgChartArea"> | |||
<!-- line chart canvas element --> | |||
<canvas id="buyers" width="600" height="400"></canvas> | |||
<canvas id="newGraph" width="600" height="400"></canvas> | |||
<script> | |||
// line chart data | |||
var buyerData = { | |||
labels : ["January 12","January 22","February 6","February 15","February 26","March 3","March 11","March 20","March 30","April 4","April 8","April 12","April 15","April 22"], | |||
datasets : [ | |||
{ | |||
fillColor : "rgba(220,220,220,0.5)", | |||
strokeColor : "rgba(220,220,220,1)", | |||
pointColor : "rgba(220,220,220,1)", | |||
pointStrokeColor : "#fff", | |||
data : testScores, | |||
title: "Individual tests" | |||
}, | |||
{ | |||
fillColor : "rgba(151,187,205,0.5)", | |||
strokeColor : "rgba(151,187,205,1)", | |||
pointColor : "rgba(151,187,205,1)", | |||
pointStrokeColor : "#fff", | |||
data : exp_vals, | |||
title: "Moving average" | |||
} | |||
] | |||
} | |||
var newopts = { | |||
yAxisLabel : "Percent Correct", | |||
yAxisFontFamily : "'Arial'", | |||
yAxisFontSize : 16, | |||
yAxisFontStyle : "normal", | |||
yAxisFontColor : "#666", | |||
legend : true, | |||
legendFontFamily : "'Arial'", | |||
legendFontSize : 12, | |||
legendFontStyle : "normal", | |||
legendFontColor : "#666", | |||
legendBlockSize : 15, | |||
legendBorders : false, | |||
legendBordersColor : "#666", | |||
graphTitle : "My Performance", | |||
graphTitleFontFamily : "'Arial'", | |||
graphTitleFontSize : 24, | |||
graphTitleFontStyle : "bold", | |||
graphTitleFontColor : "#666", | |||
} | |||
// get line chart canvas | |||
var buyers = document.getElementById('buyers').getContext('2d'); | |||
// draw line chart | |||
new Chart(buyers).Line(buyerData,newopts); | |||
</script> | |||
</div> | |||
<div id="metrics"></div> | <div id="metrics"></div> | ||
<div id="wjgContainer"> | <div id="wjgContainer"> | ||
<table id="report"> | <table id="report"> | ||
<thead> | <thead> | ||