Google Charts API Demo

Sample program that displays a data table and accompanying chart.

HTML

<script src="//www.google.com/jsapi"></script>
<!DOCTYPE html>
<body>
    <div class="mainContent">
        <table class="left" title="Attendance Percentages" id="AttendancePercentages" summary="pieDescription" data-attc-createChart="true" data-attc-colDescription="pieDescription" data-attc-colValues="pieValues" data-attc-location="AttendancePercentagesPie" data-attc-hideTable="true" data-attc-type="pie" data-attc-googleOptions='{"is3D":true}' data-attc-controls='{"showHide":true,"create":true,"chartType":true}'>
            <thead>
                <tr>
                    <th id="pieDescription">Description</th>
                    <th id="pieValues">Sessions</th>
                    <th>%</th>
                    <th>Other</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>West</td>
                    <td>405</td>
                    <td>89</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>Midwest</td>
                    <td>97</td>
                    <td>0</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>East</td>
                    <td>36</td>
                    <td>7</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
        <div class="right" id="AttendancePercentagesPie"></div>
    </div>
</body>

</html>

CSS

/* @media screen { */

/* override css in main */
 body {
    margin-left: 5px;
    margin-right: 5px;
    margin-top:5px;
    width:100%;
    position:relative;
    left:0px;
    top:0px;
    z-index:0;
    background-color:#FFFFFF;
    color:#47535E;
    font-size:0.7em;
    font-family:Calibri, sans-serif;
}
div.mainContent {
    margin-left: 20px;
    margin-right: 20px;
    width:400px;
}
table {
    margin-left: auto;
    margin-right: auto;
    width:98%;
    border:1px solid #E6E6E6;
    border-radius:5px;
    box-sizing: border-box;
    background-color:#F6F6F6;
    border-collapse: collapse;
}
table td, table th {
    border:1px solid #E6E6E6;
    border-top:1px solid #FFFFFF;
}
table th {
    background-color:#FFFFFF;
}
/*attc classes*/

/*attc classes*/
 div.attcControls {
    width:100%;
    border:1px solid #E6E6E6;
    border-radius:5px;
    box-sizing: border-box;
    background-color:#F6F6F6;
}
div.attcControls ul {
    overflow:hidden;
    padding:2px 2px 2px 2px;
    margin:0px;
}
div.attcControls ul li {
    margin:0px;
    padding:0px 0px 0px 10px;
    list-style-type: none;
    display: inline;
    float:right;
    clear:none;
}
div.attcControls ul li a {
    border:1px solid #9CDFF7;
    border-radius:3px;
    box-sizing: border-box;
    background-color:#86D6F5;
    padding:2px;
    color:white;
    text-decoration:none;
    display:inline-block;
    background-image:none;
    font-weight:normal;
}
div.attcControls ul li a:hover {
    border:1px solid white;
    color:#47535E;
}
div.attcControls ul li fieldset {
    border:1px solid #9CDFF7;
    border-radius:3px;
    box-sizing: border-box;
    background-color:#86D6F5;
    padding:2px;
    margin:0px;
    color:white;
    text-decoration:none;
}
div.attcControls ul li fieldset label {
    padding-right:5px;
}
div.attcControls ul li fieldset select {
    font-size:1em;
    padding:0px;
    margin:0px;
}
input.attcEditCheckRadioBoxes {
    display: block;
    margin-left: auto;
   ...

JavaScript

google.load("visualization", "1", {
    packages: ["corechart"]
});
(function ($) {
    $.fn.attc = function (options) {
        var numPattern = /[^0-9\.]/g;
        var tableEl = this;
        var dataArray = new Array();
        var numRows = tableEl.find('tbody tr').length;
        //defaults
        var settings = $.extend({
            'location': tableEl.attr('id'),
                'hideTable': false,
                'hideChart': false,
                'type': 'bar',
                'googleOptions': new Object(),
                'controls': {
                showHide: true,
                create: true,
                chartType: true
            },
                'controlsLabels': {
                showChart: "Show chart",
                hideChart: "Hide chart",
                showTable: "Show table",
                hideTable: "Hide table",
                createChart: "Edit chart",
                changeChart: "Change chart"
            },
            chartOptionList: '<option value="bar">Bar</option><option value="pie">Pie</option><option value="column">Column</option><option value="area">Area</option><option value="line">Line</option>'
        }, options);
        //set editing attribute to false so it can be tested:
        tableEl.attr('data-attc-editing', false);
        //function to create a table
        var CreateChart = function (type, location, tableEl) {
            var dataArray = new Array();
            switch (type) {
                case 'pie':
                    //console.log("making a pie");
                    var headerValues = $('#' + tableEl.attr('data-attc-colvalues'));
                    var headerDesc = tableEl.attr('data-attc-colDescription');
                    if (headerDesc.split(',').length > 0) {
                        headerDesc = $('#' + headerDesc.split(',')[0]);
                    } else {
                        headerDesc = $('#' + headerDesc);
                    }
                    var colIndexValues =...