Wijmo UI for the Web
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.