CS 50.12 HTML 5 :: Interactive Web Pages

Overview

The first exercise involves creating a drop down select menu that dynamically draws a chart in the canvas area. You will need to add this feature to your live web site.

Here is my example: Garden site with dynamic chart picker.

This chart is fairly complex with a HUGE amount of Javascript so you may decide to create it as a seperate file before placing it into your existing "live" site.

Here is a page with just the chart

Another option is to seperate the Javascript from the HTML page:

Here is the simple web page chart with code that links to a chartpick.js file

chartpicker.js file

Dynamically Generated Chart - HTML Code

Let's start with the HTML that shows a drop down menu and defines a canvas area.

<h2>Rose Selector Chart</h2>

<div id="dynamic-chart-demo">
<p>Choose a flower: <select id="infoselector">
<option value="HybridTea">Hybrid Tea</option>
<option value="Floribunda">Floribunda</option>
<option value="DavidAustin">David Austin English</option>
<option value="Landscape">Landscape / Carpet </option>
<option value="RosaRugosa">Rosa Rugosa</option>
</select></p>

<canvas id="infofinder" width="500" height="400" style="border: 1px solid"></canvas>
</div>

Here is how the file looks at this stage of the demonstration.

Add Javascript Code

First I use the <script> tag to add a reference to the JQuery library.


<!--generic javascript-->
<script src="scripts/jquery-1.6.4.min.js"></script>part 1

Add Code that sets the values for the array which will be used to display the chart data, info in bold will be what you change to reflect the values and labels you want to have in your chart. I changed the first 3 values and kept the difficulty setting.


<script type="text/javascript">
var infodata = [
{ name: "Hybrid Tea", height: 350, bloom: 300, smell: 100, difficulty: 350 },
{ name: "Florbunda", height: 300, bloom: 250, smell: 200, difficulty: 200 },
{ name: "David Austin English", height: 350, bloom: 300, smell: 350, difficulty: 301 },
{ name: "Landscape", height: 200, bloom: 100, smell: 100, difficulty: 100 },
{ name: "Rosa Rugosa", height: 100, bloom: 100, smell: 100, difficulty: 50 }
];
var infoChart = null;
var infoCtx = null;

function drawChart(forWhichinfo) {
drawBackground();
drawLabels(forWhichinfo);
drawinfoData(forWhichinfo);
}

Add more Javascript that draws the background of the chart

Note - I have not changed any of this Javascript

function drawBackground() {
infoCtx.save();

// fill in the chart background
infoCtx.fillStyle = "#eedd99";
infoCtx.fillRect(0,0,infoCtx.canvas.width,infoCtx.canvas.height);

// create the graph area - box around vertical lines
infoCtx.strokeStyle = "#252525";
infoCtx.strokeRect(120, 100, 350, 260);

// draw the chart lines
infoCtx.strokeStyle = "#989898";
for (var x = 180; x < 660; x += 20) {
infoCtx.beginPath();
infoCtx.moveTo(x, 100);
infoCtx.lineTo(x, 360);
infoCtx.stroke();
}

infoCtx.restore();
}

Add Javascript that Draws the chart title and labels

Note - The areas you will change to reflect your values are marked in bold.

function drawLabels(forWhichinfo) {
infoCtx.save();

// draw chart name
infoCtx.font = "24pt Arial";
infoCtx.fillStyle = "#3C6B92";
infoCtx.fillText("Data Picker: " + infodata[forWhichinfo].name, 20, 65);

// draw the labels
infoCtx.font = "20pt Arial";
infoCtx.fillStyle = "#3C6B92";
infoCtx.fillText("Height", 20, 155);
infoCtx.fillText("Bloom Size", 20, 210);
infoCtx.fillText("Smell", 20, 265);
infoCtx.fillText("Difficulty", 20, 320);

infoCtx.restore();
}

Add Javascript that draws data which is based on an array you created a few steps above

Note - I have not changed any of this Javascript

function drawinfoData(forWhichinfo) {
infoCtx.save();

infoCtx.strokeStyle = "#606060";
infoCtx.fillStyle = "#fff";

// draw factor 1 the 181, 130 is the X/ on the canvas where the first element is drawn the 30 is the height of the bar, note how the Y value changes

infoCtx.fillRect(181, 130, infodata[forWhichinfo].height, 30);
infoCtx.strokeRect(181, 130, infodata[forWhichinfo].height, 30);

// draw factor 2
infoCtx.fillRect(181, 185, infodata[forWhichinfo].bloom, 30);
infoCtx.strokeRect(181, 185, infodata[forWhichinfo].bloom, 30);

// draw factor 3
infoCtx.fillRect(181, 240, infodata[forWhichinfo].smell, 30);
infoCtx.strokeRect(181, 240, infodata[forWhichinfo].smell, 30);

// draw factor which has 3 display types - green for easy, yellow for moderate, red for hard
if (infodata[forWhichinfo].difficulty <= 150)
infoCtx.fillStyle = "#00d366";
else if (infodata[forWhichinfo].difficulty > 150 && infodata[forWhichinfo].difficulty < 300)
infoCtx.fillStyle = "#f7f700";
else if (infodata[forWhichinfo].difficulty >= 300)
infoCtx.fillStyle = "#ce0000";
infoCtx.fillRect(181, 295, infodata[forWhichinfo].difficulty, 30);
infoCtx.strokeRect(181, 295, infodata[forWhichinfo].difficulty, 30);

infoCtx.restore();
}

