Help for beginer : simple chart with setInterval

2,357 views
Skip to first unread message

thecatz

unread,
Jul 7, 2014, 10:25:20 AM7/7/14
to google-visua...@googlegroups.com
Hello,

I'm trying  google chart and i want to refresh my char every x seconds, for that i use setInterval. I don't want to use ajax but juste refresh the entire chart. is it possible ?

this is my code :

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
           google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          [' ', 'Aujourd\'hui','Hier'],
          [  ,400,100],
          [  ,460,200],
          [  ,1120,300],
          [  ,540,400]
        ]);

        var options = {
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);

      };
        drawChart();
        setInterval(drawChart, 10000);

     
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>


Thx

Jeremy Faller

unread,
Jul 7, 2014, 11:31:56 AM7/7/14
to google-visua...@googlegroups.com
setInterval should work for you. Additionally, you want to change the data values to add your new value. Check out the following fiddle:


thecatz

unread,
Jul 10, 2014, 11:41:03 AM7/10/14
to google-visua...@googlegroups.com
Thx for your help, i've a last question :

(sorry but i don't know the real name) how can i customize the color of the grey line behind the chart ?


For the other who want to make like me an ajax call + load every x sec the chart here 's my code :


<!-- This is where the chart is displayed -->

<div id="chart_div" style="width: 900px; height: 500px;"></div>

<!--Load jQuery (needed for $.ajax) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   
<!--Load the AJAX API-->
<script src="https://www.google.com/jsapi"></script>

<script>

//Load the Visualization API and the candlestick package. 1.0 is always the current production version
google.load('visualization', '1.0', {packages: ['corechart']});
   
   
function drawVisualization() {

//Get data to the table from php returns dataArray which is a javascript array
$.ajax({
url: "http://chart.lesechos.fr/test/test.php",
dataType: "script",
async: false
});

//Create the data table. 'false' means that the first column is a label column
var data = google.visualization.arrayToDataTable(dataArray, true);

//Set chart options.
var options = {
legend: 'none',
colors: ['#53b8df','#c1cedf'],
chartArea: {width: '95%', height: '95%'},
enableInteractivity: false,
//vAxis: {textPosition: 'none'},
reverseCategories: false
};

//Instantiate an instance of the chart class

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

//Draw the chart
chart.draw(data, options);

}

//Set a callback to run when the Google Visualization API is loaded. Runs the drawVisualization function
google.setOnLoadCallback(drawVisualization);

 setInterval(function() {
       drawVisualization();
    }, 1000);

Jeremy Faller

unread,
Jul 11, 2014, 11:03:53 AM7/11/14
to google-visua...@googlegroups.com
I think you mean the gridlines:

vAxis:{gridlines:{color:'red'}},

thecatz

unread,
Jul 15, 2014, 3:45:45 AM7/15/14
to google-visua...@googlegroups.com
Yes the gridlines (sorry i'm rusted with english) thx a lot for your help, it's really nice.
Reply all
Reply to author
Forward
0 new messages