Main Content

Using WC Graph Table

Chart Types: Bar, Pie and Line

The following classes specify which type of chart you want.

If you want this chart type... Line Chart Bar Chart Pie Chart
add this code to your <tr> tag... class="linechart" class="barchart" class="piechart"

The following chart options are available.

    Line Chart

    The linechart class specifies a line chart. However, if you do not specify a chart type, you will get the line chart by default.

    Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day
      Television Movies Music/Audio Print Computer Video Games
    1999 227 18 108 43 27 26
    2004 231 25 104 43 62 49
    2009 269 25 151 38 89 73
    <table id="table1" summary="..." class="graphme linechart">
    ...
    </table>

    Bar Chart

    The barchart class specifies a bar chart.

    Media Usage: US Adults, Persons 18+
      Television Newspapers Radio Magazines Internet Mobile
    Time Spent Yesterday (in Minutes) 319.2 26.4 91.2 15.6 156.6 19.2
    <table id="table2" summary="..." class="graphme barchart">
    ...
    </table>

    Pie Chart

    The piechart class specifies a bar chart.

    Media Usage
    Television 190
    Newspapers 3
    Radio 10
    Magazines 40
    Internet 10
    Mobile 40
    <table id="table3" summary="..." class="graphme piechart">
    <thead>
    <tr>
    <td> </td>
    <th scope="col">Television</th>
    <th scope="col">Newspapers</th>
    ...
    <th scope="col">Mobile</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td> </td>
    <td>319.2</td>
    <td>26.4</td>
    ...
    <td>19.2</td>
    </tr>
    </tbody>
    </table>

    Multiple Charts

    If you specify more than one chart type, you can have multiple charts from the same table.

    Media Usage: US Children, 8 to 18 Years Old, Average Hours Spent with Each Medium in a Typical Day
      Television Movies Music/Audio Print Computer Video Games
    1999 227 18 108 43 27 26
    2004 231 25 104 43 62 49
    2009 269 25 151 38 89 73
    <table id="table4" summary="..." class="graphme barchart linechart">
    ...
    </table>

    Top of page