javascript - How to draw donut chart with Django-nvd3 -


i using django-nvd3 visualization library,they offer limited number of supported charts. there way customize piechart offered in doc,to 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 size of chart setting way:

{% include_container chartcontainer 426 400 %} 

only stumbled across problem myself. better late never...

i looked @ code differences of js donut vs normal (found here) , noticed 4 settings extra.

'labelthreshold':0.5, 'labeltype':'percent', 'donut':true, 'donutratio':0.35 

so put them "extra" section of data , seemed work.

edit: noticed label settings weren't taking affect. after glancing @ page source code few times, , nvd3_tags.py, realised need quote labeltype , embed them in 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) 

Comments