AddJSONAndDropdowns

by Simon Raper

HTML

<!-- Adding divs and drop down selectors -->
<script type="application/json" id="points">
    {

        "points": [{
            "name": "ape man",
                "physicalstrength": 11,
                "fearfactor": 7,
                "killingpower": 12,
                "horrorrating": 4

        }, {
            "name": "godzilla",
                "physicalstrength": 3,
                "fearfactor": 5,
                "killingpower": 4,
                "horrorrating": 8

        }, {
            "name": "the ghoul",
                "physicalstrength": 7,
                "fearfactor": 12,
                "killingpower": 2,
                "horrorrating": 7

        }, {
            "name": "diablo",
                "physicalstrength": 8,
                "fearfactor": 7,
                "killingpower": 5,
                "horrorrating": 6

        }]
    }
</script>
<body>
    <div id="container" style="width:800px">
        <div id="header">
             <h2>Interactive Scatterplot</h1>
        </div>
        <div id="menu">
X-axis:
<select id="xAxisVar" onchange="reDraw()" >
  <option></option>
  <option value="physicalstrength" selected="selected">physical strength</option>
  <option value="fearfactor" >fear factor</option>  
  <option value="killingpower">killing power</option>
  <option value="horrorrating">horror rating</option>
</select>
<br>
Y-axis:
<select id="yAxisVar" onchange="reDraw()">
  <option></option>
  <option value="physicalstrength">physical strength</option>
  <option value="fearfactor" selected="selected">fear factor</option>  
  <option value="killingpower">killing power</option>
  <option value="horrorrating">horror rating</option>
</select>      
        </div>
            

        <div id="content">
            <canvas id="myCanvas" width="650" height="400"></canvas>
        </div>
        <div id="footer"></div>
    </div>
</body>

CSS

body {
    font: .625em/1.2"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif!important;
    background-color:#0f7fa8;
    color: white;
}
h2 {
    color:white;
}
#header {
    width:800px;
    height: 50px;
}
#menu {
    height:400px;
    width:150px;
    float:left;
}
#content {
    background-color:#ffffff;
    height:400px;
    width:650px;
    float:left;
}
#footer {
    clear:both;
    text-align:center;
}

JavaScript

//Data


var unparsed = document.getElementById('points').innerHTML;
parsed = JSON.parse(unparsed);

//Get canvas

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Draw axes

ctx.moveTo(50, 300);
ctx.lineTo(50, 50);
ctx.moveTo(50, 300);
ctx.lineTo(300, 300);
ctx.stroke();


//Draw ticks and labels

ctx.font = "11px Arial";
ctx.textAlign = "end";

for (var i = 1; i <= 12; i++) //x-axis
{
    x = 50 + 20 * i;
    ctx.moveTo(x, 300);
    ctx.lineTo(x, 305);
    ctx.fillText(i, x + 3, 317);

}

for (var i = 1; i <= 12; i++) //y-axis
{
    y = 300 - 20 * i;
    ctx.moveTo(50, y);
    ctx.lineTo(45, y);
    ctx.fillText(i, 40, y + 3);
}

ctx.stroke();

//Add points

function drawPoint(x, y) {
    ctx.beginPath();
    ctx.arc(50 + x * 20, 300 - y * 20, 3, 0, 2 * Math.PI);
    ctx.stroke();
}

function reDraw() {

ctx.clearRect(50,50,250,250);

    xVar = document.getElementById('xAxisVar').value;
    yVar = document.getElementById('yAxisVar').value;

    for (var i = 1; i <= 4; i++) {

        drawPoint(eval("parsed.points[i-1]." + xVar), eval("parsed.points[i-1]." + yVar));

    }

}