$("document").ready(function () {
infoChart = document.getElementById("infofinder");
infoCtx = infoChart.getContext("2d");

$("#infoselector").bind("change", function () { drawChart(this.selectedIndex) });

drawChart(0);
});

Garden site with chart data added

Modify Javascript to change display colors, text size, chart size, and values

Step 1

This graph was designed to display on a canvas of 400 by 700, when I changed the size to 400 by 500 I found that the chart was too wide.

I change the X and Y coordinates so that the chart now starts and stops farther to the left. Changes are displayed in bold.

// create the graph area
infoCtx.strokeStyle = "#252525";
infoCtx.strokeRect(120, 100, 350, 260);

Step 2

// draw the chart lines
infoCtx.strokeStyle = "#989898";
for (var x = 120; x < 460; x += 20) {
infoCtx.beginPath();
infoCtx.moveTo(x, 100);
infoCtx.lineTo(x, 360);
infoCtx.stroke();
}

Step 3

Change the starting point for the bar graphs from 181 to 121

// draw factor 1 the 121, 131 is the X/ on the canvas where the first element is drawn the 30 is the height of the bar, note how the Y value changes

infoCtx.fillRect(121, 130, tourdata[forWhichinfo].height, 30);
infoCtx.strokeRect(121, 130, tourdata[forWhichinfo].height, 30);

// draw factor 2
infoCtx.fillRect(121, 185, infodata[forWhichinfo].bloom, 30);
infoCtx.strokeRect(121, 185, infodata[forWhichinfo].bloom, 30);

// draw factor 3
infoCtx.fillRect(121, 240, infodata[forWhichinfo].smell, 30);
infoCtx.strokeRect(121, 240, infodata[forWhichinfo].smell, 30);

// draw factor which has 3 display types - green - easy, yellow - moderate, red - hard
if (infodata[forWhichinfo].difficulty <= 150)
infoCtx.fillStyle = "#00d366";
else if (infodata[forWhichinfo].difficulty > 150 && infodata[forWhichinfo].difficulty < 300)
infoCtx.fillStyle = "#f7f700";
else if (infodata[forWhichinfo].difficulty >= 300)
infoCtx.fillStyle = "#ce0000";
infoCtx.fillRect(121, 295, infodata[forWhichinfo].difficulty, 30);
infoCtx.strokeRect(121, 295, infodata[forWhichinfo].difficulty, 30);

infoCtx.restore();
}

Step 4

Change the canvas color

// fill in the chart background
infoCtx.fillStyle = "#d4c5b9";
infoCtx.fillRect(0,0,infoCtx.canvas.width,infoCtx.canvas.height);

Step 5

Change the font for the name of the chart and the chart labels

// draw chart name
infoCtx.font = "18pt Arial";
infoCtx.fillStyle = "#111111";
infoCtx.fillText("Type of Rose: " + infodata[forWhichinfo].name, 20, 65);

// draw the labels
infoCtx.font = "14pt Arial";
infoCtx.fillStyle = "#111";
infoCtx.fillText("Height", 20, 155);
infoCtx.fillText("Bloom Size", 20, 210);
infoCtx.fillText("Smell", 20, 265);
infoCtx.fillText("Difficulty", 20, 320);

Step 6

Change the bar colors (note the difficulty colors remain the same)

infoCtx.strokeStyle = "#606060";
infoCtx.fillStyle = "#fff";

Step 7

One more pesky detail - the chart says "Tour Name" I change that to "Type of Rose".

// draw chart name
infoCtx.font = "18pt Arial";
infoCtx.fillStyle = "#111111";
infoCtx.fillText("Type of Rose: " + tourdata[forWhichTour].name, 20, 65);

Here is the final garden site with the rose chart

I recommend you use this simple chart web page and external Javascript file as the basis for your code. Once you have that working then add the code to the live site.

Table to chart conversion code

Lab Activity

Thanks to Jay Peretz, our Javascript instructor for sending me this data.

Visit this website to download the Javascript :: JQuery with Google Charts

After downloading the fie, unzip it. There is an index.html file which is included - however I found that to be a bit confusing since it has code examples as part of the page content.

Here is a simple stripped down version of the chart to table sample page - it has tables that you can modify and Javascript you can control.

I will be modifying the charts in class and in lab. Folks can work on their own charts when we are in lab.