Chronoscope

Microformats Intro

We want non-programmers to be able to utilize Chronoscope functionality as well, and to do that, we use some (for the moment) non-standard microformats to describe the datasets and inject markers. The microformat is simply an HTML table with class="cmf-chart", with the first row of the THEAD element specifying axis labels, and the rows of the TBODY element specifying the domain, and range axis values. The domain values are always in the first column, and one or more range values follow.

Finally, you may give the table an ID, and target A links at it using the fragment identifier. Any date appearing after the ID is interpreted to mean a point in time to place a pushpin marker. The marker's label comes from the "accesskey" attribute of the A element, and the link must have a class of "cmf-marker". To see an info window display when the marker is clicked simply place a SPAN element inside the A element, with a class name of "cmf-infowindow". This span will be invisible but its contents will be displayed when the marker is clicked.

Here's an example: 

    

        <table id="microformatdemo" class="cmf-chart">
          <colgroup>
            <col class="cmf-dateformat" title="MM/dd/yyyy">
            <col class="cmf-numberformat" title="#,##0.00">
          </colgroup>
          <thead>
            <tr>
                <th>Time</th><th axis="$">GDP</th>
            </tr>
          </thead>
          <tbody>
            <tr> <td>1/1/1953</td><td>1000</td> </tr>
            <tr> <td>1/1/1954</td><td>3000</td> </tr>
            <tr> <td>1/1/1955</td><td>3100</td> </tr>
            <tr> <td>1/1/1956</td><td>3200</td> </tr>
            <tr> <td>1/1/1957</td><td>3250</td> </tr>
            <tr> <td>1/1/1958</td><td>3300</td> </tr>
            <tr> <td>1/1/1959</td><td>3325</td> </tr>
            <tr> <td>1/1/1960</td><td>1900</td> </tr>
            <tr> <td>1/1/1961</td><td>1800</td> </tr>
            <tr> <td>1/1/1962</td><td>2000</td> </tr>
            <tr> <td>1/1/1963</td><td>2100</td> </tr>
            <tr> <td>1/1/1964</td><td>2200</td> </tr>
          </tbody>
        </table>
        <p>
            As you can see, in
            <a accesskey="G" href="#microformatdemo:1/1/1954"
            class="cmf-marker">1954<span class="cmf-infowindow">GDP Popup<br>GDP Grew Considerably</span></a>, the Gross Domestic Product grew considerably. However, in <a accesskey="D"  href="#microformatdemo:1/1/1960"
            class="cmf-marker">1960<span
                class="cmf-infowindow">GDP Popup<br>GDP dropped a lot.</span></a>
            the GDP dropped a lot.
        </p>

when rendered normally, looks like:

Time GDP
1/1/1953 1000
1/1/1954 3000
1/1/1955 3100
1/1/1956 3200
1/1/1957 3250
1/1/1958 3300
1/1/1959 3325
1/1/1960 1900
1/1/1961 1800
1/1/1962 2000
1/1/1963 2100
1/1/1964 2200

But using a microformat class of 'cmf-chart', the HTML table is replaced by this:

Time GDP
1/1/1953 1000
1/1/1954 3000
1/1/1955 3100
1/1/1956 3200
1/1/1957 3250
1/1/1958 3300
1/1/1959 3325
1/1/1960 1900
1/1/1961 1800
1/1/1962 2000
1/1/1963 2100
1/1/1964 2200

IE6 note

If the cmf-chart table is inside a paragraph or form tag it produces an error in IE6, the workaround is to not put the table inside <p> or in forms.

As you can see, in 1954GDP Popup
GDP Grew Considerably, the Gross Dosmestic Product grew considerably. However, in 1960GDP Popup
GDP dropped a lot. the GDP dropped a lot.

Date Format

The dtformat is based on simpledateformat. Read more in the dtformat overview.

© Timepedia
?