Python Range Bar Chart using Django

Download Python Django Chart Samples

Python Range Bar Charts are similar to Range Column Chart except that their x & y axes are swapped. They are also referred to as Floating Bar Charts. Example shows Python Range Bar Chart along with 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 chart = new CanvasJS.Chart("chartContainer", {
      title: {
        text: "Fundamental Frequency Ranges of few Instruments",
        fontFamily: "Arial"
      },
      exportEnabled: true,
      axisY:{
        title: "Frequency",
        suffix: " Hz",
        logarithmic: true
      },
      toolTip: {
        shared: true,
        reversed: true
      },
      data: [{
        type: "rangeBar",
        indexLabel: "{y[#index]} Hz",
        toolTipContent: "<b>{label}</b>: {y[0]} Hz to {y[1]} Hz",
        dataPoints: {{ instrument_frequency_data|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):
    instrument_frequency_data = [
        { "label": "Piano", "y": [28,4186]} ,
        { "label": "Trumpet", "y": [165,988]} ,
        { "label": "Violin", "y": [196,3136]} ,
        { "label": "Acoustic Guitar", "y": [82,1397]} ,
        { "label": "Concert Flute", "y": [262,1976]} ,
        { "label": "4 String Bass Guitar", "y": [41,262]} ,
        { "label": "Electric Guitar", "y": [82,1397] }
    ]

    return render(request, 'index.html', { "instrument_frequency_data" : instrument_frequency_data })

Chart Customizations

Width of bars can be changed using dataPointWidth property. At the same time, minimum & maximum width can be limited by setting dataPointMinWidth & dataPointMaxWidth properties.