JavaScript Sample

This document shows precipitation values for several cities (taken from the cities' respective Wikipedia articles). JavaScript is used to create graphs and improve the look of the table.

This sample includes several external style sheets and script files:

script.js Retrieves data from the HTML table, calculates totals and passes them to Flotr.
flotr2.min.js A popular Open Source JavaScript library to create graphs.
awesomizr.js A RealObjects-made JavaScript library used to transform table headers.
style.css Styles tables with advanced CSS3 properties and selectors.

City	January	February	March	April	May	June	July	August	September	October	November	December	Total
New York City	71.1	65.5	88.4	77.7	101.3	95.8	94.5	74.2	94.5	86.4	80.5	77.5
Los Angeles	79.2	96.5	61.7	23.1	6.6	2.3	0.3	1	6.1	16.8	26.4	59.2
San Francisco	114.3	113	82.6	37.1	18	4.1	0	1.5	5.3	28.4	80.3	115.8
Washington. D.C.	69.1	68.8	80.5	68.8	93.0	85.9	96.5	99.3	84.1	76.7	79.2	79.2
Boston	85.3	82.6	109.7	95	88.4	93.5	87.1	83.6	87.4	100.1	101.3	96
Berlin	42.3	33.3	40.5	37.1	53.8	68.7	55.5	58.2	45.1	37.3	43.6	55.3
Stockholm	39	27	26	30	30	75	72	66	55	50	53	46
Cape Town	15	17	20	41	69	93	82	77	40	30	14	17
Precipitation [mm] per month

Awesomizr

RealObjects provides you its Open Source JavaScript library Awesomizr. This library provides among other things a function that can be used to rotate the header of any table in an arbitrary angle, by using CSS3 transforms.

Usage

Transform a table by including the library in your document and calling the rotateTableHeader function in your JavaScript code. Awesomizr will automatically create a <thead> element from the first row in the specified table if no such element is present.

<script type="text/javascript" src="awesomizr.js"></script>
<script type="text/javascript">
    ...
    Awesomizr.rotateTableHeader(table, params);
</script>

table The HTML node of the table to transform.
params An object of optional parameters.

In the PDFreactor manual, you can find more information on the optional parameters and other functionality of the awesomizr library.

Example

Awesomizr.rotateTableHeader(document.getElementById("myTable"), { angle: 40, width: "20pt" });