How to display python charts dynamically visualise in html page using flask framework

Question

pie chart: i expect dynamic visualise , please click and check my charts and how to visualise dynamically . I have created charts dynamically in python where i have to insert in HTML page directly and view the charts dynamically but i am unable to insert in my HTML page

I can show the charts in HTML page as image where i am not able to visualise in dynamic.

I want to know the code in HTML regarding the plots and graphs to be directly inserted in my HTML page from the python code or any other way to visualise the plots and graphs dynamically in User interface`

                    <h6 class="m-1" >Purchase Stats</h6>
                <div>
                                            <img src="{{ pie }}" width="380" height="333"> 
                        
                    </div>
                      
                  

    data=pd.read_csv("sales_data.csv")
    df = pd.DataFrame(data)
    filtered_data=data[['quantity','states_x']]
    filtered_data1=data[['product category']]

    #finding the sales by region
    sales_by_region = df.groupby('states_x').size()
    sales_by_region.head()
    filtered_data.states_x.value_counts()[:14].plot(kind='bar')
    plt.title('Top 15 Statewise Sales')
    plt.xlabel('Region')
    plt.ylabel('Total Sales')

    plt.tight_layout()
    plt.savefig('static/images/bar.png')

### Rendering Plot in Html
##figfile = BytesIO()
#plt.savefig(figfile, format='png')
    bar = os.path.join(app.config['UPLOAD_FOLDER'], 'regionwise_sales.png')
    
    return render_template('index.html',pie = pie  )

`

Answer 1

this my python code

import pygal
from flask import Flask,render_template,request,session
from flask.templating import render_template
from pygal.style import Style
import pandas 


@app.route('/bar_route')   
def bar_route():
    try:

        bar_chart = pygal.Bar()
        bar_chart.title = 'Browser usage evolution (in %)'
        bar_chart.x_labels = map(str, range(2002, 2013))
        bar_chart.add('Firefox', [None, None, 0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
        bar_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
        bar_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
        bar_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
        barchart_data=bar_chart.render_data_uri()
        return render_template('barchart.html',barchart_data=barchart_data)




    except Exception:
        return "error"

and barchart.html code be like :

 {% block content %}
    <!-- Don't forget the "|safe"! -->
    <div id="chart">
       <embed type="image/svg+xml" src= {{ barchart_data|safe }} style="width:50%;height:50%" />
          </div>    
  {% endblock %}

then your web page will be

try this once