Chartinator Controls and Dashboards

Chartinator Controls and Dashboards Example

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="https://rawgit.com/kmd1970/chartinator/kmd1970-patch-1/dist/js/chartinator.js"></script>
<div style='padding-top:60px;'>
    <div id="dashboard_div">
        <!--Divs that will hold each control and chart-->
        <div id="filter_div"></div>
        <div id="chart_div"></div>
    </div>
</div>

JavaScript

var opts = {
		    filterColumnLabel: 'Hours Per Day'
		};
		var chart4 = $('#chart_div').chartinator({

		    columns: [{
		        label: 'Task',
		        type: 'string'
		    }, {
		        label: 'Hours Per Day',
		        type: 'number'
		    }

		    ],
		    rows: [
		        ['Work', 11],
		        ['Eat', 20],
		        ['Commute', 30],
		        ['Watch TV', 50],
                ['Code', 60],
		        ['Sleep', 70]
		    ],
		    chartType: 'PieChart',
		    chartPackage: 'controls',
		    dashboardId: 'dashboard_div',
		    controlWrapperType: 'NumberRangeFilter',
		    controlWrapperContainerId: 'filter_div',
		    controlWrapperOptions: opts,
		    dataTitle: '',
		    chartAspectRatio: 1.5,
		    pieChart: {

		        animation: {
		            startup: true,
		            duration: 1000,
		            easing: 'out'
		        },
		        pieHole: 0.4,
		        legend: {
		            position: 'labeled'
		        },
		        tooltip: {
		            showColorCode: true
		        },
		        chartArea: {
		            left: 0,
		            top: '1%',
		            width: "100%",
		            height: "100%"
		        }

		    }
		});