Lecture Administration and visualization: Chapter 8.1

Chapter 8 Interactive Visualization Part 1: GoogleChart

Outline

1. Introduction

2. Chart Types

3. Advanced Usage

4. Interacting with charts

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

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

Library Loading

• Including the following script in tag of the web

page

Library Loading

• Including the following script in tag of the web

To load the loaders – One time only

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

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

page

Library Loading

• 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

• 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

• 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

Preparing data • Steps:

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

Preparing data • Steps:

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

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.

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

• 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 • ...

• 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

• 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

• ...

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

• Bar styles:

Bar styles example

Bar chart with multiple columns

Bar chart with stacked bars

Line chart

• A basic core chart (package: corechart)

Line chart

• A basic core chart (package: corechart)

Line chart

• 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

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

Material Line Chart

Other charts

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

• 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:

• 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

Import data from Google Sheet

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

Import data from Server-side code

• Push the data in server

• Import this data to the chart

Import data from Server-side code

• 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()

Event handling

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

• 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

organization chart should be highlighted

Example of event handling

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.

• 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

• 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.

• Some options of easing function: