dynamic max- and minValue in Chart

1,074 views
Skip to first unread message

Léon Boers

unread,
Dec 17, 2014, 3:10:57 PM12/17/14
to google-visua...@googlegroups.com
Hi Everyone,

I'm trying to have the maxValue and minValue drawn dynamically based on the charts data. the chart is showing temperature over a periode of time and I want to flatten out the chart.

I'm trying to use var high = ((data.getColumnRange(1).max) + 3);  to add a small value to the max temperature it finds. currently the alert (high); actually shows 24 when opening the chart (21 is the max value found) so that part works.I just cant get it to be the maxValue.

when i manually type in 

maxValue: 24,

it seems to work fine. 
Hope anyone can point me in the right direction.


here's the code i'm using

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData2.php",
          dataType:"json",
          async: false
          }).responseText;
 
 
      var options = {
 
        width: 900,
        height: 500,
title: 'Temperatuur Woonkamer',
        hAxis: {
 format: 'EE HH:mm'
        },
        vAxis: {
maxValue: high,
minValue: low,
title: 'Temperatuur C'
        }
      };    
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);
 
 var high = ((data.getColumnRange(1).max) + 3); 
 var low = (data.getColumnRange(1).min); 
 alert (high);

 var dateFormatter = new google.visualization.DateFormat({pattern: 'dd-MM-yyyy HH:mm'});
 dateFormatter.format(data, 0);
 
 
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Regards,
Léon

Daniel LaLiberte

unread,
Dec 17, 2014, 3:35:42 PM12/17/14
to google-visua...@googlegroups.com
Hi Léon,

You have the right idea, but the order of your code is the problem.  You assign to the high and low variables after you use them in your option structure.  Just move your option assignment to just before your "Instantiate" comment, and it should work.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Léon Boers

unread,
Dec 17, 2014, 4:27:05 PM12/17/14
to google-visua...@googlegroups.com
Hi Daniel,

Thanks-you it worked! 

working code:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData2.php",
          dataType:"json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);
 
 var high = ((data.getColumnRange(1).max) + 3); 
 var low = ((data.getColumnRange(1).min) - 3); 
 var dateFormatter = new google.visualization.DateFormat({pattern: 'dd-MM-yyyy HH:mm'});
 dateFormatter.format(data, 0);
 
 var options = {
 
        width: 900,
        height: 500,
title: 'Temperatuur Woonkamer',
        hAxis: {
 format: 'EE HH:mm'
        },
        vAxis: {
maxValue: high,
minValue: low,
title: 'Temperatuur C'
        }
};
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>



Op woensdag 17 december 2014 21:35:42 UTC+1 schreef Daniel LaLiberte:
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
Reply all
Reply to author
Forward
0 new messages