672
2017雲棲大會·杭州峰會：《在線用戶行為分析：基於流式計算的數據處理及應用》之《數據可視化：構建實時動態運營數據分析大屏》篇
實驗背景介紹
了解更多2017雲棲大會·杭州峰會 TechInsight & Workshop.
本手冊為雲棲大會Workshop之《在線用戶行為分析：基於流式計算的數據處理及應用》場的《數據可視化：構建實時動態運營數據分析大屏》篇所需。主要幫助現場學員熟悉並掌握DataV數據可視化的操作和使用。
實驗涉及大數據產品
前提準備
必備條件：1、已經從雲中沙箱中獲取了實驗所需的阿裏雲賬號和密碼。2、安裝56版本以上的GOOGLE CHROME瀏覽器。
實驗目標
本實驗將會實現如下的**實時動態運營數據分析大屏**大屏。
創建可視化大屏
經過上述《流數據處理：通過StreamSQL分析視頻日誌》章節創建的流式任務，我們可以創建酷炫的可視化大屏展示網站實時流量統計情況，為了便於大家快速掌握DataV的使用，請使用事先準備好的RDS數據源。
進入DataV管理控製台
點擊進入DataV可視化管理控製台。
添加數據源
- step1：進入DataV管理控製台，點擊左側菜單中**我的數據**。
- step2：點擊**+添加數據**，跳出新建數據對話框。
- step3：配置數據類型為RDS for MySQL、名稱、域名、用戶名/密碼、端口和數據庫，點擊“獲取數據列表”，選擇“workshop”，並點擊**測試連接**，最後點擊“完成”。
具體數據源配置項如下：
- 數據源類型：RDS for MySQL,內網，華東2
- 名稱：workshop_rds
- 域名：rm-uf6t1mym355i3qdsw.mysql.rds.aliyuncs.com
- 用戶名：root
- 密碼：Workshop001
- 端口：3306
- 數據庫：workshop
創建DataV可視化大屏
- step1：點擊左側**我的可視化**，進入配置大屏操作；再點擊**2017_WORKSHOP_HZ**進入大屏編輯界麵。
- step2：此處大屏模板為此次Workshop量身定製，大家直接進入配置界麵即可。DATAV功能布局見圖示。
配置DataV數據圖表
依次配置**實時在線人數（數字翻牌器）**、**熱門房間排名（輪播列表柱狀圖）**、**在線人數變化趨勢（折線圖）**、**用戶卡頓率趨勢（折線圖）**、**訪問設備比例（餅圖）**、**用戶故障地理分布（點熱力圖）**。
配置實時在線人數（數字翻牌器）
- step1：點擊數字翻牌器，進入配置**實時在線人數（數字翻牌器）**頁麵。
- step2：點擊數字翻牌器左側“數據“選項卡，進入數據配置麵板。
數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。
因為數據表包含了多條數據，需要獲取最新的在線人數數據，故編寫SQL如下：
附：SQL說明
SELECT
sum(count_value) as value
FROM online_num
配置熱門房間排名（輪播列表柱狀圖）
點擊輪播列表在右側進行配置數據。統一選擇數據類型為**數據庫**，且選擇數據庫為之前所配置的workshop_rds。
附：SQL說明
SELECT * FROM
(SELECT count_value as value, roomid as content
FROM hot_room_num limit 500) as temptable
order by value DESC
limit 5
配置在線人數變化趨勢（折線圖）
- step1：同樣點擊在線人數變化趨勢（折線圖），進入數據配置頁麵。
- step2：配置數據源。
數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。
附：SQL說明
SELECT
count_value as y,
substring(start_time, 1, 19) as x
FROM online_num
order by start_time DESC
limit 10
配置用戶卡頓率變化趨勢（折線圖）
- step1：同樣點擊用戶卡頓率變化趨勢（折線圖），進入數據配置頁麵。
- step2：配置數據源。
數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。
附：SQL說明
SELECT
block as y,
substring(start_time, 1, 19) as x
FROM block_min
order by start_time DESC
limit 10
配置訪問設備比例（餅圖）
step1：同樣點擊配置訪問設備比例（餅圖），進入數據配置頁麵。
-
step2：配置數據源。
數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。
編寫SQL如下：
附：SQL說明
SELECT
count_value as value,
agent as type,
max(start_time) as date_time
FROM access_device
group by agent
配置播放故障率（點熱力圖）
step1：點擊地圖組件，再選擇點熱力圖層子組件。
-
step2：進入數據配置頁麵，配置數據源。
數據類型選擇**數據庫**，選擇數據庫為**workshop_rds**（剛創建的數據源名稱）在SQL底部勾選**自動更新**，設置每5秒請求一次。
我們需要的數據包括經度、緯度和故障率，但是原始數據中，經度、緯度在一個字段中，且該字段包含空數據等髒數據；同時，故障率為0的數據我們不需要，因為對繪製熱力圖不起作用。這就需要我們用DATAV數據過濾器處理。先用SQL查詢10000條數據，保證充足的數據量進行下一步過濾。
附：SQL說明
SELECT * FROM region_failure_rate limit 10000
- step3.1 添加數據過濾器
- step3.2 將新建數據過濾器命名為“getVideoFaultValue”
step3.3 編寫數據過濾器
-
step3.4 選擇應用數據過濾器“getVideoFaultValue”
附：數據過濾器代碼說明
var processedData = [];
data.forEach(function(d, i) {
if(d.remoteip && +d.fault_video > 0) {
var dataObj = {};
var latLngArray = d.remoteip.split(',');
dataObj.lat = latLngArray[0];
dataObj.lng = latLngArray[1];
dataObj.value = +d.fault_video;
processedData.push(dataObj);
}
})
return processedData;
至此我們對所有組件的數據都已經配置完成。
預覽大屏
- 點擊右上角**預覽**，查看大屏效果，會看到數據實時的刷新。
發布大屏
通過發布操作可以將製作好的大屏分享別人查看。
- step1：點擊右上角**發布**，彈出發布對話框，打開發布按鈕會生成鏈接。
複製生成的URL即可共享你的大屏作品，觀看製作的流式數據大屏。其他驗證密碼、驗證Token可以參考更多教程來完成，此處將不贅述。
到此為止，相信大家一定程度掌握了阿裏雲流式日誌的分析及處理解決方案有了一定了解，包括Log、StreamCompute到最後的DataV大屏展示。更多內容請大家持續關注文章的更新和後續的workshop內容出品。
最後更新：2017-10-09 10:33:52