Different Gauge Styles out of one csv file

194 views

Skip to first unread message

Daniel Kettnaker

unread,

Feb 28, 2017, 3:03:14 PM2/28/17

to Google Visualization API

Hello,

I have one database csv file where is store temperature and humidity values. All this values I want to display on a gauge chart. This is working all fine see picture below.

My problem is now that for temperature I want to have a gauge from -20 to 50° and for the humidity from 0 to 100%. Is there a way to format different gauge styles out of one data table?

My Content of the cvs file:

label,value

°C in,20

°C out,20

% in,45

% out,46

and here my code of the html site:

<html>
	<head>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
		//<script type="text/javascript" src="jquery.csv.js"></script>
		<script type="text/javascript">
		google.load("visualization", "1", {packages:["gauge"]});
		google.setOnLoadCallback(drawGauge);
        
       
        var gauge;

        function drawGauge(){
        	// grab the CSV
       		$.get("data.csv", function(csvString) {
       			// transform the CSV string into a 2-dimensional array
				var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

          		// this new DataTable object holds all the data
          		var data = new google.visualization.arrayToDataTable(arrayData);	
                
                // this view can select a subset of the data at a time
          		var view = new google.visualization.DataView(data);
          		view.setColumns([0,1]);
                
               //  set chart options
				var gaugeOptionsTemp = {
					min: -20, max: 50, yellowFrom: -20, yellowTo: 0,
					redFrom: 30, redTo: 50, minorTicks: 10, majorTicks: ['-20','-10','0','10','20','30','40','50']
				};
				 var gaugeOptionsHum = {
				 	min: 0, max :100, yellowFrom: 0, yellowTo: 25,
					redFrom: 70, redTo: 100, minorTicks: 10, majorTicks: ['0','10','20','30','40','50','60','70','80','90','100']
				};
                
                var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
        		chart.draw(data, gaugeOptionsTemp);
                
                                     gaugeData = new google.visualization.DataTable();
                 gaugeData.addColumn('number', '%');
                 gaugeData.addColumn('number', '%');
                 gaugeData.addRows(2);
                 gaugeData.setCell(0, 0, data[2]);
                 gaugeData.setCell(0, 1, data[2]);
 
                 gauge = new google.visualization.Gauge(document.getElementById('gauge_div2'));
                 gauge.draw(gaugeData, gaugeOptionsHum);
                

			});
        }
        </script>
        </head>
        <body>
        <center>Temperature
        <div id="gauge_div" style="width:900px; height: 500px;"></div>
        Feuchtigkeit
        <div id="gauge_div2" style="width:900px; height: 500px;"></div>
        TEST
        <div id="gauge" style="width: 900px; height: 500px;"></div>
        </center>
        </body>
</html>
..

actually it displays the following on my browser:

Is there a way and can someone help me with my problem.

Thanks a lot for your help

Greetings

Daniel

Reply all

Reply to author

Forward

0 new messages