如何在Flask中使用Flot图表?

时间:2015-09-29 10:33:29

标签: python flask flot flask-sqlalchemy

我在Flask中有一个SQLAlchemy模型,它包含一系列时间戳和值。我想使用这些数据中的Flot图表绘制图表,但无法找到有关如何执行此操作的任何信息。

class Reading(database.Model):
    __tablename__= 'Readings'
    index = database.Column('id', database.Integer, primary_key = True)
    timestamp = database.Column('Timestamp', database.DateTime)
    value = database.Column('Value', database.Float)

我知道如何在Flask应用中获取数据以及如何在html中使用Flot图表,但不知道如何连接这两个。

1 个答案:

答案 0 :(得分:3)

您需要将时间戳转换为毫秒,除此之外,使用flot绘制图表非常容易。您只需创建一个数据点列表[[timestamp1, value1], [timestamp2, value2], ...]并将其与render_template一起传递。希望以下示例可以帮助您。

def request_graph_data():
   data = [[0, 3], [4, 5], [8, 1], [9, 3]]    
   return flask.render_template("graph.html",
                                 list_of_data=data)  


<script type="text/javascript">
   $(function() {
       var d1 = {{ list_of_data }};

       var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

       // A null signifies separate line segments
       var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

       $.plot("#placeholder", [ d1, d2, d3 ]);
    });
</script>

<div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
</div>