IT Blog

  • Blog
  • Technology
    • Technology
    • Architecture
    • CMS
    • CRM
    • Web
    • DotNET
    • Python
    • Database
    • BI
    • Program Language
  • Users
    • Login
    • Register
    • Forgot Password?
  • ENEN
    • 中文中文
    • ENEN
Experience IT
In a World of Technology, People Make the Difference.
  1. Home
  2. Technology
  3. Program Language
  4. Python
  5. Data visualization with Flask

Data visualization with Flask

2020-09-13 936 Views 0 Like 0 Comments

Table of Contents

  • install Flask
  • Get Template
  • Writing code
    • Idea:
    • 1. Passing data from python to template through javascript.
    • 2. In template html file
    • 3. In chart js configuration file:
  • Result

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]},

Result

 3,917 total views,  4 views today

error
fb-share-icon
Tweet
fb-share-icon
IT Team
Author: IT Team

Tags: None
Last updated:2020-09-13

IT Team

This person is lazy and left nothing

Like
< Previous
Next >

Comments

Cancel reply
Chinese (Simplified) Chinese (Simplified) Chinese (Traditional) Chinese (Traditional) English English French French German German Japanese Japanese Korean Korean Russian Russian
Newest Hotspots Random
Newest Hotspots Random
Rich editor not working Making web page scroll down automatically Getting data from Dapper result All Unicode Chars How to keep and display contact form 7 data Common Regular Expressions
How to do some trick to improve WordPress performance Fix checkbox symbol Rich editor not working Crawling images from web with PHP SQL Server export data - 5 ways SQL Server Database Backup - 3 Methods
Categories
  • Architecture
  • BI
  • C#
  • CSS
  • Database
  • DotNET
  • Hosting
  • HTML
  • JavaScript
  • PHP
  • Program Language
  • Python
  • Security
  • SEO
  • Technology
  • Web
  • Wordpress

COPYRIGHT © 2021 Hostlike IT Blog. All rights reserved.

This site is supported by Hostlike.com