CS 474 HW4: Static Charts
James Madison University, Spring 2018 Semester

Electronic submission due Feb 23rd before 11:59 PM.
Each student submits hw4.html and hw4.css via Canvas.


The goal of this assignment is for you to create a web page (manually / by hand) that displays the results of a VLDS query. Your solution should look like the image to the right (click to enlarge). Refer to the Tutorials on Web Development to get started. To complete this assignment, you will need to know the basics of HTML and CSS. In addition, you will need to become familiar with the Google Charts library.


  1. Create two blank files named hw4.html and hw4.css. Add the following elements to the html file: DOCTYPE, html, head, and body. Link the css file in the head section. Write your name and JMU email in a comment at the top of each file.

  2. Choose any high school in VLDS besides Harrisonburg. Set the title of your page to the school's name. Also display the title at the top of the page inside a div with class="title". The title class should have a bold, 18pt font with centered text.

  3. Below the title, add three h1 headings named Query, Results, and Chart. In hw4.css, make all h1 headings use a 15pt font and have 5 pixels of padding above them.

  4. Write SQL (in pgAdmin) to select the average test scores of your high school for each subject each year. Paste your final SQL code into a pre element (blurred in the image above). In hw4.css, make all pre elements use a background color of your choice.

  5. Display the test scores under the Results heading. Your query does not need to return the scores exactly as shown above, however you should be able to create such a table by hand from the results of a single query. You may find tools like convertcsv.com or tablesgenerator.com useful.

  6. Use a combination of html style and css class definitions to achieve the following: all text in the table must be centered; the headers must have 5 pixels of padding and a light yellow background; the data rows should have alternating background colors (e.g., white and gray).

  7. In the head of your page, include the loader.js file required for Google Charts. Then add a basic line chart with default styling to the bottom of your page. (Add both the chart div and the corresponding script inside the body, not the head.)

  8. Modify the DataTable to have exactly the six columns shown above. For best results, make the sch_year column a string. Paste and reformat your query results (as JavaScript) inside the data.addRows parameter. Change the x and y axis titles in the options.

Honor Code Statement

This assignment must be completed individually. Your submission must conform to the JMU Honor Code. Authorized help is limited to general discussion on Piazza and meeting with the instructor. Copying work from another student or the Internet is an honor code violation and will be grounds for a reduced or failing grade in the course.