[visualization-api] Different Gauge Styles out of one csv file

Tue, 28 Feb 2017 12:04:02 -0800 

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:

<https://lh3.googleusercontent.com/-XLYgdDNcJEs/WLXXEmaD7zI/AAAAAAAAACE/1ILafQ0pqjY1gg_zIdq0qFW4UeCIX1v3wCLcB/s1600/Bildschirmfoto%2B2017-02-28%2Bum%2B21.00.38.png>
Is there a way and can someone help me with my problem. 
Thanks a lot for your help 
Greetings
Daniel

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/d4d4038b-35fa-4e9c-b121-4cd8e5ed425e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to