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.