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, 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 <rect> 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 professional 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 suitable 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=xxxx&year=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 30^th 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.