Python Drilldown Charts using Django

Download Python Django Chart Samples

Python Drilldown Charts are used to expand & analyze data in more depth. For example, you can drilldown year to months, month to days & so on. Example shows Drilldown Chart built using Django MVT framework along with source code that you can try out locally.

<!— index.html —>
{% load static %}
<!DOCTYPE HTML>
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
window.onload = function () {
 
var totalVisitors = 883000;
var visitorsData = {
	"New vs Returning Visitors": [{
		click: visitorsChartDrilldownHandler,
		cursor: "pointer",
		explodeOnClick: false,
		innerRadius: "75%",
		legendMarkerType: "square",
		name: "New vs Returning Visitors",
		radius: "100%",
		showInLegend: true,
		startAngle: 90,
		type: "doughnut",
		dataPoints: {{ new_vs_returning_visitors|safe }}
	}],
	"New Visitors": [{
		color: "#DF7970",
		name: "New Visitors",
		type: "column",
		xValueType: "dateTime",
		dataPoints: {{ new_visitors|safe }}
	}],
	"Returning Visitors": [{
		color: "#4C9CA0",
		name: "Returning Visitors",
		type: "column",
		xValueType: "dateTime",
		dataPoints: {{ returning_visitors|safe }}
	}]
};
 
var newVSReturningVisitorsOptions = {
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "New VS Returning Visitors"
	},
	subtitles: [{
		text: "Click on Any Segment to Drilldown",
		backgroundColor: "#4C9CA0",
		fontSize: 16,
		fontColor: "white",
		padding: 5
	}],
	legend: {
		fontFamily: "calibri",
		fontSize: 14,
		itemTextFormatter: function (e) {
			return e.dataPoint.name + ": " + Math.round(e.dataPoint.y / totalVisitors * 100) + "%";
		}
	},
	data: []
};
 
var visitorsDrilldownedChartOptions = {
	animationEnabled: true,
	theme: "light2",
	axisX: {
		labelFontColor: "#717171",
		lineColor: "#a2a2a2",
		tickColor: "#a2a2a2"
	},
	axisY: {
		gridThickness: 0,
		includeZero: false,
		labelFontColor: "#717171",
		lineColor: "#a2a2a2",
		tickColor: "#a2a2a2",
		lineThickness: 1
	},
	data: []
};
 
var chart = new CanvasJS.Chart("chartContainer", newVSReturningVisitorsOptions);
chart.options.data = visitorsData["New vs Returning Visitors"];
chart.render();
 
function visitorsChartDrilldownHandler(e) {
	chart = new CanvasJS.Chart("chartContainer", visitorsDrilldownedChartOptions);
	chart.options.data = visitorsData[e.dataPoint.name];
	chart.options.title = { text: e.dataPoint.name }
	chart.render();
	$("#backButton").toggleClass("invisible");
}
 
$("#backButton").click(function () {
	$(this).toggleClass("invisible");
	chart = new CanvasJS.Chart("chartContainer", newVSReturningVisitorsOptions);
	chart.options.data = visitorsData["New vs Returning Visitors"];
	chart.render();
});
 
}
</script>
<style>
#backButton {
	border-radius: 4px;
	padding: 8px;
	border: none;
	font-size: 16px;
	background-color: #4C9CA0;
	color: white;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
 
.invisible {
	display: none;
}
</style>
</head>
<body>
    <div id="chartContainer" style="height: 360px; width: 100%;"></div>
    <button class="btn invisible" id="backButton">&lt; Back</button>
    <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render

def index(request):
    new_visitors = [
        { "x": 1609439400000, "y": 33000 },
        { "x": 1612117800000, "y": 35960 },
        { "x": 1614537000000, "y": 42160 },
        { "x": 1617215400000, "y": 42240 },
        { "x": 1619807400000, "y": 43200 },
        { "x": 1622485800000, "y": 40600 },
        { "x": 1625077800000, "y": 42560 },
        { "x": 1627756200000, "y": 44280 },
        { "x": 1630434600000, "y": 44800 },
        { "x": 1633026600000, "y": 48720 },
        { "x": 1635705000000, "y": 50840 },
        { "x": 1638297000000, "y": 51600 },
    ]
    returning_visitors = [
        { "x": 1609439400000, "y": 22000 },
        { "x": 1612117800000, "y": 26040 },
        { "x": 1614537000000, "y": 25840 },
        { "x": 1617215400000, "y": 23760 },
        { "x": 1619807400000, "y": 28800 },
        { "x": 1622485800000, "y": 29400 },
        { "x": 1625077800000, "y": 33440 },
        { "x": 1627756200000, "y": 37720 },
        { "x": 1630434600000, "y": 35200 },
        { "x": 1633026600000, "y": 35280 },
        { "x": 1635705000000, "y": 31160 },
        { "x": 1638297000000, "y": 34400 },
    ]
    new_vs_returning_visitors = [
        { "name": "New Visitors", "y": 519960, "color": "#DF7970" },
        { "name": "Returning Visitors", "y": 363040, "color": "#4C9CA0" },
    ]

    return render(request, 'index.html', { "new_visitors" : new_visitors, "returning_visitors": returning_visitors, "new_vs_returning_visitors": new_vs_returning_visitors })

Chart Customizations

Setting explodeOnClick to false disables exploding of datapoint on click. Type of the chart can be changed to 'line', 'column', 'pie', etc. by changing type property in dataseries level. The radius and innerRadius of Doughnut chart can also be customized