Merge pull request #60 from agiliq/add_more_yui_charts

Add more yui charts

Author: akshar-raaj

demo_project/demo/templates/demo/yui.html

@@ -29,22 +29,55 @@ <h2>Line Chart</h2>
 
         {{ line_chart.as_html }}
         <pre class="code">
+            queryset = Account.objects.all()
             data_source = ModelDataSource(queryset, fields=['year', 'sales',],)
-            gchart.LineChart(data_source, options={'title': "Sales Growth"})
+            chart = yui.LineChart(data_source, options={'title': "Sales Growth"})
+        </pre>
+    </div>
+    <br />
+
+    <h2>Spline Chart</h2>
+    <div id="spline_chart" class="well">
+
+        {{ spline_chart.as_html }}
+        <pre class="code">
+            data = [
+                   ['Year', 'Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+                   ['2004', 1000, 400, 100, 600],
+                   ['2005', 1170, 460, 120, 310],
+                   ['2006', 660, 1120, 50, -460],
+                   ['2007', 1030, 540, 100, 200],
+                   ]
+            data_source = SimpleDataSource(data)
+            chart = yui.SplineChart(data_source, options={'title': "Sales/ Expense"})
         </pre>
     </div>
     <br />
 
     <h2>Column Chart</h2>
     <div id="column_chart" class="well">
         {{ column_chart.as_html }}
+        <pre class="code">
+            data = [
+                   ['Year', 'Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+                   ['2004', 1000, 400, 100, 600],
+                   ['2005', 1170, 460, 120, 310],
+                   ['2006', 660, 1120, 50, -460],
+                   ['2007', 1030, 540, 100, 200],
+                   ]
+            data_source = SimpleDataSource(data)
+            chart = yui.ColumnChart(data_source, options={'title': "Sales/ Expense"})
     </div>
 
     <br />
 
     <h2>Bar Chart</h2>
     <div id="bar_chart" class="well">
         {{ bar_chart.as_html }}
+        <pre class="code">
+			data_source = ModelDataSource(queryset, fields=['year', 'sales'])
+			chart = yui.BarChart(data_source, options={'title': "Expense Growth"})
+        </pre>
     </div>
     <br />
 
@@ -56,6 +89,28 @@ <h2>Candlestick Chart</h2>
     <h2>Pie Chart</h2>
     <div id="pie_chart" class="well">
         {{ pie_chart.as_html }}
+        <pre class="code">
+        data_source = ModelDataSource(queryset, fields=['year', 'sales'])
+        chart = yui.PieChart(data_source)
+        </pre>
+    </div>
+
+    <h2>Area Chart</h2>
+    <div id="area_chart" class="well">
+        {{ area_chart.as_html }}
+        <pre class="code">
+        data_source = ModelDataSource(queryset, fields=['year', 'sales'])
+        chart = yui.AreaChart(data_source)
+        </pre>
+    </div>
+
+    <h2>Areaspline Chart</h2>
+    <div id="area_spline_chart" class="well">
+        {{ area_spline_chart.as_html }}
+        <pre class="code">
+        data_source = ModelDataSource(queryset, fields=['year', 'sales'])
+        chart = yui.AreaSplineChart(data_source)
+        </pre>
     </div>
 
 {% endblock %}

demo_project/demo/views.py

@@ -211,6 +211,19 @@ def get_context_data(self, **kwargs):
 class YUIDemo(Demo):
     template_name = 'demo/yui.html'
 
+    def get_context_data(self, **kwargs):
+        context = super(YUIDemo, self).get_context_data(**kwargs)
+        queryset = Account.objects.all()
+        data_source = ModelDataSource(queryset,
+                                      fields=['year', 'sales'])
+        area_chart = self.renderer.AreaChart(data_source)
+        area_spline_chart = self.renderer.AreaSplineChart(data_source)
+        spline_chart = self.renderer.SplineChart(SimpleDataSource(data=data))
+        context.update({'area_chart': area_chart,
+                        'area_spline_chart': area_spline_chart,
+                        'spline_chart': spline_chart})
+        return context
+
 yui_demo = YUIDemo.as_view(renderer=yui)
 
 

graphos/renderers/yui.py

@@ -22,17 +22,53 @@ class LineChart(BaseYuiChart):
     def get_js_template(self):
         return "graphos/yui/line_chart.html"
 
+    def get_chart_type(self):
+        return "line"
+
+
+class SplineChart(BaseYuiChart):
+    def get_js_template(self):
+        return "graphos/yui/spline_chart.html"
+
+    def get_chart_type(self):
+        return "spline"
+
 
 class BarChart(BaseYuiChart):
     def get_js_template(self):
         return "graphos/yui/bar_chart.html"
 
+    def get_chart_type(self):
+        return "bar"
+
 
 class ColumnChart(BaseYuiChart):
     def get_js_template(self):
         return "graphos/yui/column_chart.html"
 
+    def get_chart_type(self):
+        return "column"
+
 
 class PieChart(BaseYuiChart):
     def get_js_template(self):
         return "graphos/yui/pie_chart.html"
+
+    def get_chart_type(self):
+        return "pie"
+
+
+class AreaChart(BaseYuiChart):
+    def get_js_template(self):
+        return "graphos/yui/area_chart.html"
+
+    def get_chart_type(self):
+        return "area"
+
+
+class AreaSplineChart(BaseYuiChart):
+    def get_js_template(self):
+        return "graphos/yui/area_spline_chart.html"
+
+    def get_chart_type(self):
+        return "areaspline"

graphos/templates/graphos/yui/area_chart.html

@@ -0,0 +1 @@
+{% extends "graphos/yui/base.html" %}

graphos/templates/graphos/yui/area_spline_chart.html

@@ -0,0 +1 @@
+{% extends "graphos/yui/base.html" %}

graphos/templates/graphos/yui/bar_chart.html

@@ -1,11 +1 @@
-{% extends "graphos/yui/base.html" %}
-
-{% block yui_chart_type %}
-    // Instantiate and render the chart
-    var mychart = new Y.Chart({
-        dataProvider: datasets,
-        render: "#{{ chart.html_id }}",
-        type: "bar",
-        categoryKey:"{{ chart.get_category_key }}"
-    });
-{% endblock %}
+{% extends "graphos/yui/base.html" %}

graphos/templates/graphos/yui/base.html

@@ -8,7 +8,7 @@
         var mychart = new Y.Chart({
             dataProvider: datasets,
             render: "#{{ chart.get_html_id }}",
-            type: "line",
+            type: "{{chart.get_chart_type}}",
             categoryKey:"{{ chart.get_category_key }}",
             styles: {{ chart.get_options_json|safe }}
         });

graphos/templates/graphos/yui/column_chart.html

@@ -1,11 +1 @@
-{% extends "graphos/yui/base.html" %}
-
-{% block yui_chart_type %}
-    // Instantiate and render the chart
-    var mychart = new Y.Chart({
-        dataProvider: datasets,
-        render: "#{{ chart.html_id }}",
-        type: "column",
-        categoryKey:"{{ chart.get_category_key }}"
-    });
-{% endblock %}
+{% extends "graphos/yui/base.html" %}

graphos/templates/graphos/yui/pie_chart.html

@@ -1,11 +1 @@
-{% extends "graphos/yui/base.html" %}
-
-{% block yui_chart_type %}
-    // Instantiate and render the chart
-    var mychart = new Y.Chart({
-        dataProvider: datasets,
-        render: "#{{ chart.html_id }}",
-        type: "pie",
-        categoryKey:"{{ chart.get_category_key }}"
-    });
-{% endblock %}
+{% extends "graphos/yui/base.html" %}

graphos/templates/graphos/yui/spline_chart.html

@@ -0,0 +1 @@
+{% extends "graphos/yui/base.html" %}