Multiple Fusioncharts On Same Page With Django

I am trying to build a dashboard type site with multiple charts. I am using Django with FusionCharts and a Postregsql database backend. I am able to get one chart to render, but

Solution 1:

I ended up figuring it out. It turns out there were a boatload of problems in the previous code. I figured I'd post it as a reference for someone having the same question in the future. The code that is working is as follows:

views.py

from django.shortcuts import render
from django.http import HttpResponse


# Include the `fusioncharts.py` file that contains functions to embed the charts.from .fusioncharts import FusionCharts

from .models import *

# The `chart` function is defined to load data from a `Country` Model.# This data will be converted to JSON and the chart will be rendered.defchart(request):
    # Customer
    dataSource = {}
    dataSource['chart'] = {
        "caption": "Final Sale Price by Customer",
        "showValues": "0",
        "theme": "carbon"
        }
    dataSource['data'] = []

    for key in Customer.objects.all():
      data = {}
      data['label'] = key.customername
      data['value'] = key.Final_Price
      dataSource['data'].append(data)

    plantdataSource = {}
    plantdataSource['chart'] = {
        "caption": "Final Sale Price by Plant",
        "showValues": "0",
        "theme": "carbon"
    }
    plantdataSource['data'] = []

    for key in Plant.objects.all():
      data = {}
      data['label'] = key.site
      data['value'] = key.Final_Price
      plantdataSource['data'].append(data)

    colchart = FusionCharts("column2D", "ex1", "1000", "350", "chart-1", "json", dataSource)
    plantchart = FusionCharts("column2D", "ex2", "1000", "350", "chart-2", "json", plantdataSource)

    return render(request, 'dashboard.html', {'output': colchart.render(), 'output2': plantchart.render()})

dashboard.html

{% extends"index.html" %}
{% load static %}

{% block title %}{{title}}{% endblock title %}

{% block sidenav %}
    {% for page in page_list %}
    <li>
        <ahref="{{page.permalink}}">{{page.title}}</a>
    </li>
    {% endfor %}
{% endblock sidenav %}
{% block content %}
{% autoescape off %}
{{ content }}
{% endautoescape %}
<p>
<table><tr><th>Customer</th><th>Plant</th></tr><tr><td><divid="chart-1">{{ output|safe }}</div></td><td><divid="chart-2">{{ output2|safe }}</div></td></tr></table>Page last Update: {{last_updated|date:'D d F Y' }}
</p>
{% endblock content %}

Solution 2:

You can just split the screen in HTML, and it will work as below

{{ chartTitle|safe }}

<divstyle="width: 100%; overflow:auto;"><divstyle="float:left; width: 50%"><divid="chart-1"style="width: 50%;flaot: left;">{{ output|safe }}</div></div><divstyle="float:right; width: 50%"><divid="chart-2">{{ pie_output|safe }}</div></div></div><br/>