COMP5347 - Tutorial w9 Jquery Charting

This document provides a tutorial on using jQuery, AJAX requests, and Google Charting in a web application development context. It explains how to use jQuery selectors and AJAX to load dynamic content. It also demonstrates how to create pie and bar charts using Google Charting and load chart data via AJAX. Students are instructed to write code to display a bar chart when the "Bar Chart" link is clicked by adapting examples and Google Charting documentation.

Uploaded by

Destrious

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

23 views

COMP5347 - Tutorial w9 Jquery Charting

Uploaded by

Destrious

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 4

COMP5347 Tutorial

School of Computer Science

COMP5347: Web Application Development

Week 9 Tutorial: jQuery, AJAX and Google Charting

Learning Objectives
• Get familiar with jQuery selectors and syntax

• Practice Ajax requests

• Practice basic Google Charting features

Part 1: jQuery syntax and AJAX Requests

Download week9-src.zip from Canvas, Start Eclipse, select “open projects from
file system” under file menu, go to the directory you just extracted the content and
click open. In this case, all the necessary node modules are specified in
package.json. Right click it on the project explorer panel, select “Run as” then “npm
install".

You can run revserver.js as node.js application and you open this address with
your browser: http://localhost:3000/revisionajax. Open the Developer Tools
or Inspector from your browser and refresh the page. You should see information
similar to this figure:

1
COMP5347 Tutorial

You can check revision.server.routes.js and see that path /revisionajax will
load titleFormAjax.pug. If you check this pug file, it loads main.js file inside js/
directory and jQuery library. Beside loading main.js file, this file also has a button
with id “button” and a div with id “results”. You will need to check the main.js
file and try to understand what will this js file do with these two elements. When the
button is clicked, it will try to find the value of “ title” input and use it as a
parameter for requesting /getLatest page. The results of /getLatest request
then will be displayed inside the div with id result. This way, the result of the
requested title will be shown in the same page of the form.

Part 2: Simple Charting Application

While running the server, access a new page from browser with this address:
http://localhost:3000/gchart. This would display a simple page with two links. If
you click the first link “Pie Chart”, a pie chart would display. If you click the second
link, you will get an error message.

Open revision.server.routes.js in Eclipse and inspect the content. The

router defines two routes with path /gchart and /gchart/getData . The first
route renders the view graphs.pug. The second route use a controller which
demonstrates a slightly different response handling method. It does not send a text or
render any view, instead it sends back a hard coded json object using res.json()
function. The json object response is meant for client side script. But you can view it
from browser by sending a request to localhost:3000/gchart/getData from
your browser.

2
COMP5347 Tutorial

ExpressJS has predefined functions to configure the response in various ways, for a full
list see reference document https://expressjs.com/en/api.html#res.
Now open graphs.pug and inspect its content in Eclipse. The body element of
graphs.pug contains two anchor links. Both links are meant to be processed by
client side javascript code. The head element of graphs.pug contains links to three
scripts. The first two are third party libraries: jQuery and Google Charts loader. The
last one is our own script: graphs.js

Majority of the processing in this graph page happens on client side and is implemented
in graphs.js. Charting related functions and statements in this script are adapted from
Google Charts Tutorials.
(https://developers.google.com/chart/interactive/docs/quick_start)

The first statement in this script calls the load() function to load the corechart
package. This statement is required for any web page using Google Charts. Two
global variables: options and data are declared in the next two statements. A
global function drawPie() is declared to draw a pie chart based on the chart data
stored in data variable. The chart data is stored as javascript object, the next few
statements follow google Charts tutorial to prepare the DataTable. jQuery’s
$.each() function is used to iterate all key value pairs in the javascript object. After
DataTable is prepared, a pie chart is created on the designed.
(https://developers.google.com/chart/interactive/docs/basic_load_libs)

Container element: $("#myChart")[0] is equivalent to the raw JavaScript

expression document.getElementById("myChart"). The chart.draw() statement
will update the element with the chart content.

The next statement registers an even handler on the document.ready event:

$(document).ready(function() {
...
}

Inside the event handler, an ajax request $.getJSON(url, data, callback) is

sent to get the chart data from server. This request is similar to $.get() and
$.post() except that it receives JSON data as response. The response is assigned
to the global variable data, so that it is available to all scripts on this page.
It also registers an event handler to the click event of the link “Pie Chart”. The event
handler disables the default action of the link and calls the drawPie() function.

3
COMP5347 Tutorial

Part 3: Write your own code

Now write your own code to display a bar charts when a user clicks the “Bar Chart”
link. You can find tutorial on bar chart below. Note that Google Charts uses
different terminologies for vertical and horizontal bar charts.
https://developers.google.com/chart/interactive/docs/gallery/columnchart