PALS3004: Web Programming Demo 9-1

<html>
<head>
<title>PALS3004: Web Programming Demo 9-1</title>
<script src="include/flotr2.min.js"></script>
<script src="include/simple_statistics.js"></script>
<script>
function drawgraph() {
  // generate some random data
  var x=[];
  var y=[];
  for (var i=0;i<50;i++) {
    var val=Math.random();
    x.push(10*val);
    y.push(4*val+Math.random()-0.5);
  }
  // calculate a regression
  var slope=ss.sampleCovariance(x,y)/ss.sampleVariance(x);
  var incpt=ss.mean(y)-slope*ss.mean(x);
  // put data into correct format for plotting
  var d1=[];
  for (var i=0;i<x.length;i++) d1.push([ x[i], y[i] ]);
  var d2=[];
  d2.push([ ss.min(x), incpt+slope*ss.min(x) ]);
  d2.push([ ss.max(x), incpt+slope*ss.max(x) ]);
  // plot the graph
  Flotr.draw(document.getElementById("plotarea"),
    [
      { data : d1, points: { show:true }},
      { data : d2 }
    ],
    {
      title : "Scatterplot & Regression",
      shadowSize : 0,
      xaxis : {
        title : "x value",
        min : 0,
        max : 10
      },
      yaxis : {
        title : "y value",
        titleAngle : 90,
        min : 0,
        max : 4
      },
      HtmlText : false
    }
  );
}
</script>
<style>
#plotmargin {
  width: 500px;
  height: 400px;
  padding: 10px;
  background-color: #EEEEDD;
}
#plotarea {
  width: 500px;
  height: 400px;
  background-color: #FFFFEE;
}
</style>
</head>
<body onload="drawgraph()">
  <h2>Demo 9-1: Demonstrate Scatterplot & Regression Line</h2>

  <p><div id="plotmargin"><div id="plotarea"></div></div>
  
</body>
</html>