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 web5
page
Library Loading
• Including the following script in
tag of the webTo load the loaders – One time only
6
page
Library Loading
• Including the following script in
tag of the webcurrent 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 webthe 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