Gauge with Dropdown and Hyperlink

by Stephanie Remias

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
    <table>
        <tr style='vertical-align: top'>
            <td style='font-size: 0.9em; background-color: rgba(240, 232, 232, 0.89)'>
                <div id="control1"></div>
                <br>
                <div id="control2"></div> <div id="projects"></div>
                <br>
                <div align='center' id="gauge1"></div>
            </td>
 
          
        </tr>
    </table>
</div>

JavaScript

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
     ['Pct', 'Project'],
        [0, 'PROJECT 10'],
        [66, 'PROJECT 1'],
        [100, 'PROJECT 2'],
    ]);
        
// set up gauge datatable
    var gaugeData = new google.visualization.DataTable();
    gaugeData.addColumn('string', 'Project');
    gaugeData.addColumn('number', 'Pct');

    var gauge1 = new google.visualization.ChartWrapper({
        chartType: 'Gauge',
        dataTable: gaugeData,
        containerId: 'gauge1',
        options: {
            width: 150,
            height: 150,
            min: 0,
            max: 100,
            animation: {
                duration: 1000,
                easing: 'inAndOut'
            },
            redFrom: 0,
            redTo: 50,
            yellowFrom: 50,
            yellowTo: 75,
            greenFrom: 75,
            greenTo: 100,
            majorTicks: ['0', '25', '50', '75', '100']
        },
        view: {
            rows: [0] // restrict to the first row only
        }
    });

    // Define category pickers for 'Project'
    var ProjectPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'projects',
        options: {
            filterColumnLabel:'Project',
            filterColumnIndex: 1, // assumes you want to filter the first column
            ui: {
                labelStacking: 'vertical',
                allowTyping: true,
                allowMultiple: false,
                caption: 'Pick a project',
                label: 'Select a project'
            }
        }
    });

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    dashboard.bind([ProjectPicker], [gauge1]);
    
    dashboard.draw(data);
    
    google.visualization.events.addListener(gauge1,...