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 Site.css external style sheet already linked to the page.  If in doubt, look up the bootstrap table information.  The row should indicate that it can be clicked to view additional information:

Your task is to plot the SA Water Reservoir Volume data using the pre-configured web services and one of several options available for consuming the data! The options are: 1. JQuery (using the ajax request) 2. D3 v5.16.x – 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 /Home/Index page as per the requirements below. Requirements There are several tasks you are required to complete as described below. In addition, there are some restrictions on implementation: • Data from the JSON 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!

Attachments:

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 tables and a graph based on JSON data and be able to demonstrate and explain their JavaScript code in person.

The Assignment

Your task is to plot the SA Water Reservoir Volume data using the pre-configured web services and one of several options available for consuming the data!  The options are:

  1. JQuery (using the ajax request)
  2. D3 v5.16.x – 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 /Home/Index page as per the requirements below.

Requirements

There are several tasks you are required to complete as described below.  In addition, there are some restrictions on implementation:

  • Data from the JSON 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!

Task 1.                     Reservoir Data [30%]

  1. The first thing we need is a table of the data from the Reservoirs API Controllerto be displayed in our Index page already created for you.  This table should list the
  • The Name of the reservoir (as a single colum table row)
  • The Capacity (in ML)
  • A link to the reservoir location/detail in Google Maps
  1. 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 Site.css external style sheet already linked to the page.  If in doubt, look up the bootstrap table information.  The row should indicate that it can be clicked to view additional information:

 

  1. Clicking on a row should highlight the row permanently until another row is clicked.

 

  1. The Map link can utilise the format: https://www.google.com/maps/place/[reservoirName] and should open in a new tab when clicked.

 

  1. This table must be created inside the element with id=”reservoirList” 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 or any other elements added to the page.  All elements in this assignment must be added dynamically using JQuery.  When no reservoir is selected the right of the page should display “Select a Reservoir to view…”.

 

  1. If the Ajax Fails, the entire table and graph div should be replaced with an appropriate error message (e.g., “Failed to load Reservoir Data”). Feel free to include an image of your choice to represent no data. No table or graph elements should exist if the request fails other than the original html provided.

Task 2.                     Annual Reservoir Volume Breakdown [30%]

The second thing we need is a stylistic presentation of the selected reservoir annual volume data.  Clicking on a table row should generate the list alongside the table:

  1. The list will be generated using data derived from the selected row of the table. This list can be generated from div elements (or any other suitable elements).
  2. Each list item should clearly state:
    • The Year of reservoir volume data it represents
    • The number of available records
    • The date range over which the records were collected (starting -> end month)
    • The average volume in the reservoir for that year.
  3. Hovering the mouse over a list item will indicate that the record is clickable and prompt the user to view additional volume detail. This list should be presented in a professional and easy to use manner.
  4. When a list item representing a year is clicked, it must remain highlighted.

 

 

Task 3.                     Annual Volume Breakdown [30%]

Lastly, when a year for a chosen reservoir is selected the list item/panel becomes permanently highlighted and an animated bar graph drops down within the selected panel.  The graph must be generated using either JQuery or D3 v5.16.x.  No other chart/graph library or framework can be used.  The same graph is shown twice to highlight that the bars grow to their appropriate width:

 

  1. To get the graph div to slide down you will need to use something like the JQuery slideDown()
  2. To build the graph you will 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 (JQuery or D3 V5.16+).
    1. 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.
    2. Once your “static” graph is in order, translate this to your Ajax JQuery.
    3. 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.

 

  1. The bar/column Graph should have the year and selected category clearly indicated at the top of the graph using a suitable element (h4 in the example). The y axis should have a Month label and the month names located left off each bar (or underneath if using a column graph with D3).  The monthly reservoir volumes should be clearly displayed within each bar.  Note that numbers should be right-aligned and formatted using toLocaleString() to improve readability.

 

  1. 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 reservoir volumes of the various months may differ dramatically.   If the Data is not available, then the bars should not be created/appended to the graph.

 

  1. The colour of the bars should look attractive and professional – black and white is not sufficient. The colours you choose should look professional. 

 

  1. The bars must be animated. When you first select an year, the graph title should appear and the bars should grow from ~10% to their actual size (as determined by the reservoir volume).  You need an initial starting size to accommodate the text otherwise you will need to fade in the text or adjust the text overflow for when the bar starts from 0 size.

 

  1. When the mouse is hovered over a month on the graph a tool-tip should clearly indicate how many ML were recorded, the day, month and year the record was made.

 

  1. 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 example of the proposed graph is provided below.  Your graph will need to look professional and suitable for publishing online.  The style does not need to exactly replicate the example provided below (which uses primarily bootstrap classes/styling).  You are free to chose colours/styles you think are appropriate to a professional appearance:

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/Home/Index with the necessary layout, graphs and JQuery or D3v5.16.x/JavaScript code.

