The script generates a diagram (chart) view of the data in a table.
The values in the table must be non-negative (more than or equal to 0).
They can be either integer or decimal.
Usage: insert an element (link, button etc.) with a mouseevent (onclick, onkeyup etc.) that equals "showDiagram(event)" into the table row with the title of data.
The values from the next row will be considered labels of the diagram.
The values from the row after this will be considered values of the diagram.
Bind the 2 script files on the bottom of your document this way:
<script language="JavaScript" src="tableDiagram.js"></script>
<script language="JavaScript" src="dragElement.js"></script>
Edit the diagram stylesheet if you like.
Bind the stylesheet into the <HEAD> - area:
<link type="text/css" rel="stylesheet" href="tableDiagram.css" >
|
Click on the label "Show diagram" to see the diagram view.
Example 1
| Integer data I Show diagram |
|---|
| January | February | March | April | Mai |
Juny | July | August |
| 125 | 15 | 186 | 135 | 124 | 50 | 85 | 168 |
Example 2
| Integer data II Show diagram |
|---|
| January | February | March | April | Mai |
Juni | July | August | September | October |
| 56 | 48 | 20 | 54 | 49 | 56 | 10 | 52 | 54 | 49 |
Example 4
| Decimal data II Show diagram |
|---|
| January | February | March | April | Mai |
Juni | July | August | September | October | November | December |
| 2.56 | 7.48 | 3.20 | 5.54 | 8.49 | 1.64 | 2.10 | 7.52 | 5.47 | 4.91 | 1.25 | 4.31 |
Change log:
version 1.2: the diagram flips to left or to top to have always the optimal view.
|