Python Line Chart with Data from CSV File Source

Download Python Django Chart Samples

Example shows Python Line Chart with Data from CSV file source. Chart can also be plotted with data from other sources like JSON, XML or any other services. 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 data = {{ datapoints|safe }};
      var dataPoints = []

      for(var i=0; i<data.length; i++) {
        dataDate = data[i].Date
        dataPoints.push({
          x: new Date(parseInt(dataDate.split("-")[2]),parseInt(dataDate.split("-")[1]),parseInt(dataDate.split("-")[0])), 
          y: parseInt(data[i].Close)
        });
      }
      
      var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        title: {
          text: "Python Chart with Data from CSV"
        },
        subtitles: [{
          text: "BTC-USD"
        }],
        axisY: {
          title: "Price",
          prefix: "$"
        },
        data: [{
          type: "line",
          xValueType: "dateTime",
          yValueFormatString: "$#,##0.##",
          dataPoints: dataPoints
        }]
      });
      chart.render();
    }
</script>
</head>
<body>
    <div id="chartContainer" style="height: 360px; width: 100%;"></div>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render
import csv
import os

def index(request):
    dir_path = os.path.dirname(os.path.realpath(__file__))
    data_file = open(dir_path + "/static/btc-usd-weekly-2021.csv")
    csv_data = csv.DictReader(data_file)
    datapoints = []
    
    for csv_line in csv_data:
        datapoints.append(csv_line)
    
    return render(request, "index.html", { "datapoints": datapoints})

Chart Customizations

You can choose between different types of line using lineDashType. You can further customize the line using lineColor, lineThickness, etc.