Python Chart with Logarithmic Axis

Download Python Django Chart Samples

Example shows Python Chart with Logarithmic Axis (Log Scale). Logarithmic scale is a non-linear scale often used when analyzing large range of values or while dealing with scientific data. It also includes Django MVT code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="{% static 'canvasjs.min.js' %}"></script>
        <script>
            window.onload = function () {

                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "light2", 
                    animationEnabled: true,
                    title:{
                        text: "Distance of Planets from Sun"
                    },
                    axisY: {
                        title:"Distance from Sun (Million Km)",
                        logarithmic: true,
                        valueFormatString: "#,###,.,.#",
                    },
                    legend:{
                        horizontalAlign: "right"
                    },
                    data: [{
                        type: "bubble",
                        showInLegend: true,
                        legendText: "Size of Bubble Represents Size of the Planet",
                        legendMarkerType: "circle",
                        legendMarkerColor: "grey",
                        yValueFormatString: "#,###,.,.0mn km",
                        toolTipContent: "<b>{label}</b><br/><b>Distance from Sun</b>: {y}<br/> <b>Radius</b>: {z}km",
                        dataPoints: {{ datapoints | safe }}
                    }]
                });
                chart.render();

            }
        </script>
        
    </head>
    <body>
        <div id="chartContainer" style="width: 100%; height: 360px;"></div>
    </body>
</html>                              
from django.shortcuts import render

def index(request):
    datapoints = [
        { "label": "Mercury", "y": 57900000, "z": 2440 },
        { "label": "Venus", "y": 108200000, "z": 6052 },
        { "label": "Earth", "y": 149600000, "z": 6371 },
        { "label": "Mars", "y": 227900000, "z": 3390 },
        { "label": "Jupiter", "y": 778600000, "z": 69911 },
        { "label": "Saturn", "y": 1433500000, "z": 58232 },
        { "label": "Uranus", "y": 2872500000, "z": 25362 },
        { "label": "Neptune", "y": 4495100000, "z": 24622 }
    ]
    return render(request, 'index.html', { "datapoints" : datapoints })

Chart Customizations

Logarithmic base can be changed by setting logarithmBase property. You can use valueFormatString to format axis labels like comma separation, decimal separator, etc. Similarly, you can format numbers shown in tooltip using xValueFormatString, yValueFormatString & zValueFormatString properties.