Thursday, October 12, 2017

NVD3 Chart won't render

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

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/00d6ce96-f088-416a-a908-ee06a0c092dd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment