Welcome to Workshop 10 of Web Architecture. In this workshop you'll learn how to add a different set of interactive graphs to your website and how to style these graphs using options within Highcharts. We will also have some time for you to experiment and have a look at the different libraries that are available to use from the web. At the end of this workshop you'll be more comfortable using 3rd party API's and libraries to extend your application.

Using Highcharts to draw graphs in JavaScript

As we discussed in this weeks Lecture, Highcharts is a JavaScript Library that allows developers, like us, to draw interactive graphs and visualisations for our websites. Highcharts is built on top of jQuery which allow us to add these visualisations into our HTML DOM very easily and allow us to change the visualisation in response to user interaction on our website.

Before we start adding our graphs, take a look at the Highcharts demo page and documentation so that you can explore and understand how the library works.

Each demo shows the options (inside View Options) that are passed to the library to create the chart and also provides a link to JSFiddle (an online resource which allows developers to experiment with JavaScript and HTML elements together). Play around with the values that are passed in the example demos, which will allow you to see how different parts of the JavaScript code controls drawing the graph. If you change any code in the JSFiddle page be sure to press Run to execute the modified code.

Discussion about the Basic Line Example

Highcharts has 3 main sections inside its code block. First we have the container that Highcharts draws the graph in: (for example: to draw the graph in the div with id container).

$('#container').highcharts({
    ...
};

The next part of the Highcharts code deals with how the graph will look. These options style everything from the xAxis, YAxis, colours, the title and subtitle of the graph. For example if you want to add a title to the chart then you would add the option to the code above live this:

$('#container').highcharts({
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
  legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        }
    });
};

Finally you need to pass some data to Highcharts so that it can graph the data. This is done using the series option and passing an array of data. The final completed code would look like this:

$('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
  legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
  series: [{
            name: 'London',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
});

Experiment with the other examples on the page to get a feel of the library before continuing with the rest of the workshop.

Adding Highcharts to our website

To add Highcharts to our website locate the area of our HTML file where we add script to and add the following lines after we load jQuery:

<script src="https://code.highcharts.com/highcharts.js"></script>

Now add a div with an id called graph to our html page, which will contain the graph. The graph will appear inside this container on the page when our code has finished running. Now using all your knowledge of JavaScript and HTML, load a line chart using some sample data into the div with id graph.

If you are struggling with this then use the last 3 workshop tutorials as a reference and the Highcharts demo page, which should help get the graph up and running.

Experimenting with other 3rd party API's

The final task in this weeks workshop is to go and experiment with some of the 3rd party API's we mentioned in the lecture. You should now have enough knowledge of HTML, JavaScript, and Node.JS to use these libraries for your website for the group work. Start by exploring the Bootstrap Framework https://getbootstrap.com and Bootsnipp for example Bootstrap elements https://bootsnipp.com. You'll be able to find some themes that already have the HTML and CSS premade for you to use. Most JavaScript libraries have documentation – make sure that you make use of this documentation, as most often than not there will be examples which will show how to use the library.

Working on your assessment

Well, we've made it to reading week. You should now have enough knowledge to build a basic interactive website for both the frontend (HTML) and backend server to bring data into the web browser, display it in an interesting way and interact with the data. We want you to build a website for your assessment on this course which tells a story around data and contains some interactive elements. Let's unpick the Assessment structure:

Reading that and thinking back on the workshop examples we have given up to now, you should be able to complete 75% of the assessment.

In your groups, have a think about what content the website needs, what the site structure looks like. Draw up a plan and a few slides for the presentation. We're looking to see what data you're going to use, how the site will be laid out, who is going to do what and how you aim to complete it (before the deadline)

When thinking about your projects, think about the narrative of the site and how to communicate that to your indented audience. I've shared the marking scheme and the Assessment guidelines for the course so have a look at that to get an idea of how we will mark the work.

Use the rest of the workshop to build your presentation, and your plan and the best advice I can give you to succeed with this course is:

Most importantly – remember, use your dataset to tell a story.