chartjs line chart

demo_project/demo/templates/base.html

@@ -51,6 +51,7 @@
               <li><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
               <li><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
               <li><a href="{% url 'demo_highcharts_demo' %}">Highcharts</a></li>
+              <li><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
               <li><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
           </ul>
       {%  endblock %}

demo_project/demo/templates/demo/chart_js.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block menu %}
+  <ul class="nav nav-tabs">
+      <li><a href="{% url 'demo_home' %}">Home</a></li>
+      <li><a href="{% url 'demo_tutorial' %}">Tutorial</a></li>
+      <li><a href="{% url 'demo_gchart_demo' %}">Gchart</a></li>
+      <li><a href="{% url 'demo_morris_demo' %}">Morris</a></li>
+      <li><a href="{% url 'demo_matplotlib_demo' %}">Matplotlib</a></li>
+      <li><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
+      <li><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
+      <li><a href="{% url 'demo_highcharts_demo' %}">Highcharts</a></li>
+      <li class="active"><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
+      <li><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
+  </ul>
+{%  endblock %}
+
+{% block content %}
+    <h2>Line Chart</h2>
+    <div id="line_chart" class="well">
+    {{ line_chart.as_html }}
+    <pre class="code">
+        data = [
+               ['Year', 'Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+               ['First dataset', '2004', 1000, 400, 100, 600],
+               ['Second dataset', '2005', 1170, 460, 120, 310],
+               ['Third dataset', '2006', 660, 1120, 50, -460],
+               ['Fourth dataset', '2007', 1030, 540, 100, 200],
+               ]
+        data_source = SimpleDataSource(data)
+        chart = chart_js.LineChart(data_source)
+    </pre>
+{% endblock %}

demo_project/demo/templates/demo/flot.html

@@ -10,6 +10,7 @@
       <li class="active"><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
       <li><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
       <li><a href="{% url 'demo_highcharts_demo' %}">Highcharts</a></li>
+      <li><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
       <li><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
   </ul>
 {%  endblock %}

demo_project/demo/templates/demo/gchart.html

@@ -30,6 +30,7 @@
       <li><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
       <li><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
       <li><a href="{% url 'demo_highcharts_demo' %}">Highcharts</a></li>
+      <li><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
       <li><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
   </ul>
 {%  endblock %}

demo_project/demo/templates/demo/matplotlib.html

@@ -10,6 +10,7 @@
       <li><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
       <li><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
       <li><a href="{% url 'demo_highcharts_demo' %}">Highcharts</a></li>
+      <li><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
       <li><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
   </ul>
 {%  endblock %}

demo_project/demo/templates/demo/mongodb_source.html

@@ -179,6 +179,7 @@
       <li><a href="{% url 'demo_matplotlib_demo' %}">Matplotlib</a></li>
       <li><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
       <li><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
+      <li><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
       <li class="active"><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
   </ul>
 {%  endblock %}

demo_project/demo/templates/demo/morris.html

@@ -19,6 +19,7 @@
       <li><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
       <li><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
       <li><a href="{% url 'demo_highcharts_demo' %}">Highcharts</a></li>
+      <li><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
       <li><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
   </ul>
 {%  endblock %}

demo_project/demo/templates/demo/tutorial.html

@@ -9,6 +9,7 @@
       <li><a href="{% url 'demo_matplotlib_demo' %}">Matplotlib</a></li>
       <li><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
       <li><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
+      <li><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
       <li><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
   </ul>
 {%  endblock %}

demo_project/demo/templates/demo/yui.html

@@ -13,6 +13,7 @@
       <li><a href="{% url 'demo_matplotlib_demo' %}">Matplotlib</a></li>
       <li><a href="{% url 'demo_flot_demo' %}">Flot</a></li>
       <li class="active"><a href="{% url 'demo_yui_demo' %}">Yui</a></li>
+      <li><a href="{% url 'demo_chartjs' %}">Chart JS</a></li>
       <li><a href="{% url 'demo_time_series_example' %}">Time Series Example</a></li>
   </ul>
 {%  endblock %}

demo_project/demo/urls.py

@@ -12,6 +12,7 @@
     url(r'^matplotlib/$', 'demo.views.matplotlib_demo', name='demo_matplotlib_demo'),
     url(r'^time_series/$', 'demo.views.time_series_demo',
                            name='demo_time_series_example'),
+    url(r'^chartjs/$', 'demo.views.chartjs_demo', name='demo_chartjs'),
     url(r"^gchart-json/$", "demo.views.custom_gchart_renderer", name="demo_custom_gchart"),
     url(r"^mongo-json/$", "demo.views.mongo_json", name="demo_mongo_json"),
     url(r"^mongo-json2/$", "demo.views.mongo_json2", name="demo_mongo_json2"),

demo_project/demo/utils.py

@@ -100,6 +100,14 @@ def get_mongo_cursor(db_name, collection_name, max_docs=100):
 mongo_data = [{'data': mongo_series_object_1, 'label': 'hours'},
               {'data': mongo_series_object_2, 'label': 'hours'}]
 
+chartjs_data = [
+               ['Year', 'Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+               ['First dataset', '2004', 1000, 400, 100, 600],
+               ['Second dataset', '2005', 1170, 460, 120, 310],
+               ['Third dataset', '2006', 660, 1120, 50, -460],
+               ['Fourth dataset', '2007', 1030, 540, 100, 200],
+               ]
+
 
 def create_demo_accounts():
     Account.objects.all().delete()

demo_project/demo/views.py

@@ -3,7 +3,7 @@
 from django.views.generic.base import TemplateView
 from django.http import HttpResponse
 
-from graphos.renderers import gchart, yui, flot, morris, highcharts, matplotlib_renderer
+from graphos.renderers import gchart, yui, flot, morris, highcharts, matplotlib_renderer, chart_js
 from graphos.sources.simple import SimpleDataSource
 from graphos.sources.mongo import MongoDBDataSource
 from graphos.sources.model import ModelDataSource
@@ -12,7 +12,7 @@
 from .utils import get_mongo_cursor
 from .utils import (data, candlestick_data, treemap_data,
                     mongo_series_object_1, mongo_series_object_2,
-                    create_demo_accounts, create_demo_mongo, get_db)
+                    create_demo_accounts, create_demo_mongo, get_db, chartjs_data)
 from .custom_charts import CustomGchart, CustomFlot, CustomFlot2
 
 import json
@@ -437,3 +437,9 @@ def matplotlib_demo(request):
     context = {"line_chart": line_chart,
                "bar_chart": bar_chart}
     return render(request, 'demo/matplotlib.html', context)
+
+
+def chartjs_demo(request):
+    line_chart = chart_js.LineChart(SimpleDataSource(data=chartjs_data))
+    context = {"line_chart": line_chart}
+    return render(request, 'demo/chart_js.html', context)

graphos/renderers/chart_js.py

@@ -0,0 +1,26 @@
+from .base import BaseChart
+
+
+class BaseCJsChart(BaseChart):
+    def get_data(self):
+        data = super(BaseCJsChart, self).get_data()
+        data_only = data[1:]
+        context = []
+        for row in data_only:
+            context_dict = {}
+            context_dict['label'] = row[0]
+            context_dict['data'] = row[1:]
+            context_dict['backgroundColor'] = 'rgba(75,192,192,1)'
+            context.append(context_dict)
+        return context
+
+    def get_html_template(self):
+        return "graphos/chart_js/html.html"
+
+
+class LineChart(BaseCJsChart):
+    def get_js_template(self):
+        return "graphos/chart_js/line_chart.html"
+
+    def get_chart_type(self):
+        return "line"

graphos/templates/graphos/chart_js/base.html

@@ -0,0 +1,15 @@
+
+<canvas id="canvas"></canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
+<script>
+    var ctx = document.getElementById("canvas").getContext("2d");
+    var data = {
+        labels: {{chart.header|safe}},
+        datasets: {{chart.get_data|safe}},
+    };
+
+    var myNewChart = new Chart(ctx , {
+      type: "{{chart.get_chart_type}}",
+      data: data, 
+    }); 
+</script>

graphos/templates/graphos/chart_js/line_chart.html

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