Example shows Python Spline Chart that uses curvy line to connect between datapoints rather than straight line. Hence, these charts are also referred to as Smooth-Line or Curved-Line Charts.
<!-- index.html -->
{% load static %}
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light1",
exportEnabled: true,
title:{
text: "Percentage of Internet Users - India",
fontFamily: "Arial"
},
axisY: {
suffix: "%"
},
data: [
{
type: "spline",
markerSize: 0,
yValueFormatString: "#,##0.0#'%'",
dataPoints: {{ internet_users_india|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):
internet_users_india = [
{ "label": "2000", "y": 0.52753245 },
{ "label": "2001", "y": 0.660146377 },
{ "label": "2002", "y": 1.537875582 },
{ "label": "2003", "y": 1.686489971 },
{ "label": "2004", "y": 1.976136492 },
{ "label": "2005", "y": 2.388075 },
{ "label": "2006", "y": 2.805499865 },
{ "label": "2007", "y": 3.95 },
{ "label": "2008", "y": 4.38 },
{ "label": "2009", "y": 5.12 },
{ "label": "2010", "y": 7.5 },
{ "label": "2011", "y": 10.07 },
{ "label": "2012", "y": 11.1 },
{ "label": "2013", "y": 12.3 },
{ "label": "2014", "y": 13.5 },
{ "label": "2015", "y": 14.9 },
{ "label": "2016", "y": 16.5 },
{ "label": "2017", "y": 18.2 },
{ "label": "2018", "y": 20.08130004 },
{ "label": "2019", "y": 29.4 },
{ "label": "2020", "y": 43 }
]
return render(request, 'index.html', { "internet_users_india" : internet_users_india })
Spline Charts can be customized using various options like lineThickness, lineColor, markerSize & so on. When there are more number of datapoints, you can enable zooming/panning by setting zoomEnabled property to true.