If you wish to use D3 then you will need to link to the v5.16.x 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.16.x), it is suggested you get started creating an Ajax call to the ReservoirsController web service and get the data to download to the page.  The relative URL for the web service is “/api/Reservoirs”.  So if you run the application in VS2017 and your root URL shows up as: http://localhost:55968/ then

http://localhost:55968/api/Reservoirs will return the list of reservoir IDs, reservoir names, record details etc 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:
(One record shown from the array)

[  {

“dateRange”: {

“from”: “2018-05-31T00:00:00”,

“to”: “2020-04-20T00:00:00”

},

“records”: 23,

“reservoirDetail”: {

“ReservoirVolumes”: [],

“reservoirID”: 1,

“reservoirName”: “Barossa Reservoir”,

“capacityML”: 4375,

“latitude”: -34.65,

“longitude”: 138.85

}
}  ]

The next step would be to work out how to read and loop through the data. In the ExampleJsonData 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.16.x code. You may even want to write your Ajax request to use these files to simplify testing. If you do this, remember to swap it back to the Ajax JSON web API requests when finished.

Once this is working, start creating html elements and assigning them data before appending them to the page.

Once you have your reservoir list working, clicking on a code should navigate you to the next web service controller used to generate the Annual Reservoir Volume List (Task 2):  GetReservoir(int id) using the URL /api/Reservoirs/5

Clicking on a year in the list should trigger the next webAPI function for the details graph: GetReservoir(int id, int year) using the URL: /api/Reservoirs/5?year=2018 as an example.

Examples of the JSON returned can be found in the ExampleJsonData folder.  1_Reservoirs.json provides an example of the initial table data.  2_SelectedReservoir.json provides an example of the JSON returned for the annual list of reservoir volumes for a selected reservoir. Lastly, 3_ReservoirGraphData provides example data of the monthly volume breakdown for a selected reservoir and year.

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.16.x 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 embedded style elements for testing as necessary but then move these to the Site.css external style sheet provided (and already linked). 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 volumes, 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 reservoir data in Class Names and the use of ID’s will incur penalties.

 

 

Marking

Marking will be conducted via the zoom virtual classroom. 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:

Reservoir Table [30%]

This includes:

  • Correct table structure (thead, tbody, tr, th, td)
  • Presentation and correct use of bootstrap classes.
  • Quality of JQuery/D3v5.16.x code used to generate the table.
  • Use of JQuery functions over lengthy strings and concatenation (except for plain text used in tool tips)
  • Code to highlight selected data
  • Timeout and error functions

Selected Reservoir Annual Volume List [30%]

  • Ajax call to the WebAPI to pull the correct data
  • Creation of html elements using JQuery/D3v5.16.x, including incorporating data and css classes into the new html elements
  • Presentation and use of bootstrap classes where appropriate
  • Use of JQuery functions over lengthy strings and concatenation (except for plain text used in tool tips)
  • Appending the data to the existing data div.
  • Code to highlight selected year
  • Quality of layout and readability.

Monthly Graph Reservoir Volume Detail [30%]

  • Ajax call to the WebAPI to pull the correct data
  • Creation of html elements using JQuery/D3v5.16.x, 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 (except for plain text used in tool tips)
  • Appending the data to the existing div.
  • Code to animate graph bars
  • Quality of graph layout and readability.

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.
  • No additional IDs.