How to draw donut chart with Django-nvd3

Question

I am using django-nvd3 as a visualization library,they offer a limited number of supported charts. Is there any way to customize the PieChart offered in the doc,to be a donut chart.

def statistics(request):
context=RequestContext(request)


xdata = ["Apple", "Apricot", "Avocado", "Banana", "Boysenberries", "Blueberries", "Dates", "Grapefruit", "Kiwi", "Lemon"]
ydata = [52, 48, 160, 94, 75, 71, 490, 82, 46, 17]
chartdata = {'x': xdata, 'y': ydata}
charttype = "pieChart"
chartcontainer = 'piechart_container'
data = {
    'charttype': charttype,
    'chartdata': chartdata,
    'chartcontainer': chartcontainer,
    'extra': {
        'x_is_date': False,
        'x_axis_format': '',
        'tag_script_js': True,
        'jquery_on_ready': False,
    }
}
return render_to_response('App/statistics.html',data)

I can change the size of the chart by setting it this way:

{% include_container chartcontainer 426 400 %}

Lewis Roberts · Answer 1 · 2015-09-13T13:15:56.423

Only just stumbled across this problem myself. So better late than never...

I just looked at the code differences of the JS for donut vs normal (found here) and noticed 4 settings extra.

'labelThreshold':0.5,
'labelType':'percent',
'donut':True,
'donutRatio':0.35

So I put them into the "extra" section of data and that seemed to work.

Edit: I noticed that the label settings weren't taking affect. After glancing at the page source code a few times, and nvd3_tags.py, I realised that you need to quote the labelType and embed them in another dictionary called chart_attr. See below.

def statistics(request):
    context=RequestContext(request)

    xdata = ["Apple", "Apricot", "Avocado", "Banana", "Boysenberries", "Blueberries", "Dates", "Grapefruit", "Kiwi", "Lemon"]
    ydata = [52, 48, 160, 94, 75, 71, 490, 82, 46, 17]
    chartdata = {'x': xdata, 'y': ydata}
    charttype = "pieChart"
    chartcontainer = 'piechart_container'
    data = {
        'charttype': charttype,
        'chartdata': chartdata,
        'chartcontainer': chartcontainer,
        'extra': {
            'x_is_date': False,
            'x_axis_format': '',
            'tag_script_js': True,
            'jquery_on_ready': False,
            'donut':True,
            'donutRatio':0.35,
            'chart_attr':{
                 'labelThreshold':0.5,
                 'labelType':'\"percent\"',
            }
        }
    }
    return render_to_response('App/statistics.html',data)

How to draw donut chart with Django-nvd3

1 Answers1