CODEWITHSUNDEEP
pythonhtmlpandasflaskchart.js
nvachhan
nvachhan

Reputation: 93

How to get multiple elements on a page using flask (tables, pie charts, etc.)

I am trying to get multiple elements to a single page using flask. I am able to do so for the most part with the code below, but unable to get multiple charts. I am using python with chart.js along with pandas for the data. I am also using html and CSS.

Python:

d1 = {'Fruits' : pd.Series([10]),
     'Vegetables' : pd.Series([12]),
     'Drinks' : pd.Series([2])}
df1 = pd.DataFrame(d1)

d2 = {'Fruits' : pd.Series([1]),
     'Vegetables' : pd.Series([18]),
     'Drinks' : pd.Series([21])}
df2 = pd.DataFrame(d2)


labels_1 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_1 = [
    10.0, 20.0, 10.0, 20.0, 20.0, 10.0, 10.0
]

labels_2 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_2 = [
    20.0, 10.0, 20.0, 10.0, 10.0, 20.0, 10.0
]

labels_3 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_3 = [
    30.0, 10.0, 10.0, 10.0, 20.0, 10.0, 10.0
]

colors = [
    "#46BFBD", "#F7464A", "#FDB45C", "#FEDCBA",
    "#ABCDEF", "#DDDDDD", "#ABCABC", "#4169E1",
    "#C71585", "#FF4500", "#FEDCBA", "#46BFBD"]


app = Flask(__name__)
                  

@app.route('/dashboard')
def dashboard():
    return render_template('dashboard.html', title1='Day 1', tables1=[
                                df1.to_html(index=False, classes='dashboard1', header="true")], title2='Day 2', tables2=[
                                df2.to_html(index=False, classes='dashboard2', header="true")],
                                title3='Produce Sold on Monday', max=17000, set=zip(values_1, labels_1, values_2, labels_2, values_3, labels_3, colors),
                                title4='Produce Sold on Tuesday', title5='Produce Sold on Wednesday')


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Produce Records</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style17.css') }}">
<body>
  <center>
    <h1>Fruit Stand Sales</h1>
  </center>
   <center>
    <h2>{{ title1 }}</h2>
  </center>
  <center>
{% for table in tables1 %}
            {{ table|safe }}
{% endfor %}
  </center>
  <center>
    <h2>{{ title2 }}</h2>
  </center>
   <center>
{% for table in tables2 %}
            {{ table|safe }}
{% endfor %}
  </center>
  <center>
    <h1>Produce Solde Breakdown</h1>
  </center>
  <center>
    <h2>{{ title3 }}</h2>
    <canvas id="chart1" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart1").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart1").getContext("2d")).Pie(pieData);
    </script>
    <h2>{{ title4 }}</h2>
    <canvas id="chart2" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart2").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart2").getContext("2d")).Pie(pieData);
    </script>
    <h2>{{ title5 }}</h2>
    <canvas id="chart3" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart3").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart3").getContext("2d")).Pie(pieData);
    </script>
  </center>
</body>
</html>

The error I receive:

{% for item, label, colors in set %} ValueError: too many values to unpack (expected 3)

It looks like I have to alter the HTML to accommodate more than one chart but I am not sure how to do so. Is this the best way to go about doing this? Should I use a different method like matplotlib?

Upvotes: 0

Views: 688

Answers (2)

nvachhan
nvachhan

Reputation: 93

I was able to accomplish this by setting 3 different variables for each graph as 'set' was a key argument and was not able to be replicated. Here is the code I used:

Python:

@app.route('/dashboard')
def dashboard():
    return render_template('dashboard.html', title1='Day 1', tables1=[
                                df1.to_html(index=False, classes='dashboard1', header="true")], title2='Day 2', tables2=[
                                df2.to_html(index=False, classes='dashboard2', header="true")],
                                title3='Produce Sold on Monday', max=17000, set1=zip(values_1, labels_1, colors),
                                title4='Produce Sold on Tuesday', set2=zip(values_2, labels_2, colors),
                                title5='Produce Sold on Wednesday', set3=zip(values_3, labels_3, colors))


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

HTML:

  <center>
    <h1>Produce Solde Breakdown</h1>
  </center>
  <center>
    <h2>{{ title3 }}</h2>
    <canvas id="chart1" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set1 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart1").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart1").getContext("2d")).Pie(pieData);
    </script>
    <h2>{{ title4 }}</h2>
    <canvas id="chart2" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set2 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart2").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart2").getContext("2d")).Pie(pieData);
    </script>
    <h2>{{ title5 }}</h2>
    <canvas id="chart3" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set3 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart3").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart3").getContext("2d")).Pie(pieData);
    </script>

Upvotes: 0

CamiEQ
CamiEQ

Reputation: 771

That error is because your zip object has 7 values to unpack, not 3. If you did {% for a, b, c, d, e, f, g in set %} it should work.

You could also arrange your data like a list of dicts instead, something like:

[{"item": ..., "label": ..., "color": ..., "value": ...}, ...]

that way, you could render them like this (without worrying if you have more keys and you don't wanna render them all):

{% for i in set %}
  {
     value: "{{ i["item"] }}",
     label: "{{ i["label"] }}",
     color: "{{ i["color"] }}"
  },
{% endfor %}

Upvotes: 1

Related Questions