2017云栖大会·杭州峰会：《在线用户行为分析：基于流式计算的数据处理及应用》之《数据可视化：构建实时动态运营数据分析大屏》篇

点击有惊喜

实验背景介绍

了解更多2017云栖大会·杭州峰会 TechInsight & Workshop.

本手册为云栖大会Workshop之《在线用户行为分析：基于流式计算的数据处理及应用》场的《数据可视化：构建实时动态运营数据分析大屏》篇所需。主要帮助现场学员熟悉并掌握DataV数据可视化的操作和使用。

实验涉及大数据产品

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 sum(count_value) as value, roomid as content
FROM hot_room_num
where
start_time < unix_timestamp()*1000
and start_time > (unix_timestamp()-100)*1000
group by content
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
sum(count_value) as value,
agent as type,
max(start_time) as date_time
FROM access_device
where
start_time < unix_timestamp()*1000
and start_time > (unix_timestamp()-100)*1000
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内容出品。

点击有惊喜