Lecture Administration and visualization: Chapter 8.1 - Interactive visualization

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!
Nội dung trích xuất từ tài liệu:
Lecture Administration and visualization: Chapter 8.1 - Interactive visualization1 Chapter 8Interactive Visualization Part 1: GoogleChart 2Outline1. Introduction2. Chart Types3. Advanced Usage4. Interacting with charts5. Practical exercise 3Introduction 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 4Library Loading• Including the following script in tag of the web page 5Library Loading• Including the following script in tag of the web page To load the loaders – One time only 6Library 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 7Library 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 8Library Loading• Example of full script: 9Library 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 10Library 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 11Preparing 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 12Preparing data• Steps: • Instantiate a new DataTable • Add columns • Add one or more rows, optionally populated with data 13Preparing data• Steps: • Instantiate a new DataTable • Add columns • Add one or more rows, optionally populated with data 14Data 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. 15Data 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 16Customize the chart’s options• Specify options • Title • Color • Line thickness • Background fill • ... 17Draw the Chart• Instantiate an object of the chart class to be used in the callback function ...