How to show graphs from python program to a website?

Question

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)

Biblot · Accepted Answer · 2018-12-28 09:58:53Z

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>

OMar Mohamed · Accepted Answer · 2018-12-28 10:07:24Z

0

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)

answered Dec 28, 2018 at 10:07

OMar Mohamed

3331 gold badge3 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to show graphs from python program to a website?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related