Binding to a Table

You can bind the PieChart widget to an HTML table by calling hide on the element with the ID of wijpiechart, which is the table in this case. See jQuery Syntax.

Drop down and copy script to paste in <body> section

Script	Copy Code
<table id="wijpiechart"> <caption> Average Bytes per Page by Content Type</caption> <thead> <tr> <td> </td> <th> kB </th> </tr> </thead> <tbody> <tr> <th scope="row"> HTML </th> <td> 34 </td> </tr> <tr> <th scope="row"> Images </th> <td> 450 </td> </tr> <tr> <th scope="row"> Stylesheets </th> <td> 27 </td> </tr> <tr> <th scope="row"> Scripts </th> <td> 123 </td> </tr> <tr> <th scope="row"> Flash </th> <td> 84 </td> </tr> <tr> <th scope="row"> Other </th> <td> 25 </td> </tr> </tbody> </table>

Paste table markup like the following into the body in place of the usual <div> markup to provide data for the chart.

Drop down and copy script to paste in <head> section

Script	Copy Code
<script id="script1" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart().hide(); }); </script>

Paste the following style into the head section below the script to set the width and height of the chart.

Drop down and copy script to paste in <head> section

Script	Copy Code
<style type="text/css"> #wijpiechart { width: 475px; height: 375px; } </style>

The pie chart appears like the following live widget.

See Also

Reference

Getting Started

Data