Charts.js and Django Integration - 4US

By pjain      Published Dec. 30, 2019, 6:52 a.m. in blog AI-Analytics-Data   

Charts.js Quickstart to Intermediate use

Quickstart, Use 4US

Setup, Build dist/ from github repo

  • GITHUB build in dist and Full samples $ Get from git repo $ cd $ npm install $ npm install -g gulp-cli $ gulp build // Creates the dir dist with files

Integrating in JS project

  1. JS Inclusion
  2. You need Chart.min.js - either from a CDN or build from github as shown below
  3. However, if you have time x-scale - use instead the bundled one with moment: dist/Chart.bundle.min.js
  4. CSS Also add the css styling for charts.js

  5. canvas tag with height, width and ctx reference,

  6. Adding a charts to render in it - in js

  7. Combo Ex

  8. Line Chart - Combo Time Scale
  9. Line · Chart.js documentation
  10. Official Docs,

    Date-Time axis

    Scatter-Line Regressions

    Django Charts.js

    DJ - !Prio lots of Django Tutes!

    – Easy, object oriented client side graphs for designers and developers

    Chart.js is one of the most popular JavaScript charting libraries used in admin templates and other web application. It is an open source project, so it is completely free for use. Chart.js offers 8 different chart types for data visualization with out of the box animations. Chart.js offers charts that are highly customizable. You can view the demo of the different types of charts and experiment with them by adding or removing data or data-sets. Chart.js is compatible with all the modern browsers and responsive behavior of the charts can be enabled by some configuration in the charts. Chart.js provides really good and comprehensive documentation to get started with.

    • ChartJs: !PRIO - integrates

    Django Chartjs lets you manage charts in you Django application. This is compatible with Chart.js and Highcharts JS librairies. Using a set of predefined Class Based Views your are able to get started after writting just your SQL query.

    $ pip install django-chartjs # and add to INSTALLED_APPS  = 'chartjs',
    • URL -> View

    • View

      from random import randint from django.views.generic import TemplateView from chartjs.views.lines import BaseLineChartView

      class LineChartJSONView(BaseLineChartView): def get_labels(self): """Return 7 labels.""" return ["January", "February", "March", "April", "May", "June", "July"]

      def get_data(self):
          """Return 3 dataset to plot."""
          return [[75, 44, 92, 11, 44, 95, 35],
                  [41, 92, 18, 3, 73, 87, 92],
                  [87, 21, 94, 3, 90, 13, 65]]

      line_chart = TemplateView.as_view(template_name='line_chart.html') line_chart_json = LineChartJSONView.as_view()

    • dj template

      {% load staticfiles %} django-chartjs line chart demo

      Some Line Charts loaded in Ajax!

          <canvas id="myChart" width="500" height="400"></canvas>
          <script type="text/javascript" src=""></script>
          <script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
          <script type="text/javascript">
              $.get('{% url "line_chart_json" %}', function(data) {
                  var ctx = $("#myChart").get(0).getContext("2d");
                  new Chart(ctx).Line(data);


    Video DJ+ChartJS

    Integration Resources

    Charts.js Ref to Advanced Uses

    EZ Tutes

    Video Tutes


    Addons, Plugins


    Financial Ex usage

    Dashboards with Charts.js


There are no comments yet

Add new comment

Similar posts

Politics and Social Networks

Markov Models Quickstart

Monte Carlo Models, Chains and Monte Carlo Simulation

Datascience, Big Data, Analytics and Visualization Learning Guide