Widget:WJG UserExamQuery: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 189: | Line 189: | ||
}); | }); | ||
</script> | </script> | ||
</head> | |||
<body> | |||
<!-- line chart canvas element --> | |||
<canvas id="buyers" width="600" height="400"></canvas> | |||
<!-- pie chart canvas element --> | |||
<canvas id="countries" width="600" height="400"></canvas> | |||
<!-- bar chart canvas element --> | |||
<canvas id="income" 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); | |||
// 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> | |||
</body> | |||
<div id="metrics"></div> | <div id="metrics"></div> | ||