Lecture Administration and visualization: Chapter 8.1 - Interactive visualization

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:48

Thêm vào BST

Báo xấu

11
lượt xem 4
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Lecture "Administration and visualization: Chapter 8.1 - Interactive visualization" provides students with content about: Introduction; Chart types; Advanced usage; Interacting with charts; Practical exercise;... Please refer to the detailed content of the lecture!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Lecture Administration and visualization: Chapter 8.1 - Interactive visualization

1
Chapter 8 Interactive Visualization Part 1: GoogleChart 2
Outline 1. Introduction 2. Chart Types 3. Advanced Usage 4. Interacting with charts 5. Practical exercise 3
Introduction to Google Charts • Goal?: to visualize data on your website • How? • By embedding a simple JavaScript in your web page • Charts are highly interactive • Charts are rendered using HTML5/SVG technology • cross-browser compatibility (older IE versions) • cross-platform portability (iPhones, iPad, Android) • All chart types use the same data structure (DataTable) • easy to switch between chart types 4
Library Loading • Including the following script in tag of the web page 5
Library Loading • Including the following script in tag of the web page To load the loaders – One time only 6
Library Loading • Including the following script in tag of the web page current version of Google Chart will be loadedcolumn, pie etc. packages will be used, corechart includes bar, To call the load function one or more times to load packages for particular chart types 7
Library Loading • Including the following script in tag of the web page 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
Library Loading • Example of full script: 9
Library Loading • In the of your web page, display the chart by id • Load settings: • 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
Library Loading • In the of your web page, display the chart by id • Load settings: • callback: one or more functions will be called after the packages are loaded 11
Preparing data • All charts require data • 2-dimensional data • Data should be wrapped in a JavaScript class called google.visualization.DataTable • Alternative class to be used to wrap data: google.visualization.DataView • A convenience class that provides a read-only view of a DataTable • Provide some methods to hide, reorder rows/columns quickly 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 column • for example: a data may describe the tooltip text, annotation point etc. 15
Data roles • 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 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
Customize the chart’s options • Specify options • Title • Color • Line thickness • Background fill • ... 17
Draw the Chart • Instantiate an object of the chart class to be used in the callback function • Call its draw function • It is also possible to draw multiple charts in one page • 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
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 • Bar styles: • 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