Python Scatter Chart using Django

Download Python Django Chart Samples

Example shows Python Scatter Chart built using CanvasJS & Django Framework. They are also referred to as Scattergram / Scatter Plot. Demo also includes Django source-code that you can try out locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {  
      animationEnabled: true,
      exportEnabled: true,
      title: {
        text: "Weight vs Fuel Economy of Cars"
      },
      axisY: {
        title: "Fuel Economy (in Miles/Gallon)"
      },
      axisX: {
        title: "Weight (in Thousand Pounds)"
      },
      data: [{
        type: "scatter",
        xValueFormatString: "#,##0.00 Thousand Pounds",
        yValueFormatString: "#,##0.00 Miles per Gallon",
        toolTipContent: "<b>Weight:</b> {x}, <br><b>Fuel Economy:</b> {y}",
        dataPoints: {{ vehicle_weight_fuel_economy_data|safe }}
      }]
    });
    chart.render();
  }
</script>
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render

def index(request):
    vehicle_weight_fuel_economy_data = [
        { "x": 4.36, "y": 16.9},
        { "x": 4.054, "y": 15.5},
        { "x": 3.605, "y": 19.2},
        { "x": 3.94, "y": 18.5},
        { "x": 2.155, "y": 30},
        { "x": 2.56, "y": 27.5},
        { "x": 2.3, "y": 27.2},
        { "x": 2.23, "y": 30.9},
        { "x": 2.83, "y": 20.3},
        { "x": 3.14, "y": 19.5},
        { "x": 2.795, "y": 21.6},
        { "x": 3.41, "y": 16.2},
        { "x": 3.38, "y": 20.6},
        { "x": 3.07, "y": 20.8},
        { "x": 3.62, "y": 18.6},
        { "x": 3.41, "y": 18.1},
        { "x": 3.84, "y": 17},
        { "x": 3.725, "y": 17.6},
        { "x": 3.955, "y": 16.5},
        { "x": 3.83, "y": 18.2},
        { "x": 2.585, "y": 26.5},
        { "x": 2.91, "y": 21.9},
        { "x": 1.975, "y": 34.1},
        { "x": 1.915, "y": 35.1},
        { "x": 2.67, "y": 27.4},
        { "x": 1.99, "y": 31.5},
        { "x": 2.135, "y": 29.5},
        { "x": 2.67, "y": 28.4},
        { "x": 2.595, "y": 28.8},
        { "x": 2.7, "y": 26.8},
        { "x": 2.556, "y": 33.5},
        { "x": 2.2, "y": 34.2},
        { "x": 2.02, "y": 31.8},
        { "x": 2.13, "y": 37.3},
        { "x": 2.19, "y": 30.5},
        { "x": 2.815, "y": 22},
        { "x": 2.6, "y": 21.5}
    ]

    return render(request, 'index.html', { "vehicle_weight_fuel_economy_data" : vehicle_weight_fuel_economy_data })

Chart Customizations

Setting zoomEnabled property to true lets you zoom into a set of datapoints to be analyzed out of a large dataset. You can change the color of the datapoints using color property. You can change axis scaling to logarithmic by setting logarithmic property to true, useful in scientific analysis. The log-base can be changed by setting logarithmBase property.