Chartjs

demo_project/demo/templates/demo/chartjs.html

@@ -0,0 +1,69 @@
+{% 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 'chartjs_demo' %}">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 =  [
+                ['Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+                [2004, 1000, 400, 100, 600],
+                [2005, 1170, 460, 120, 310]]
+        data_source = SimpleDataSource(data)
+        chart = chart_js.LineChart(data_source)
+    </pre>
+    </div>
+
+    <h2>Bar Chart</h2>
+    <div id="line_chart" class="well">
+    {{ bar_chart.as_html }}
+    <pre class="code">
+        data =  [
+                ['Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+                [2004, 1000, 400, 100, 600],
+                [2005, 1170, 460, 120, 310]]
+        data_source = SimpleDataSource(data)
+        chart = chart_js.BarChart(data_source)
+    </pre>
+    </div>
+
+    <h2>Pie Chart</h2>
+    <div id="line_chart" class="well">
+    {{ pie_chart.as_html }}
+    <pre class="code">
+        data = [
+               ['Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+               ['First dataset', 1000, 400, 100, 600]]
+        data_source = SimpleDataSource(data)
+        chart = chart_js.PieChart(data_source)
+    </pre>
+    </div>
+
+    <h2>Donought Chart</h2>
+    <div id="line_chart" class="well">
+    {{ donought_chart.as_html }}
+    <pre class="code">
+        data = [
+               ['Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+               ['First dataset', 1000, 400, 100, 600]]
+        data_source = SimpleDataSource(data)
+        chart = chart_js.DonoughtChart(data_source)
+    </pre>
+    </div>
+
+{% endblock %}

demo_project/demo/urls.py

@@ -18,5 +18,6 @@
     url(r"^mongo-json2/$", "demo.views.mongo_json2", name="demo_mongo_json2"),
     url(r"^mongo-json-multi/$", "demo.views.mongo_json_multi", name="demo_mongo_json_multi"),
     url(r"^mongo-json-multi2/$", "demo.views.mongo_json_multi2", name="demo_mongo_json_multi2"),
+    url(r"^chartjs", "demo.views.chartjs_demo", name="chartjs_demo")
 )
 

demo_project/demo/utils.py

@@ -693,3 +693,13 @@ def create_demo_mongo():
                      ["Pakistan",14,12,9],
                      ["Srilanka",15,5,98],
                      ["Indonesia",16,35,150]]
+
+
+chartjs_sample_data = [
+    ['Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+    [2004, 1000, 400, 100, 600],
+    [2005, 1170, 460, 120, 310]]
+
+chartjs_single_series = [
+    ['Sales', 'Expenses', 'Items Sold', 'Net Profit'],
+    ['First dataset', 1000, 400, 100, 600]]

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, c3js, matplotlib_renderer
+from graphos.renderers import gchart, yui, flot, morris, highcharts, c3js, matplotlib_renderer, chartjs
 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, map_data, map_data_us, map_data_us_point, map_data_us_lat_lon, map_data_us_multi_series, map_data_us_multi_series_lat_lon,
                     mongo_series_object_1, mongo_series_object_2, heatmap_data, funnel_data, treemap_data_highcharts, piechart_data_highcharts,bubble_chart_data_single, bubble_chart_data_multi,
-                    create_demo_accounts, create_demo_mongo, get_db, scatter_single_series_data, scatter_multi_series_data)
+                    create_demo_accounts, create_demo_mongo, get_db, scatter_single_series_data, scatter_multi_series_data, chartjs_sample_data, chartjs_single_series)
 from .custom_charts import CustomGchart, CustomFlot, CustomFlot2
 
 import json
@@ -514,3 +514,19 @@ 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 = chartjs.LineChart(SimpleDataSource(
+        data=chartjs_sample_data),
+        options={"fill": False, "borderColor": "rgba(75,192,192,1)"})
+    bar_chart = chartjs.BarChart(SimpleDataSource(data=chartjs_sample_data))
+    pie_chart = chartjs.PieChart(SimpleDataSource(
+        data=chartjs_single_series),
+        options={"backgroundColor": ["#2ecc71", "#3498db", "#95a5a6", "#9b59b6", ]})
+    donught_chart = chartjs.DoughnutChart(SimpleDataSource(
+        data=chartjs_single_series),
+        options={"backgroundColor": ["#2ecc71", "#3498db", "#95a5a6", "#9b59b6", ]})
+    context = {"line_chart": line_chart, "bar_chart": bar_chart, "pie_chart": pie_chart, "donought_chart": donught_chart}
+    return render(request, 'demo/chartjs.html', context)

graphos/renderers/chartjs.py

@@ -0,0 +1,45 @@
+from .base import BaseChart
+
+import json
+
+
+class BaseChartJs(BaseChart):
+    def get_data(self):
+        data = super(BaseChartJs, 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)
+        if self.get_options():
+            context[0].update(self.get_options())
+        return json.dumps(context)
+
+    def get_html_template(self):
+        return "graphos/chartjs/html.html"
+
+    def get_js_template(self):
+        return "graphos/chartjs/js.html"
+
+
+class LineChart(BaseChartJs):
+    def get_chart_type(self):
+        return "line"
+
+
+class BarChart(BaseChartJs):
+    def get_chart_type(self):
+        return "bar"
+
+
+class PieChart(BaseChartJs):
+    def get_chart_type(self):
+        return "pie"
+
+
+class DoughnutChart(BaseChartJs):
+    def get_chart_type(self):
+        return "doughnut"

graphos/templates/graphos/chartjs/html.html

@@ -0,0 +1 @@
+<canvas id="{{ chart.get_html_id }}"></canvas>

graphos/templates/graphos/chartjs/js.html

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