1. CSc4730/6730 Scientific Visualization
Lecture 06
Creating Basic Data Visualization with MS Excel and Google Chart API
Ying Zhu

2. MS Excel
One of the most commonly used tool for creating data visualization
Supported chart types
Bar chart
Pie chart
Line chart
Scatter plot
Stock
Other types: Area, surface, doughnut, bubble, and radar

3. Create chart Select a column or a row of data
In the “Insert” tab, select a chart type
In the “Design” tab, click on “Select Data”
Can add, edit or remove data columns or rows
Can change horizontal axis labels
Can quickly change chart type

4. Change chart design
In the “Design” tab, can choose different chart style
Can choose different chart layouts
Can cut and paste the chart as a picture

5. MS Excel
Simple to use
Many chart types, styles, and layouts to choose from
Limitations:
Does not support map
Can just easily create bad designs (e.g. 3D bar chart, 3D pie chart, etc.)

6. Case study http://www.earth-policy.org/Books/PB3/data.htm
Download one of the Excel files and create charts

7. Google Chart API
Google Chart API allows you to easily embed a chart in your web page
Available since December 2007
You create an URL that includes the data and the formatting parameters
Insert the URL in the appropriate place of your HTTP file
When the web page is viewed by the browser, Google Chart API returns PNG image of the chart in response to that URL
If you type the URL in the browser’s address bar, an image of the chart is also displayed

8. Google Chart API
More difficult to use than Excel, but very convenient and flexible for web design
No need to have a separate picture for your chart
The chart is encoded in a URL. Just send one line of URL to another team and he/she can include the chart in their web page.
Minor changes to data set is very convenient

9. Supported chart types Line charts Bar charts Pie charts Venn diagrams
Scatter plots
Radar charts
Maps
Google-o-meters
QR codes
See for examples

10. URL format
Google Chart API URLs must be in the following format 1>&<parameter 2>&<parameter n>
No limit on the number of parameters
Can list parameters in any order

11. Required parameters Chart size
chs=<width in pixels>x<height in pixels>
E.g. chs=33x200
The maximum map size is 440x220

12. Line Chart Chart type cht=<line chart style>
cht=lc: typical line chart, one data per data point
cht=ls: sparklines, no axis lines, one data per data point
cht=lxy: need to specify x and y for each data point

13. Bar Chart Bar chart cht=<bar chart style>
cht=bhs: horizontal bar chart, with stacked bars
cht=bvs: vertical bar chart, with stacked bars
cht=bhg: horizontal bar chart, with grouped bars
cht=bvg: vertical bar chart, with grouped bars

14. Scatter plots Scatter plots cht=s
At least two data sets should be supplied. The first data set specifies x-coordinates, and the second data set specifies y-coordinates.

15. Maps
Maps
cht=t, chtm=<geographical area>
<geographical area> include:
Africa
Asia
Europe
middle_east
South_america
Usa
World

16. Maps Color coding countries or states
chco=<default color>,<start of gradient>,<end of gradient>
Chld=<country or state codes>
Chd=<color levels>
Specify color levels for each country

17. Google-o-meter Specify chart type Specify data Specify label cht=gom
chd=t:<number>
Specify label
chl=<label>

18. Data formats Specify data with chd=<data type>:<data>
Supported data types
Text encoding:
Text encoding with data scaling
Simple encoding
Extended encoding:

19. Text encoding floating point numbers 0 – 100 chd=t: 0.2,0.9,12.5
Nothing below 0 or above 100
Don’t insert space between a number and a ‘,’

20. Text encoding with data scale
No default range limit, but you have to specify data rang for each data set with chds=<min>,<max>
chd=t: -20.5, 98.3, 11.2&chds=-30.0, 60.0

21. Simple encoding
Integer values 0 – 61, encoded by a single alphanumerical character
chd=s:BTb19_,Mn5tzb is equivalent to chd=t:1,19,27,53,61,-1|12,39,57,45,51,27
Generate a short URL
But a little hard to use and read by the developer

22. Extended encoding
Specify integer values from 0—4095, inclusive, encoded by two alphanumeric characters
chd=e:BaPoqM-A,-A__RMMg is equivalent to chd=t:90,1000,2700,3500|3968,-1,1100,250

23. Multiple data sets
To draw multiple lines, or sets of bars, on a chart, specify multiple data series
Use | for Text Encoding or Text Encoding with Data Scaling
Use , for Simple Encoding or Extended Encoding

24. Color
Specify chart colors with a 6-letter string of hexadecimal values in the format RRGGBB
FF0000 = red
00FF00 = green
0000FF = blue
= black
FFFFFF = white

25. Chart Color
Use chco=<color>,<color>,<color> to specify color for each data set
One color code for one data set

26. Chart title and legend Use chtt=<chart title> to specify title
Use + to add space between words
Use chdl=<label 1>|<label 2> to specify legend
One label for one data set

27. Axis type
Specify multiple axes with chxt=<axis 1>,<axis 2>, …
x = bottom x-axis
t = top x-axis
y = left y-axis
r = right y-axis

28. Axis label
Specify label with chxl=<axis index>:|label 1|label 2| …
Axis index is the index number of the axis specified with chxt
Labels are separated by |

29. Axis range
Specify axis range with chxr=<axis index>,<start>, <end>, <interval>|…

30. Bar width and spacing
chbh=<bar width>,<space between bars>, <space between groups>
Chbh=10,5,10
Automatic setting the bar width with chbh=a

31. Line styles
Chls=<data set 1 line thickness>, <length of line segment>, <length of blank segement>| …

32. Other styling options
Grid lines
chg=
Shape markers
chm=