NVD3 Chart won't render

19 views
Skip to first unread message

Juglaz

unread,
Oct 12, 2017, 8:51:07 PM10/12/17
to Django users
Hi there,

I'm having trouble getting my nvd3 pie chart to render.

I'm using a template tag (simple tag) to return the data required to construct the pie chart.

Already verified:
  • All static files are loading
  • The template tag is passing the correct dictionary to the template
  • All templates are loading
  • No errors
  • The chart appears to be loading in the source code header

color-id.html (template for just the pie chart)
{% load static %}
<link media="all" href="{% static 'nvd3/build/nv.d3.css' %}" type="text/css" rel="stylesheet" />
<script type="text/javascript" src='{% static 'd3/d3.min.js' %}'></script>
<script type="text/javascript" src='{% static 'nvd3/build/nv.d3.min.js' %}'></script>

{% load nvd3_tags %}
{% load basic_deck_stats %}
<head>
    {% include_chart_jscss %}
    {% color_id deck as data %}
    {% load_chart data.charttype data.chartdata data.chartcontainer data.extra %}
</head>
<body>
    <h3>Color Identity</h3>
    {% include_container "asdf" 400 400 %}        
    charttype: {{ data.charttype }}<br>
    chartdata: {{ data.chartdata }}<br>
    chartcontainer: {{ data.chartcontainer }}<br>
    extra: {{ data.extra }}
</body>

basic_deck_stats.py (template tag)
from django import template
from card_search.views import Card, Deck, Quantity
from django.shortcuts import render_to_response

register = template.Library()

@register.simple_tag
def color_id(deck):
    black=blue=red=white=green = 0
    queryset = Quantity.objects.filter(deck__deck_name=deck.deck_name).all()

    for item in queryset:
        if item.card.mana_cost:
            black += item.card.mana_cost.count("{B}") * item.qty
            blue += item.card.mana_cost.count("{U}") * item.qty
            red += item.card.mana_cost.count("{R}") * item.qty
            white += item.card.mana_cost.count("{W}") * item.qty
            green += item.card.mana_cost.count("{G}") * item.qty

    xdata = ["Black", "Blue", "Red", "White", "Green"]
    ydata = [black, blue, red, white, green]
    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 data

Then I'm calling the pie chart template from the deck.html template
{% include "../charts/color-id.html" %}

Hope that's enough detail.
Any help would be much appreciated!

- Alex
Reply all
Reply to author
Forward
0 new messages