|
|
| Line 9: |
Line 9: |
| <!-- import plugin script --> | | <!-- import plugin script --> |
| <script src='http://dl.dropboxusercontent.com/u/1874620/ChartNew.js'></script> | | <script src='http://dl.dropboxusercontent.com/u/1874620/ChartNew.js'></script> |
| <script> | | <script src='http://www.dropbox.com/s/qky1988vq16pyji/WJG_Chart_Practice.js'></script> |
| var testScores=[53.4,49.8,61.8,44.5,47.8,62.9,68.7,64.9,65.0,82.7,77.9,78.6,80.1,84.6];
| |
| | |
| // I define a function here that takes in an array of values, calculates the exponential moving average based on a certain half-life
| |
| // and returns an array with the exponential moving average at each point.
| |
| function calc_exp_moving_average(values,half_life){
| |
| var exp_avg_vals=new Array(values.length); //Initialize new array in which we'll put our calculated values
| |
| for (var i = values.length; i >(-1); i=i-1) {
| |
| exp_weights=[];
| |
| for (var j=0; j<i; j+=1){
| |
| var weight=Math.pow(half_life, i-j-1);
| |
| exp_weights[j]=weight;
| |
| };//Ends the calculation of the exponential weights for each timepoint.
| |
| var score_sum = 0;
| |
| var subvalues=values.slice(0,i+1);
| |
| var exp_weight_sum=0;
| |
| for(var i=0; i< exp_weights.length; i++) {
| |
| score_sum += exp_weights[i]*subvalues[i];
| |
| exp_weight_sum+=exp_weights[i];
| |
| }//Ends the multiplication of the weights by the scores.
| |
| | |
| var average_score=score_sum/exp_weight_sum;
| |
| if (i==0){average_score=values[i];}
| |
| exp_avg_vals[i]=average_score;
| |
| } //Ends the iteration through values.length
| |
| return exp_avg_vals.slice(1,exp_avg_vals.length+1);
| |
| }//Ends the function
| |
| exp_vals=calc_exp_moving_average(testScores,2/3);
| |
| </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> | | </body> |
| </html> | | </html> |
| </includeonly> | | </includeonly> |