Dual-Y Example

An example of a Google Dual-Y Line Chart.

by heennkkee

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['line', 'corechart']}]}"></script>
<div id="dashboard">  
    <div id="control"></div>
    <div id="classic" class="hide"></div>
</div>

JavaScript

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

	var JSONData = {cols:[{label:'Time', type:'date'},
                          {label:'Temp', type:'number'},
                          {label:'Humid',type:'number'},
                          {label:'Filter',type:'string'}],
                    rows:[{c:[{v:new Date(2015,8,8,5,4,55,516)},
                              {v:75.00},
                              {v:39.90},
                              {v:'ESP0001'}]},
                          {c:[{v:new Date(2015,8,8,5,4,55,526)},
                              {v:77.70},
                              {v:38.70},
                              {v:'ESP0004'}]},
                          {c:[{v:new Date(2015,8,8,5,4,55,516)},
                              {v:77.10},
                              {v:38.70},
                              {v:'ESP0004'}]},
                          {c:[{v:new Date(2015,8,8,5,4,55,526)},
                              {v:75.00},
                              {v:40.20},
                              {v:'ESP0001'}]}
                         ]
                   }
    
    //populate with some more data
    
    for(x=0; x < 200; x++){
        if (x % 2 == 1){
            var sensor = 'ESP0001'
         }
        else {
            var sensor = 'ESP0004'
         }
           
        JSONData.rows.push({c:[{v:new Date(2015,8,8,5,4,55,536+(x*10))},{v:Math.round((70+Math.random()*10)*100)/100}, {v:Math.round((30+Math.random()*10)*100)/100},{v:sensor}]});
    }
                          

    function drawChart() {

      var data = new google.visualization.DataTable(JSONData);
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
        var sensorFilter = new google.visualization.ControlWrapper({
            controlType:'CategoryFilter',
            containerId:'control',
            options:{
             filterColumnIndex:3,
                ui:{
 ...