Python Multi Series Scatter Chart using Django

Download Python Django Chart Samples

Example shows Python Multi-Series Scatter Chart with different marker types. Library supports different marker types like circle, square, triangle & cross that can help you analyze data. Demo also includes Django source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      theme: "light2",
      title:{
        text: "Server Performance"
      },
      axisX: {
        title:"Server Load (in TPS)"
      },
      axisY:{
        title: "Response Time",
        lineThickness: 1,
        gridThickness: 0,
        suffix: "ms"
      },
      legend:{
        cursor: "pointer",
        itemclick: toggleDataSeries
      },
      data: [{
        type: "scatter",
        toolTipContent: "<b>{name}</b><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b> {y} ms",
        name: "Server 1",
        markerType: "square",
        showInLegend: true,
        dataPoints: {{ server1_data|safe }}
      },{
        type: "scatter",
        name: "Server 2",
        markerType: "triangle",
        showInLegend: true, 
        toolTipContent: "<b>{name}</b><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b> {y} ms",
        dataPoints: {{ server2_data|safe }}
      }]
    });
    chart.render();

    function toggleDataSeries(e){
      if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
      }
      else{
        e.dataSeries.visible = true;
      }
      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):
    server1_data = [
        { "x": 23, "y": 340 },
        { "x": 20, "y": 292 },
        { "x": 21, "y": 292 },
        { "x": 22, "y": 292 },
        { "x": 23, "y": 290 },
        { "x": 24, "y": 321 },
        { "x": 25, "y": 321 },
        { "x": 26, "y": 321 },
        { "x": 27, "y": 250 },
        { "x": 28, "y": 390 },
        { "x": 29, "y": 250 },
        { "x": 30, "y": 400 },
        { "x": 31, "y": 453 },
        { "x": 32, "y": 405 },
        { "x": 33, "y": 430 },
        { "x": 34, "y": 380 },
        { "x": 35, "y": 350 },
        { "x": 36, "y": 380 },
        { "x": 37, "y": 390 },
        { "x": 38, "y": 405 },
        { "x": 39, "y": 410 },
        { "x": 40, "y": 415 },
        { "x": 41, "y": 430 }
    ]

    server2_data = [
        { "x": 19, "y": 260 },
        { "x": 20, "y": 250 },
        { "x": 21, "y": 240 },
        { "x": 22, "y": 250 },
        { "x": 23, "y": 265 },
        { "x": 24, "y": 330 },
        { "x": 25, "y": 240 },
        { "x": 26, "y": 360 },
        { "x": 27, "y": 250 },
        { "x": 28, "y": 240 },
        { "x": 29, "y": 225 },
        { "x": 30, "y": 330 },
        { "x": 31, "y": 250 },
        { "x": 32, "y": 290 },
        { "x": 33, "y": 350 },
        { "x": 34, "y": 390 },
        { "x": 37, "y": 280 },
        { "x": 38, "y": 285 },
        { "x": 40, "y": 290 },
        { "x": 41, "y": 295 },
        { "x": 43, "y": 320 },
        { "x": 44, "y": 340 },
        { "x": 42, "y": 360 }
    ]

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

Chart Customizations

You can show hollow markers by setting markerBorderColor & markerBorderThickness properties along with markerColor set to transparent. Same can be done in legend-markers with the combination of legendMarkerBorderColor, legendMarkerBorderThickness & legendMarkerColor properties.