A jQuery pie chart-based proportional distribution data report

A jQuery pie chart-based proportional distribution data report

Today, we provide you with a jQuery pie chart-based proportional distribution data report. This report plug-in is applicable to IE 8, 360, FireFox, Chrome, Safari, Opera, aoyou, sogou, and windows of the world. As follows:

Download Online Preview source code

Implementation code.

Html code:

<Div style = "width: 600px; margin: 0 auto; "> <table id = 'mytable5'> <caption> member region distribution </caption> <thead> <tr> <th> </th> <th> Hebei </th> <th> Henan </th> <th> Hubei </th> <th> Hunan </th> <th> Shandong </th> <th> Shanxi </th> </tr> </thead> <tbody> <tr> <th> 1200 </th> <td> 540 </td> <td> 300 </td> <td> 150 </td> <td> 180 </td> <td> 120 </td> <td> 180 </td> </tr> </tbody> </table> <table id = 'mytable1'> <caption> gender distribution of members </caption> <thead> <tr> <th> </th> <th> male </ th> <th> </th> </tr> </thead> <tbody> <tr> <th> 1000 </th> <td> 450 </td> <td> 550 </td> </tr> </tbody> </table> </div>

Js Code:

<script type="text/javascript">        gvChartInit();        $(document).ready(function () {            $('#myTable5').gvChart({                chartType: 'PieChart',                gvSettings: {                    vAxis: { title: 'No of players' },                    hAxis: { title: 'Month' },                    width: 600,                    height: 350                }            });        });    </script>    <script type="text/javascript">        gvChartInit();        $(document).ready(function () {            $('#myTable1').gvChart({                chartType: 'PieChart',                gvSettings: {                    vAxis: { title: 'No of players' },                    hAxis: { title: 'Month' },                    width: 600,                    height: 350                }            });        });    </script>

Via: http://www.w2bc.com/Article/18257