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" });

PDF Images

PDFreactor enables you to embed PDFs as images through the <img> element. PDF image elements have support for additional CSS and JavaScript properties:

You can select which page should be displayed as image via the CSS property -ro-source-page.
Using JavaScript, you can retrieve the number of pages a PDF image object has via the proprietary roPageCount property.

Usage

You can use JavaScript to retrieve the number of pages of a PDF image object, and automatically generate a PDF image for each page by creating an image element for each page, where you can set the page to be displayed through the CSS property -ro-source-page.