Extended the AJAX example with a setTimeout example of polling

git-svn-id: https://flot.googlecode.com/svn/trunk@175 1e0a6537-2640-0410-bfb7-f154510ff394

examples/ajax.html

@@ -21,33 +21,47 @@
     extracts it from a database and serializes it to JSON.</p>
 
     <p>
-      <input type="button" value="First dataset"> -
+      <input class="fetchSeries" type="button" value="First dataset"> -
       <a href="data-eu-gdp-growth.json">data</a> -
       <span></span>
     </p>
 
     <p>
-      <input type="button" value="Second dataset"> -
+      <input class="fetchSeries" type="button" value="Second dataset"> -
       <a href="data-japan-gdp-growth.json">data</a> -
       <span></span>
     </p>
 
     <p>
-      <input type="button" value="Third dataset"> -
+      <input class="fetchSeries" type="button" value="Third dataset"> -
       <a href="data-usa-gdp-growth.json">data</a> -
       <span></span>
     </p>
 
+    <p>If you combine AJAX with setTimeout, you can poll the server
+       for new data.</p>
+
+    <p>
+      <input class="dataUpdate" type="button" value="Poll for data">
+    </p>
+
 <script id="source" language="javascript" type="text/javascript">
 $(function () {
-    var options = { lines: { show: true }, points: { show: true } };
+    var options = {
+        lines: { show: true },
+        points: { show: true },
+        xaxis: { tickDecimals: 0, tickSize: 1 }
+    };
     var data = [];
+    var placeholder = $("#placeholder");
+    
+    $.plot(placeholder, data, options);
 
-    $.plot($("#placeholder"), data, options);
     
+    // fetch one series, adding to what we got
     var alreadyFetched = {};
     
-    $("input[type=button]").click(function () {
+    $("input.fetchSeries").click(function () {
         var button = $(this);
         
         // find the URL in the link right next to us 
@@ -68,7 +82,7 @@ $(function () {
             }
             
             // and plot all we got
-            $.plot($("#placeholder"), data, options);
+            $.plot(placeholder, data, options);
          }
         
         $.ajax({
@@ -78,6 +92,50 @@ $(function () {
             success: onDataReceived
         });
     });
+
+
+    // initiate a recurring data update
+    $("input.dataUpdate").click(function () {
+        // reset data
+        data = [];
+        alreadyFetched = {};
+        
+        $.plot(placeholder, data, options);
+
+        var iteration = 0;
+        
+        function fetchData() {
+            ++iteration;
+
+            function onDataReceived(series) {
+                // we get all the data in one go, if we only got partial
+                // data, we could merge it with what we already got
+                data = [ series ];
+                
+                $.plot($("#placeholder"), data, options);
+            }
+        
+            $.ajax({
+                // usually, we'll just call the same URL, a script
+                // connected to a database, but in this case we only
+                // have static example files so we need to modify the
+                // URL
+                url: "data-eu-gdp-growth-" + iteration + ".json",
+                method: 'GET',
+                dataType: 'json',
+                success: onDataReceived
+            });
+            
+            if (iteration < 5)
+                setTimeout(fetchData, 1000);
+            else {
+                data = [];
+                alreadyFetched = {};
+            }
+        }
+
+        setTimeout(fetchData, 1000);
+    });
 });
 </script>
 

examples/data-eu-gdp-growth-1.json

+{
+    label: 'Europe (EU27)',
+    data: [[1999, 3.0], [2000, 3.9]]
+}

examples/data-eu-gdp-growth-2.json

+{
+    label: 'Europe (EU27)',
+    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2]]
+}

examples/data-eu-gdp-growth-3.json

+{
+    label: 'Europe (EU27)',
+    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5]]
+}

examples/data-eu-gdp-growth-4.json

+{
+    label: 'Europe (EU27)',
+    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]]
+}

examples/data-eu-gdp-growth-5.json

+{
+    label: 'Europe (EU27)',
+    data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
+}

examples/index.html

@@ -17,7 +17,7 @@
       <li><a href="basic.html">Basic example</a></li>
       <li><a href="graph-types.html">Different graph types</a></li>
       <li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li>
-      <li><a href="ajax.html">Using AJAX with JSON data</a></li>
+      <li><a href="ajax.html">Updating graphs with AJAX</a></li>
     </ul>
 
     <p>Being interactive:</p>