本來只是想在Heroku上做的雲端應用，做IOT的資料庫
但資料不表現出來又覺得有所不足，就這樣越陷越深…
想把後台的資料顯非到網頁上，當然在前端的JS就需要進行畫圖的工作
這邊我找到的jquery進一步提供的套件flot
http://www.flotcharts.org/
一開始當然是看demo比較快囉
由\flot\examples\basic-usage 可以了解基本的線怎麼畫，怎麼看code就是個人造化了，有這樣的基本線索和jquery的基礎應該是不成問題的~
以下是我改的一個範例，當然要把相關js的位置配置好才行：
首先，「js/flot/jquery.min.js」、「js/flot/jquery.flot.min.js」，「css/examples.css」要先依路徑放上來才行
這樣開啟網頁就會出現隨機繪製的折線圖，大功造成!!
下一次就是把他變成動態的!! 雖然知道flot有範例，但這邊先不看，依對js的理解先寫寫看，試出來了，有時間再看看別人的是不是比較好!
當然!! 最後的最後，是要把他放到heroku上才行，並且要能和後台的python互動才行!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Basic Usage</title>
<link href="css/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/flot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.min.js"></script>
<!-- the way for static but no route
<link href="{{url_for('static', filename='css/examples.css') }}" rel="stylesheet" type="text/css">
<script type=text/javascript src="{{url_for('static', filename='js/flot/jquery.js') }}"></script>
<script type=text/javascript src="{{url_for('static', filename='js/flot/jquery.flot.min.js') }}"></script>
-->
<script type="text/javascript">
$(function() {
// plot chart2
var data = [];
var now = new Date().getTime();
for (var i=0; i<50; i++)//while (data.length < totalPoints)
{
var yData = Math.random() * 100;
var temp = [i, yData];
//var temp = [now += 60, yData];
data.push(temp);
}
$.plot("#myplace1", [data]);
});
</script>
</head>
<body>
<div id="header">
<h2>Plot Demo</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="myplace1" class="demo-placeholder"></div>
</div>
</div>
</body>
</html>
沒有留言:
張貼留言