Work on pie and charts for dashboards (refs #1617)

2 files changed, 70 insertions, 1 deletions

diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index 8722b5d05..4990fa111 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -793,6 +793,21 @@ a.remove{
     margin:0 6px;
 }
 
+.dashboard table.jqplot-table-legend{
+    width:default;
+    border-collapse:default;
+}
+
+.dashboard div.jqplot-table-legend-swatch-outline,
+.dashboard table.jqplot-table-legend th, .dashboard table.jqplot-table-legend td{
+    border:0;
+}
+
+.dashboard table.jqplot-table-legend td {
+    text-align:left;
+    padding:0;
+}
+
 .dashboard table{
     width:100%;
     border-collapse:yes;
diff --git a/ishtar_common/templates/ishtar/dashboards/dashboard_main.html b/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
index fb18580ef..3242da9a3 100644
--- a/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
+++ b/ishtar_common/templates/ishtar/dashboards/dashboard_main.html
@@ -3,16 +3,50 @@
 {% load range %}
 {% block extra_head %}
 {{form.media}}
+<script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/jquery.jqplot.min.js"></script>
+<script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
+<script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
+<script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.highlighter.min.js"></script>
+<script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
+<link rel="stylesheet" href="{{STATIC_URL}}js/jqplot/jquery.jqplot.min.css" />
 {% endblock %}
 {% block content %}
 <div class='dashboard'>
 {% for lbl, dashboard in items %}
+<script language="javascript" type="text/javascript">
+$(document).ready(function(){
+var values{{forloop.counter0}} = [];
 
+{% for idx, lbl, values in dashboard.values %} {% for value in values %}
+{% ifequal forloop.parentloop.counter0 0 %}values{{forloop.parentloop.parentloop.counter0}}.push([{{value}}, 0]);
+{% else %}values{{forloop.parentloop.parentloop.counter0}}[{{forloop.counter0}}][1] = {{value}};{% endifequal %}{% endfor%}{% endfor%}
+
+var plot{{forloop.counter0}} = $.jqplot('chart{{forloop.counter0}}',
+    [values{{forloop.counter0}}], {
+      series:[{showMarker:false}],
+      axes:{
+        xaxis:{
+          label:'{% trans "Year" %}'
+        },
+        yaxis:{
+          label:'{% trans "Number"%}',
+          min:0
+        }
+      },
+      highlighter: {
+        show: true,
+        sizeAdjust: 7.5
+      }
+  });
+});
+</script>
   <h3>{{lbl}}</h3>
   <div>
     <h4>{% trans "Numbers" %}</h4>
     <p><strong>{% trans "Total:" %}</strong> {{dashboard.total_number}}</p>
     <div class='table'>
+    <div id="chart{{forloop.counter0}}" style="height:400px; width:700px;"></div>
+    {% comment %}
     <table>
     {% for idx, lbl, values in dashboard.values %}
       <tr class='idx {% if forloop.counter0|divisibleby:"2" %}even{%else%}odd{%endif%}'>
@@ -20,7 +54,7 @@
       {% for value in values %}<td>{{value}}</td>{% endfor%}
       </tr>
     {% endfor%}
-    </table>
+    </table>{% endcomment %}
     </div>
     {% if dashboard.years %}
     <h4>{% trans "By years" %}</h4>
@@ -69,6 +103,26 @@
 
   <h3>{% trans "Users" %}</h3>
   <div>
+<script language="javascript" type="text/javascript">
+$(document).ready(function(){
+var values_users = [];
+{% for user_type in ishtar_users.types %}
+values_users.push(['{{user_type.person__person_types__label}}', {{user_type.number}}]); {% endfor%}
+
+var plot_users = jQuery.jqplot ('user_chart', [values_users],
+    {
+      seriesDefaults: {
+        renderer: jQuery.jqplot.PieRenderer,
+        rendererOptions: {
+          showDataLabels: true
+        }
+      },
+      legend: { show:true, location: 's' }
+    }
+ );
+});
+</script>
+    <div id="user_chart" style="height:400px; width:700px;"></div>
     <div class='table'>
     <table>
       <tr><th>{% trans "User type" %}</th><th>{% trans "Number" %}</th></tr>