Bdtjtk

I have a python file which plots graphs. I want to import that file to web-page which I want to make. Which tool will be better to make that web-page. It should be like, when i press some button the graph appears in a div or Iframe or another popup page.

The following code create a graph. I want to show the graph in website

import pandas as pd



import dateutil



def gen(file,data):



    lists = pd.read_csv(file)    



    lists['obstime'] = lists['obstime'].apply(dateutil.parser.parse, dayfirst=True)



    lists = lists[lists[data] > -273]



    daily_avg_temp = lists.set_index('obstime').groupby(pd.Grouper(freq='D'))[data].mean()



    monthly_avg_temp = daily_avg_temp.groupby(pd.Grouper(freq='M')).mean()

    monthly_avg_temp.plot()



gen(file_name,d)

You can save the plot in a file-like BytesIO stream, then using send_file function from flask you can send it to the client to be rendered.

from io import BytesIO



import pandas as pd

from flask import Flask, send_file



@app.route('/plot')

def plot():

    # your pandas code goes here ...



    plot = df.plot()

    stream = BytesIO()

    plot.figure.savefig(stream)

    stream.seek(0)

    return send_file(stream, mimetype='image/png')



app.run(debug=True, port=8000)

I'm not sure if this is the best way to display a graph on a webpage, but I'd use a javascript charting library like Chart.js to plot your data. The chart would be responsive and dynamic: a simple button press with an AJAX request would change the plot.

For example, you could plot monthly transactions like so (here I use Jinja 2 to get the data):

HTML

<div class="card border-primary">

  <div class="card-header">

    <h4 class="card-title text-primary">Monthly transactions</h4>

  </div>

  <div class="card-body">

    <canvas id="transactions-chart" width="600" height="400" aria-label="transactions-chart" role="img"></canvas>

  </div>

</div>

JAVASCRIPT

<script>

// Global parameters:

Chart.defaults.global.responsive = true;



// Define the chart data

var chartDataMonth = {

  labels: [{% for item in days_labels %}"{{ item }}", {% endfor %}],

  datasets: [{

      label: 'Amount paid',

      fill: false,

      backgroundColor: "#dc3545",

      borderColor: "#dc3545",

      data: [{% for item in paid_this_month %}{{ '%0.2f'| format(item|float) }}, {% endfor %}],

  },

  {

      label: 'Amount topped up',

      fill: false,

      backgroundColor: "#007bff",

      borderColor: "#007bff",

      data: [{% for item in topped_this_month %}{{ '%0.2f'| format(item|float) }}, {% endfor %}],

  }]

};



// Get chart canvas

var ctx = document.querySelector('#transactions-chart').getContext('2d');

// Create the chart using the chart canvas

var transactionsChart = new Chart(ctx, {

  type: 'line',

  data: chartDataMonth,

  options: {

    responsive: true,

    maintainAspectRatio: false,

    tooltips: {

      mode: 'index',

      intersect: false,

      callbacks: {

        label: function(tooltipItems, data) {

          return '€' + tooltipItems.yLabel;

        }

      }

    },

    hover: {

      mode: 'nearest',

      intersect: true

    },

    scales: {

      xAxes: [{

        display: true,

        scaleLabel: {

          display: true,

          labelString: 'Day'

        }

      }],

      yAxes: [{

        display: true,

        scaleLabel: {

          display: true,

          labelString: 'Amount'

        },

        ticks: {

          // Include a euro sign in the ticks

          callback: function(value, index, values) {

            return '€' + value;

          }

        }

      }]

    }

  }

});

</script>