Basic Python Chart Example

Download Python Django Chart Samples

Example shows Simple Chart in Python built using CanvasJS & Django Framework. It also includes view & template source-code that you can try running locally.

<!— index.html —>
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script src="{% static 'canvasjs.min.js' %}"></script>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true, // change to false
            title:{
                text: "Python Column Chart"
            },
            data: [{
                type: "column",
                dataPoints: {{ data_points | safe }}
            }]
        });
        chart.render();
    }
</script>
    
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
</body>
</html>                              
#views.py
from django.http import HttpResponse
from django.shortcuts import render
from django.template import loader

def index(request):
    data_points = [
        { "label": "apple",  "y": 10  },
        { "label": "orange", "y": 15  },
        { "label": "banana", "y": 25  },
        { "label": "mango",  "y": 30  },
        { "label": "grape",  "y": 28  }
    ]
    return render(request, 'index.html', { "data_points" : data_points })

Chart Customizations

You can enable / disable animation of the chart by setting animationEnabled property to boolean. Chart theme can be change to either light or dark by setting theme property. At the same time, colors of all the elements of the chart are customizable by using properties like backgroundColor, title.fontColor, dataSeries.color, labelFontColor & more.