The graph now displays all data

The graph is updated as more and more data is returned from a query which contains alot of data.
jbohman · Sep 8, 2010 · bcce50d · bcce50d
1 parent 589fb98
commit bcce50d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/logsandra/controllers/graph.py b/logsandra/controllers/graph.py
@@ -28,7 +28,7 @@ def ajax(self):
         if 'next' in request.GET and request.GET['next']:
             column_next = long(request.GET['next'])
 
-        return {'result': log_entries.get_date_count(keyword, column_next=column_next)}
+        return {'result': log_entries.get_date_count(keyword, column_next=column_next, column_count=250)}
 
     def error(self):
         return 'Error, could not parse date'
diff --git a/logsandra/public/loading.gif b/logsandra/public/loading.gif
diff --git a/logsandra/templates/graph_view.html b/logsandra/templates/graph_view.html
@@ -5,23 +5,39 @@
 <script type="text/javascript">
     google.load("visualization", "1", {packages:["corechart"]});
     google.setOnLoadCallback(drawChart);
-    function drawChart() {
-        $.getJSON('{{ url(controller='graph', action='ajax') }}', {'keyword': "{{ c.keyword }}"}, function(result) {
-            var data = new google.visualization.DataTable();
-            data.addColumn('string', 'Date');
-            data.addColumn('number', 'Count');
-            data.addRows(result.result[0])
-            data.sort({column: 0});
-
-            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
-            chart.draw(data, {width: 800, height: 480, title: ''});
+
+    function updateChart(keyword, next, data, chart) {
+        jQuery.getJSON('{{ url(controller='graph', action='ajax') }}', {'keyword': keyword, 'next': next}, function(result) {
+            if(result.result[0].length > 0) { 
+                data.addRows(result.result[0])
+                data.sort({column: 0});
+                chart.draw(data, {width: 800, height: 480, title: ''});
+                updateChart(keyword, result.result[1], data, chart)
+            } else {
+                jQuery('#loading_div').html('');
+                return true;
+            }
         });
     }
+
+    function drawChart() {
+        var data = new google.visualization.DataTable();
+        data.addColumn('string', 'Date');
+        data.addColumn('number', 'Count');
+
+        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
+
+        updateChart({{ c.keyword }}, '', data, chart);
+
+        jQuery('#loading_div').html('<img src="{{ url('/loading.gif') }}" />');
+    }
 </script>
 {% endblock %}
 
 {% block content %}
 
+<div id="loading_div"></div>
+
 <div id="chart_div"></div>
 
 {% endblock %}