1

Chapter 8 Interactive Visualization Part 1: GoogleChart

2

Outline

1. Introduction

2. Chart Types

3. Advanced Usage

4. Interacting with charts

3

5. Practical exercise

Introduction to Google Charts

• Goal?: to visualize data on your website

• By embedding a simple JavaScript in your web page

• How?

• Charts are highly interactive

• cross-browser compatibility (older IE versions) • cross-platform portability (iPhones, iPad, Android)

• Charts are rendered using HTML5/SVG technology

• easy to switch between chart types

4

• All chart types use the same data structure (DataTable)

Library Loading

• Including the following script in tag of the web

5

page

Library Loading

• Including the following script in tag of the web

To load the loaders – One time only

6

page

Library Loading

• Including the following script in tag of the web

current version of Google Chart will be loaded packages will be used, corechart includes bar, column, pie etc.

To call the load function one or more times to load packages for particular chart types

7

page

Library Loading

• Including the following script in tag of the web

the user-defined function to draw chart, should be defined elsewhere in the web page

To call the load function one or more times to load packages for particular chart types

8

page

Library Loading

9

• Example of full script:

Library Loading

• In the of your web page, display the chart by id

• packages: an array of zero or more packages to be loaded • language: a locale value, to customize text for a country

• callback: one or more functions will be called after the

packages are loaded

10

• Load settings:

Library Loading

• In the of your web page, display the chart by id

• callback: one or more functions will be called after the

packages are loaded

11

• Load settings:

Preparing data

• All charts require data

• 2-dimensional data

• Data should be wrapped in a JavaScript class called

• A convenience class that provides a read-only view of a

google.visualization.DataTable • Alternative class to be used to wrap data: google.visualization.DataView

• Provide some methods to hide, reorder rows/columns quickly

DataTable

without modifying the original data

• Any changes in the DataTable data is immediately

reflected in the view

12

Preparing data • Steps:

• Instantiate a new DataTable • Add columns • Add one or more rows, optionally populated with data

13

Preparing data • Steps:

• Instantiate a new DataTable • Add columns • Add one or more rows, optionally populated with data

14

Data roles

• DataTable and DataView objects support explicitly

assigned column roles

• A column role describes the purpose of the data in that

• for example: a data may describe the tooltip text, annotation

point etc.

15

column

Data roles

mouse over the annotation

• interval: columns specify the top and bottom points • certainty: columns indicate whether the data at that point is

certain

• emphasis: columns emphasize specified chart data points,

displayed as a thick line or a large point

• tooltip: text to display when the user hovers over the data

point associated with this row

• scope: indicates wheather a point is in or out of scope • style: styles certain properties of different aspects of the

data

16

• Roles supported by Google Chart: • default role: domain and data • annotation: columns specify static labels in the chart • annotation text: columns specify hovertext when the

Customize the chart’s options

• Title • Color • Line thickness • Background fill • ...

17

• Specify options

Draw the Chart

• Instantiate an object of the chart class to be used in the

callback function • Call its draw function

• Load all the packages required in a single call to

google.charts.load()

• For each chart on the page, add a call to

google.charts.setOnLoadCallback() with the callback that draws the chart as an input

18

• It is also possible to draw multiple charts in one page

2. Chart Types

• Core charts: bar, column, pie, line, donut, scatter, table,

area, histogram, tree map etc.

• Google Map

• Calendar

• GeoChart

19

• ...

Bar Charts

• Horizontal version of the column chart • In the package corechart • Interactive chart

• color: to fill the bar, may use english name of color (e.g., ’red’,

‘green’, ‘blue’ etc.) or RGB code (e.g., #76A7FA) • opacity: the degree of transparence, default: 1.0 • stroke-color and stroke-width to decorate the border around

the bar

• fill-color to color the rectangle inside the border • fill-opacity to define the transparence of the rectangle

20

• Bar styles:

Bar styles example

21

Bar chart with multiple columns

22

Bar chart with stacked bars

23

Line chart

24

• A basic core chart (package: corechart)

Line chart

25

• A basic core chart (package: corechart)

Line chart

26

• A basic core chart (package: corechart)

Material Line Chart

• An improvement of Classic Line Chart (with

google.visualization.LineChart) with a better look and feel for user’s customization

• chart • width/height • series • axes

• example: legend position

27

• package: ‘line’ • class: google.charts.Line • beta-version, some features still not work well

Material Line Chart

28

Material Line Chart

29

Other charts

• https://developers.google.com/chart/interactive/docs/gallery

30

• Reference to:

3. Advanced Usage

• It is possible to populate data to the chart from other

• From database using server-side code • From a google sheets • Reading CSV file, Json file etc.

sources:

31

• Sending a request • Instantiate a query • Using query language syntax to form a query

Import data from Google Sheet

Get the URL link of the Google Sheet file, pass into the query’s parameter

32

Import data from Google Sheet

When data is received, provide a function to process the response

33

Import data from Server-side code

• Push the data in server

34

• Import this data to the chart

Import data from Server-side code

35

• a json file or a csv file are both possible

4. Interacting with charts

• Goal: to interact with the chart

• catch user’s clicks • manipulate properties or data •

listen for events thrown by the chart

• All charts throw some kinds of events including:

ready: thrown when the chart is drawn on the page and ready to respond to methods

• select: Thrown when the user selects something on the chart (e.g.,

typically by clicking on a bar or pie slice)

• error: Thrown when the chart can't render the data passed in, typically

because the DataTable format is wrong.

• onmouseover and onmouseout - Thrown when the user mouses over or

off of a specific chart element, respectively

• To pass in a handle to the chart, call:

google.visualization.events.addListener()

• To add only one time listener then remove it

google.visualization.events.addOneTimeListener()

36

Event handling

• table: the chart which has been initialized • ‘select’: chosen event • selectHandler: function would be executed when event is fired

37

• To add an event:

Example of event handling

• Two charts: table and organization chart (a diagram of

a hierarchy of nodes

• When select an item in table, the corresponding in

38

organization chart should be highlighted

Example of event handling

39

Animation

• To play with the chart’s data, some animations are

• on start up when the chart is first drawn • when the chart is re-drawn after some modification on data or

properties

produced

• Set the chart data and options. Be sure to set an animation

duration and easing type.

• Set animation: {"startup": true} • Call chart.draw(), passing in the data and options.

40

• To animate on startup:

Animation

• Start with an already rendered chart. • Modify the data table or options • Specify the transition behavior using the animation option. • Call chart.draw() on the chart to transition to the new

values.

• animation duration: the duration in miliseconds • easing: the easing funciton applied to the animation

41

• To animate a transition:

Animation

• 'linear' - Constant speed. • 'in' - Ease in - Start slow and speed up. • 'out' - Ease out - Start fast and slow down. • 'inAndOut' - Ease in and out - Start slow, speed up, then slow

down.

42

• Some options of easing function:

Change the value of the data

• Draw a column chart with only one column

• Insert a button to fire an event of modifying the series’

data

43

• Redraw the chart when event is fired

Change the value of the data

• Draw a column chart with only one column

• Insert a button to fire an event of modifying the series’

data

44

• Redraw the chart when event is fired

Change the value of the data

45

• Initialize options and chart / button

Change the value of the data

46

• Add event, when start-up, the button should be active

5. Practical

• Using the data of 20th century games’ history

• Display some interactive charts with Google Chart JS

• Working as individual groups based on the question

assigned to each group in previous lectures

have done for answering the question on the data

47

• Send the exercise to: • [email of lecturer] • Deadline: [date] • Format: .html file with some description to explain what you

Thank you for your attention!!!

48