From 9305bcc8cd53969e55b59ac00ae7335adf1b1bf1 Mon Sep 17 00:00:00 2001 From: Ramesh Date: Wed, 27 Jul 2016 17:11:48 +0530 Subject: [PATCH] chartjs line chart --- demo_project/demo/templates/base.html | 1 + .../demo/templates/demo/chart_js.html | 33 +++++++++++++++++++ demo_project/demo/templates/demo/flot.html | 1 + demo_project/demo/templates/demo/gchart.html | 1 + .../demo/templates/demo/matplotlib.html | 1 + .../demo/templates/demo/mongodb_source.html | 1 + demo_project/demo/templates/demo/morris.html | 1 + .../demo/templates/demo/tutorial.html | 1 + demo_project/demo/templates/demo/yui.html | 1 + demo_project/demo/urls.py | 1 + demo_project/demo/utils.py | 8 +++++ demo_project/demo/views.py | 10 ++++-- graphos/renderers/chart_js.py | 26 +++++++++++++++ graphos/templates/graphos/chart_js/base.html | 15 +++++++++ graphos/templates/graphos/chart_js/html.html | 0 .../graphos/chart_js/line_chart.html | 1 + 16 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 demo_project/demo/templates/demo/chart_js.html create mode 100644 graphos/renderers/chart_js.py create mode 100644 graphos/templates/graphos/chart_js/base.html create mode 100644 graphos/templates/graphos/chart_js/html.html create mode 100644 graphos/templates/graphos/chart_js/line_chart.html diff --git a/demo_project/demo/templates/base.html b/demo_project/demo/templates/base.html index fa70060..a3878e3 100755 --- a/demo_project/demo/templates/base.html +++ b/demo_project/demo/templates/base.html @@ -51,6 +51,7 @@
  • Flot
  • Yui
  • Highcharts
    • +
  • Chart JS
  • Time Series Example
    • {% endblock %} diff --git a/demo_project/demo/templates/demo/chart_js.html b/demo_project/demo/templates/demo/chart_js.html new file mode 100644 index 0000000..90427e2 --- /dev/null +++ b/demo_project/demo/templates/demo/chart_js.html @@ -0,0 +1,33 @@ +{% extends "base.html" %} + +{% block menu %} + +{% endblock %} + +{% block content %} +

    Line Chart

    +
    + {{ line_chart.as_html }} + 
    +        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)
+
    +{% endblock %} \ No newline at end of file diff --git a/demo_project/demo/templates/demo/flot.html b/demo_project/demo/templates/demo/flot.html index db0205d..311b312 100644 --- a/demo_project/demo/templates/demo/flot.html +++ b/demo_project/demo/templates/demo/flot.html @@ -10,6 +10,7 @@
  • Flot
  • Yui
  • Highcharts
    • +
  • Chart JS
  • Time Series Example
    • {% endblock %} diff --git a/demo_project/demo/templates/demo/gchart.html b/demo_project/demo/templates/demo/gchart.html index b001565..5303217 100644 --- a/demo_project/demo/templates/demo/gchart.html +++ b/demo_project/demo/templates/demo/gchart.html @@ -30,6 +30,7 @@
  • Flot
  • Yui
  • Highcharts
    • +
  • Chart JS
  • Time Series Example
    • {% endblock %} diff --git a/demo_project/demo/templates/demo/matplotlib.html b/demo_project/demo/templates/demo/matplotlib.html index 3c90582..fd96e38 100644 --- a/demo_project/demo/templates/demo/matplotlib.html +++ b/demo_project/demo/templates/demo/matplotlib.html @@ -10,6 +10,7 @@
  • Flot
  • Yui
  • Highcharts
    • +
  • Chart JS
  • Time Series Example
    • {% endblock %} diff --git a/demo_project/demo/templates/demo/mongodb_source.html b/demo_project/demo/templates/demo/mongodb_source.html index 666274f..c399fc7 100644 --- a/demo_project/demo/templates/demo/mongodb_source.html +++ b/demo_project/demo/templates/demo/mongodb_source.html @@ -179,6 +179,7 @@
  • Matplotlib
  • Flot
  • Yui
    • +
  • Chart JS
  • Time Series Example
    • {% endblock %} diff --git a/demo_project/demo/templates/demo/morris.html b/demo_project/demo/templates/demo/morris.html index a416797..5a39f0b 100644 --- a/demo_project/demo/templates/demo/morris.html +++ b/demo_project/demo/templates/demo/morris.html @@ -19,6 +19,7 @@
  • Flot
  • Yui
  • Highcharts
    • +
  • Chart JS
  • Time Series Example
    • {% endblock %} diff --git a/demo_project/demo/templates/demo/tutorial.html b/demo_project/demo/templates/demo/tutorial.html index 7ad1cfd..c476b6b 100644 --- a/demo_project/demo/templates/demo/tutorial.html +++ b/demo_project/demo/templates/demo/tutorial.html @@ -9,6 +9,7 @@
  • Matplotlib
  • Flot
  • Yui
    • +
  • Chart JS
  • Time Series Example
    • {% endblock %} diff --git a/demo_project/demo/templates/demo/yui.html b/demo_project/demo/templates/demo/yui.html index add5cb1..9ba3d27 100644 --- a/demo_project/demo/templates/demo/yui.html +++ b/demo_project/demo/templates/demo/yui.html @@ -13,6 +13,7 @@
  • Matplotlib
  • Flot
  • Yui
    • +
  • Chart JS
  • Time Series Example
    • {% endblock %} diff --git a/demo_project/demo/urls.py b/demo_project/demo/urls.py index 2b23d46..aaf11a7 100644 --- a/demo_project/demo/urls.py +++ b/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"), diff --git a/demo_project/demo/utils.py b/demo_project/demo/utils.py index 256a497..b01b07a 100644 --- a/demo_project/demo/utils.py +++ b/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() diff --git a/demo_project/demo/views.py b/demo_project/demo/views.py index dfdc014..e391adc 100755 --- a/demo_project/demo/views.py +++ b/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) \ No newline at end of file diff --git a/graphos/renderers/chart_js.py b/graphos/renderers/chart_js.py new file mode 100644 index 0000000..877675f --- /dev/null +++ b/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" \ No newline at end of file diff --git a/graphos/templates/graphos/chart_js/base.html b/graphos/templates/graphos/chart_js/base.html new file mode 100644 index 0000000..c9a3aaa --- /dev/null +++ b/graphos/templates/graphos/chart_js/base.html @@ -0,0 +1,15 @@ + + + + \ No newline at end of file diff --git a/graphos/templates/graphos/chart_js/html.html b/graphos/templates/graphos/chart_js/html.html new file mode 100644 index 0000000..e69de29 diff --git a/graphos/templates/graphos/chart_js/line_chart.html b/graphos/templates/graphos/chart_js/line_chart.html new file mode 100644 index 0000000..62d8154 --- /dev/null +++ b/graphos/templates/graphos/chart_js/line_chart.html @@ -0,0 +1 @@ +{% extends "graphos/chart_js/base.html" %} \ No newline at end of file