0

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  )

`

Improve this question
3
  • use pygal lib to display dynamic charts on web page Commented Oct 10, 2019 at 6:22
  • already try but, didnt get Commented Oct 10, 2019 at 6:31
  • check out my solution . Commented Oct 10, 2019 at 6:38

1 Answer 1

Reset to default
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

enter image description here

try this once

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.