Data visualization with Flask

Table of Contents

install Flask

pip install flask

Get Template

Writing code

Idea:

Based on the proper visualization template, feed data from python program to the template, then render the result in the template.

1. Passing data from python to template through javascript.

In Python file:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def root():
divdata = '草莓,乌梅,蓝莓,红莓,白梅,话梅,绿莓';
areadata = '555,666,777';
    return render_template('bigdata.html',
                          divdata=divdata,
                         areadata=areadata,
                         ...
                         )

if __name__ == '__main__':
app.run(debug=True)

2. In template html file

Render data as an html element, using js to convert it into js varaibles.

<div id='divdata' style="display:none">{{ divdata }}</div>
<div id='areadata' style="display:none">{{ areadata }}</div>
<script>
    var divdata = document.getElementById('divdata').innerText;
    var datadiv = divdata.split(',');
    var areadata = document.getElementById('areadata').innerText;
    var dataarea = areadata.split(',');
</script>

3. In chart js configuration file:

//initialize echarts, and configure the chart
var myChart = echarts.init(document.getElementById('echart1'));

option = {
       ...
    xAxis: [{
    type: 'category',
    data: datadiv,
    axisLine: {

var data = [
{ name: '海门', value: dataarea[0]},
{ name: '鄂尔多斯', value: dataarea[1]},
{ name: '招远', value: dataarea[2]},
{ name: '舟山', value: dataarea[3]},