Web Dev Assignment 2
This assignment is a JavaScript. based assignment and this document outlines the requirements that must be met in order to
obtain full marks. This document is for both internal and external students, all work is done individually. Every person is
required to use the JQuery JavaScript. library to generate several graphs based on JSON data and be able to demonstrate and
explain their JavaScript. code when asked.
The Assignment
Your task is to plot the SAPOL Expiation data using the pre-configured web services and one of several options available for
consuming the Bureau data! The options are:
1. JQuery (using the ajax request)
2. D3 (the current version, v5.7 – newer than used in the past practicals which will also require some research)
Your task is to consume Ajax Data and present them on the Expiations/Index pages as per the requirements below.
Requirements
There are several tasks you are required to complete:
Task 1. Expiation Code Data [20%]
1. The first thing we need is a table of the data from the List Controller to be displayed in our Index page already created for
you. This table should list the
The Expiation Code
The Expiation Code Description
2. When the mouse cursor is over a row, the row should automatically highlight (and remain readable). You can do this using
the pre-existing bootstrap classes if the colours are suitable or make your own CSS selectors using an external style. sheet
linked at the top of the page. If in doubt, look up the bootstrap table information.
3. This table must be created inside the element with id="expiations" using an ajax-webservice data source with a timeout
function. This must be done using the best JQuery approaches, namely appendTo(). There must be NO hard coded table
elements on the page. Only the div.
4. Data must not be included in class names. No id’s can be created other than those provided. Strings used to create
elements must not include class names or other html attributes. We want good coding practices here!
5. If the Ajax Fails, the entire table and graph div should be replaced with an appropriate error message (e.g., “Failed to load
Station Data”). No table or graph elements should exist if the request fails
Task 2. Expiations Graph [40%]
The second thing we need is a bar/column graph of the data depicting the selected expiation code from the table. Clicking on a
code should bring generate the graph alongside the table.
1. This graph can be generated from div elements (or any other suitable elements like svg if using D3 v5, NOT table
elements). To do this, you will need to research topics such as how to use a “for-each” loop and how to create html
elements or append html using your chosen JavaScript. library.
It is suggested you start by designing your graph statically using plain HTML and custom CSS classes so that you
can determine the html design needed to implement the graph.
Once your “static” graph is in order, translate this to your ajax JQuery.
Use console.log(“your text” + javaScriptVariale); to help you debug as you write the code. If you are having
troubles getting the web services working, then use the console of the browser (F12 in IE) and the network
traffic in the browser to see if data is being sent and received.
2. The bar/column Graph should have the year located left off each bar (or underneath if a column graph) and the counts and
costs clearly displayed with each bar. Note that numbers should be right-aligned to improve readability. The cost of
expiations will need to be formatted/fixed to two decimal places using an appropriate function that rounds correctly. The
name of the expiation code, description (and if selected, year) must be clearly indicated at the top of the graph.
3. The bars will need to be scaled to consume the maximum available graphing space (ie use % not px if using div elements).
This will be tricky because the count of expiations of different types differ dramatically. If the Data is not available, then
the bars should not be created or appended to the graph and an appropriate message displayed.
4. The colour of the bars should look attractive and professional – black and white is not sufficient. The colours you choose
should look professional.
5. The bars must be animated. When you first select an expiation, the graph title should fade in and the bars should grow
from 0% to their actual size (as determined by the expiation count).
6. When the mouse is hovered over a year on the graph, it should be highlighted. When it highlights, a tool-tip should clearly
indicate that the bar can be clicked to view a monthly breakdown for that year: “Click to view monthly detail for xx year”
7. The Graph requires a title and x-axis and y-axis lables. These can be rotated or placed at the top left and bottom right of the
graph as appropriate to make it look professional
A basic line drawing example of the proposed graph is provided below. Your graph will need to look more p rofessional suitable
for publishing online:
Task 3. Monthly Breakdown [30%]
Clicking on a year bar in the annual expiation graph will cause the bars to animate down to nothing then a graph with the
selected monthly breakdown of the data will grow in its place. The month names will need to be clearly shown and aligned
appropriately. You may need to fade out the y-axis values to make this look professional. You will need to include a back button
that will re-establish the annual graph for the expiation code that was currently being viewed.
A basic line drawing example of the proposed graph is provided below. Your graph will need to look more professional suitabl e
for publishing online:
The Web Application
A web application containing the necessary database and Web API web services has been created for you. This can be
downloaded from the assessments tab on the course website. Your task is to complete the Views/Expiations/Index with the
necessary layout, graphs and JQuery or D3v5.7/JavaScript. code.
If you wish to use D3 then you will need to link to the v5.7 library. This is included in the project but not on the master _Layout
page.
The Web Services
Once you have your graph structure configured and made your decision on the JavaScript. library to use (JQuery vs D3v5.7), it is
suggested you get started creating an Ajax call to the ListController web service and get the data to download to the page. The
relative URL for the web service is “/List/GetExpiationCodes”. So if you run the application in VS2017 and your root URL shows
up as: http://localhost:55968/ then
http://localhost:55968/List/GetExpiationCodes will return the list of expiation codes and descriptions as Ajax Json data. This
may open up in Visual studio, in which case you can use Ctrl + K + D to auto format it into traditional JSON style.
[{"expiationOffenceCode": "A001", "expiationOffenceLongDescription": "EXCEED SIGNED SPEED BY 1 TO
9KPH"},
{"expiationOffenceCode": "A002","expiationOffenceLongDescription": "EXCEED SIGNED SPEED BY 10 - 19
KPH"},
{ "expiationOffenceCode": "A003", "expiationOffenceLongDescription": "EXCEED SIGNED SPEED BY 20 -
29KMPH" }, …
]
The next step would be to work out how to read and loop through the data. In the JsonData folder are various json files showing
the data correctly formatted so that you can see the arrays and object through their indentation. Use these files to help you
write your JQuery/D3v5.7 code. You may even want to write your Ajax request to use these files to speed things up during
testing. If you do this, remember to swap it back to the Ajax JSON request.
Once this is working, start creating html elements and assigning them data before appending them to the page.
Once you have your stations working, clicking on a code should navigate you to the next web service controller:
/Expiations?code=xx and for the monthly breakdown /Expiations?code=xxxxyear=yyyy. Examples of the JSON returned can
be found in the ExampleJson folder. BuildGraphCode.json provides an example of the initial annual graph data for a selected
expiation code (A002). BuildGraphCodeYear.json provides an example of the JSON returned for expiation code = A002 and year
= 2017.
Calling this API will give you data relating to the expiation data for that code from the years 2017 and 2018. You will need to plot
these on an interactive graph as described in Task 2.
JavaScript. (JQuery or D3)
The assignment is done individually and each person must write their own JavaScript. code
which includes their Ajax requests to perform. the above tasks. As mentioned you can use
JQuery OR D3v5 to achieve the various tasks. Other versions of D3 (such as v3 or v4) will not
receive any marks.
CSS
The style. of the bars and layout of the axis can be done using the embedded style. elements at
the top of the page as necessary or preferably an external style. sheet. The exact spacing of the
bars is not important but the graph must look professional: clean, be neat and readable. The
statistical information and counts in the bars should be spaced away from the border so as to
be easily readable. The codes, years and monthly markers of the bars should be adequately
spaced from the bars so as to not overflow on to the chart. The number of style. classes should
be kept to a minimum unless required as part of visual feedback during mouse hover or for
animations. The use of expiation data in Class Names and the use of ID’s will incur penalties.
Marking
Marking will be conducted in class during week 13. You will need to be able to demonstrate your work and answer any
questions to obtain a passing grade . A failure to explain your code will result in reduced or no marks.
Marks will be allocated in the following areas:
Expiation Code Table and General Page Layout [20%]
This includes:
Correct table structure
Correct use of bootstrap classes.
Quality of JQuery/D3v5.7 code used to generate the table.
Presentation and basic CSS – custom (your own css)/improved existing bootstrap CSS
Timeout and error functions
Annual Expiation Code Data Graph [40%]
Ajax call to the WebAPI to pull the correct data
Creation of html elements using JQuery/D3v5, including incorporating data and css classes into the new html elements
Use of bootstrap classes where appropriate
Use of JQuery functions over lengthy strings and concatenation
Appending the data to the existing data div.
Code to highlight bar and year of graph
Quality of graph layout and readability.
Colourisation of data
Animation of bars
Monthly Expiation Data Graph [30%]
Ajax call to the WebAPI to pull the correct data
Creation of html elements using JQuery/D3v5, including incorporating data and css classes into the new html elements
Use of bootstrap classes where appropriate
Use of JQuery functions over lengthy strings and concatenation
Animating the removal of the annual graph
Animating the entrance of the replacement monthly graph
Appending the data to the existing data div.
Code to highlight bar and month in graph
A button to re-draw the annual graph for the selected station
Quality of graph layout and readability.
Colourisation of data
Animation of bars
Code Quality [10%]
HTML Validation – is your generated HTML valid?
Optimisation of JQuery and data being consumed
Strategic use of HTML structure, class names, data attributes, index information and foreach loops.
Reuse of attributes.
Due Date
You will need to have your site completed for presentation which will take place in Week 13 during your practical time. You will
need to upload a copy of your website by Tuesday 30th Oct 9am which will be used for further analysis of the individual
assessment components. You MUST present your work in class of Week 13 to obtain a passing grade.