Dual-Y Example

An example of a Google Dual-Y Line Chart.

HTML

<?php
// Database credentials
$dbHost = 'aeioluz.com';
$dbUsername = 'a3ioluz_medi';
$dbPassword = '@@rontr@b@j@';
$dbName = 'a3ioluz_moni';

// Create connection and select db
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Get data from database
$result = $db->query("SELECT Temp,Fecha,Hora,id, Humedad FROM aeioLuz_Moni_10 ORDER BY id ASC");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['line', 'corechart']}]}"></script>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
    <!--Divs that will hold each control and chart-->
    <div id="filter_div"></div>
    <div>
        <br>
        <br>
    </div>
    <div id="TeamName"></div>
    <div id="chart_div"></div>
    <div id="pie_div"></div>
    <div id="table_div"></div>
</div>
</head>

JavaScript

google.setOnLoadCallback(drawDashboard);
google.load('visualization', '1.0', {
    'packages': ['controls', 'corechart']
});


function drawDashboard() {

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

    var donutRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
            'options': {
            'filterColumnLabel': 'Month'
        }
    });

    var categoryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'TeamName',
        options: {
            filterColumnLabel: 'Teams', // filter by Team name
            ui: {
                caption: 'Choose a Team',
                sortValues: true,
                allowNone: true,
                allowMultiple: true,
                allowTyping: true
            }

        }
    });

    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
            'containerId': 'table_div',
            'options': {
            'width': '100%'
        },
            'view': {
            'columns': [0, 1, 2, 3, 4, 5]
        }
    });

    var columnChart = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
            'containerId': 'chart_div',
            'options': {
            'width': 600,
                'height': 400,

                'legend': 'none',
                'hAxis': {
                'title': 'Teams',
                    'titleColor': '#cc0000',
                    'titleFontSize': 20
            },
                'vAxis': {
                'title': 'Utilization',
                    'titleColor': '#cc0000',
                    'titleFontSize': 20

            }
        },
        view: {
            columns: ['Group', 'Utilization']
        }
    });

    dashboard.bind([donutRangeSlider, categoryPicker], [table]);
    dashboard.draw(data);


   ...