jChaart - Web 仪表板框架
5.00/5 (2投票s)
一个纯Javascript、基于Web的仪表板库，您可以使用它来创建引人注目的图表，显示应用程序的交易统计信息、服务器CPU、内存、IO图等。它提供了将不同类型的分隔文本文件转换为图表的库。
引言
一个纯Javascript、基于Web的仪表板库，您可以使用它来创建引人注目的图表，显示应用程序的交易统计信息、服务器CPU、内存、IO图等。它提供了将不同类型的分隔文本文件转换为图表的库。这些分隔文件由各种来源生成，例如对数据库运行SQL查询，或运行shell脚本收集系统统计信息，或运行Powershell脚本处理IIS日志。最终结果是一个外观漂亮的、由Twitter Bootstrap驱动的响应式Web仪表板，您可以快速在任何平台上启动并运行。由于它是HTML和Javascript，您可以自定义它以完全按照您想要的方式显示您想要的内容。非常适合获得好评并吸引您的客户。
工作原理
首先，使用 Twitter Bootstrap 模板定义图表容器的HTML。例如，这是前两个图表的HTML片段。
<div class="container">
<h2>Online Order System</h2>
<div class="row">
<div class="col-md-8">
<div class="panel panel-success">
<div class="panel-heading">Hourly Order Stats</div>
<div class="panel-body panel-body-height">
<div class="chart-container">
<div id="OnlineOrderWeekComparison" class="chart-placeholder"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-success">
<div class="panel-heading">Orders Source</div>
<div class="panel-body panel-body-height">
<div class="chart-container">
<div id="OnlineOrderSourceCount" class="chart-placeholder"></div>
</div>
</div>
</div>
</div>
</div>
然后，以下Javascript负责通过读取数据文件来渲染图表。
jChaart.build({ id: '#OnlineOrderWeekComparison', urls: "data/transactions/Online_week_comparison.txt" });
jChaart.build({ id: '#OnlineOrderSourceCount', urls: "data/transactions/OnlineOrders.txt", style: jChaart.GraphStyles.pieChart });
就是这样！Twitter Bootstrap负责所有响应式的东西。FlotChart负责跨浏览器图表渲染。jChaart提供了使这两者协同工作的库，解析分隔文本文件，并以精美的外观和感觉呈现图表。
数据文件的格式如下：
01:00|Inflight|55|blue
01:00|Success|34|green
01:00|Failure|2|red
02:00|Inflight|60|blue
02:00|Success|20|green
02:00|Failure|20|red
这是一个管道分隔的文件。第一个是x轴名称。第二个是图表中线条/条形/饼图的标签。第三个是y轴的值，第四个是线条/条形/饼图的颜色名称。
午夜时分，您会开始一个新文件，每小时或每分钟向其中添加数据。文件更新后，将其传输到一个位置，以便Javascript库可以通过AJAX加载它。
您还可以通过aggregate函数将数据聚合到类似每日摘要的图表中。
jChaart.aggregate({ id: '#Chart2', urls: "data/transactions/OnlineHourlyOrderCount.txt", style: jChaart.GraphStyles.barChart });
它将通过对整个文件中的所有Failure、Inflight、Success求和来生成一个条形图。
特点
jChaart提供了多种方式来自定义您想要解析数据文件的方式。您可以定义自定义函数来解析x轴、y轴、颜色等。您可以根据文件中的数据动态计算颜色。您可以限制x轴值的最大数量、要从文件中处理的最大行数、覆盖预定义的样式等。
例如，假设您想生成CPU、IO、磁盘统计信息。您可以使用流行的Unix sar命令来生成系统统计信息。它将以这种格式生成数据：
15:15|22.02|75.73|0.90
15:16|23.04|75.62|0.22
15:17|0.81|5.15|62.87
15:18|0.00|4.71|60.99
15:19|0.00|0.75|0.00
15:20|0.25|1.00|0.00
15:21|0.50|1.00|0.00
15:22|0.25|0.50|0.00
15:23|0.25|0.75|0.00
15:24|0.00|1.27|0.00
这是一个完全不同的格式。但您仍然可以轻松地解析此文件并使用此脚本生成图表：
jChaart.build({ id:'#CPUGraph', urls:["data/server/omar-ubuntu_cpu.txt"], seriesNames: ['Ubuntu'], valueIndex:1, color: 'black', style:jChaart.GraphStyles.lineChart_filled });
在这里，您指定y轴值是每行中的第二个项目，并且线条的颜色将是黑色。此外，第一个文件的系列名称是“Ubuntu”。是的，您也可以指定多个文件来覆盖在单个图表上！
借助sar和iostat，您可以快速构建一个非常出色的服务器监视仪表板：
部署
Web仪表板托管在Web服务器上，可以是任何平台（Linux或Windows）。您只需要以某种方式将“data”文件夹暴露给其他服务器，这些服务器将文本文件推送到该文件夹。Javascript使用AJAX加载文本文件，然后生成一个对象模型，并使用 FlotChart 来生成图表。
生成数据文件
jChaart可以解析分隔文本文件并渲染图表。为了生成文件，您需要在应用程序或数据库服务器上设置一些计划任务或cron任务。这里有一些关于如何实现的建议：
用于在cron中设置的示例shell脚本
这是一个通用的shell脚本，您可以用来生成文本文件。您可以设置一个cron任务，例如每10分钟或每小时运行一次。
# This is the file that you will upload
filename=filefordashboard.txt
# If file exists and we are on a new day, create new file
if [ -f $filename ]; then
day=`date +%d -r $filename`
today=`date +%d`
if (($day == $today))
then
# same day, just append data
echo "Same day just add more data" > /dev/null
else
# new day, new beginning
echo "Create new file" > /dev/null
cp $filename $filename.$day
cp /dev/null $filename
fi;
fi;
# Do your thing and append data to the file
echo "Appending data" >> $filename
# upload the file to the dashboard
cp $filename /var/www/dashboard/data/
生成文件后，您需要将文件传输到Web仪表板上的“data”文件夹。您可以使用FTP、SFTP、网络共享复制，任何您喜欢的方式。
运行SQL查询生成数据文件
以下是一个SQL查询示例，您可以通过SQLPlus运行它以获取oracle中的数据，并将其格式化为上述适合的格式。假设有一个名为Orders的表，其中有一个created列用于保存订单创建日期。Status列保存订单的状态。现在，我们想获取今天与上周同一天的Success和Failure。以下是一个Oracle脚本示例：
订单统计：今天 vs 上一天（Oracle）
-- These options are necessary to correctly format the output
set colsep |
set pagesize 0
set trimspool on
set headsep off
set linesize 80
set numw 20
set echo off
set feedback off
set sqlprompt ''
-- This is the output file, which needs to be FTP'd
spool xxx_order_stats.txt
select
Axis,
Label,
NVL(SUM(Value),0) as Value,
case Label
when 'Success' then 'green'
when 'Failed' then 'brown'
when 'Last week Success' then 'lightgreen'
when 'Last week Failed' then 'red'
end as Color
FROM
(
select
-- First column is the hour of the day, eg 08:00
-- 'created' is the date column
TO_CHAR(created, 'HH24') || ':00' as Axis,
-- Second column is the label, like Success, Failed
-- 'status' is the order status column
case status
when 'failed' then 'Failed'
when 'succeeded' then 'Success'
end as Label,
-- Third colum is the value for success
nvl(count(*),0) as value
-- This is where you add your application specific conditions to
-- select rows from today midnight.
-- 'orders' is the table which holds orders
from orders
where
-- Condition to select rows since today midnight
created >= trunc(sysdate) and created < trunc(sysdate+1)
group by
-- This one groups by the hour of the day and order status
TO_CHAR(created, 'HH24'), Status
UNION
-- The above query is copied and pasted to get last week same day's status
select
-- First axis is hour of the day, eg 08:00
TO_CHAR(created, 'HH24') || ':00' as Axis,
-- Second is 'Last Week Success', 'Last Week failure'
'Last week ' || case status
when 'failed' then 'Failed'
when 'succeeded' then 'Success'
end as Label,
nvl(count(*),0) as value
-- Application specific condition to get orders from last week
from orders
where
-- Get rows from last week same day, between sysdate-7 and sysdate-6
created >= trunc(sysdate-7) and created < trunc(sysdate-6)
group by
TO_CHAR(created, 'HH24'), status
)
GROUP BY Axis, Label
order by 1,2
/
spool off
quit
按小时统计订单（SQL Server）
SET NOCOUNT ON
;WITH Status_CTE (Axis, Label, Value, Color)
AS
(
SELECT
-- This gives the hour of the day, eg 08:00
convert(nvarchar,DATEPART(hour,GetDate()),2)+':'+
Right('00' + convert(nvarchar,DATEPART(minute,GetDate()),2), 2)
AS Axis,
CASE Status
when 4 then 'Completed'
when 5 then 'Failed'
END as Label,
count(*) as Value,
CASE Status
when 4 then 'green'
when 5 then 'yellow'
END as Color
FROM Orders WITH (NOLOCK)
WHERE Created BETWEEN dateadd(DAY,0, datediff(day,0, GETDATE())) AND dateadd(DAY,1, datediff(day,0, GETDATE()))
GROUP BY Status
)
SELECT
Axis,
Label,
SUM(Value) as Value,
Color
FROM Status_CTE
GROUP BY Axis, Label, Color;
从命令行运行SQL查询
对于Unix，您可以使用以下命令在数据库上运行查询，并将输出生成到文本文件中。
sqlplus -L -S user/pass@(description=(address_list=(address=(protocol=TCP)(host=hostname.bt.com)(port=63447)))(connect_data=(service_name=service))) @xxxx_stats.sql
同样，对于SQL Server，您可以使用这些参数运行它来生成适合格式的数据文件：
sqlcmd -S hostname.bt.com -U user -P pass -d dbname -i .\xxxx_stats.sql -h-1 -s"|" -w 700 -W -o xxxx_stats.txt
如果您从Powershell运行命令，则需要使用此格式：
cmd /c "sqlcmd -S hostname.bt.com -U user -P pass -d dbname -i .\xxxx_stats.sql -h-1 -s""|"" -w 700 -W -o xxxx_stats.txt"
设置cron
设置ORACLE_HOME、PATH以及从.sql文件所在的文件夹运行脚本有一些技巧。
today=`date +%d-%m-%y`
ORACLE_HOME= ORACLE_HOME=/home/export/oracle/product/11.1.0
export ORACLE_HOME
PATH=$PATH:/usr/sbin:/usr/local/bin:$ORACLE_HOME/bin;
export PATH
# This is important, go to the folder where the script file is
cd /home/myuser
sqlplus -s username/password@service_name @xxxx_stats_query.sql
# The output is spooled to the file specified inside the script
cp xxxx_order_stats.txt /var/www/dashboard/data/
设置Windows任务
首先创建一个包含所有命令的批处理文件，并手动运行该批处理文件以确保其正常工作。然后，在任务计划程序中创建一个任务，使用SYSTEM用户以避免权限问题。在设置触发器时，必须将“启动目录”设置为批处理文件、sql文件和文本文件所在的文件夹。另外，请确保批处理文件中的第一行设置了完整的Path。
set Path=C:\Program Files\Microsoft SQL Server\100\Tools\Binn;C:\oracle\instantclient_12_1
sqlcmd -S hostname -U user -P pass -d database -i .\xxxx_orders.sql -h-1 -s""|"" -w 700 -W -o .\xxx_orders.txt结论
使用jChaat库，您可以快速构建自己的完全可定制的仪表板，其中包含您想要查看的内容。您无需处理部署昂贵、复杂的监视和报告软件。无需处理在每个服务器上部署代理以收集数据并推送到中央服务器。无需担心代理失控导致服务中断。您可以完全控制如何获取数据以及如何显示数据。