jChaart - Web仪表板框架

分享于 

15分钟阅读

Web开发

  繁體

介绍

一个 javascript,可以使用of图表来显示应用程序。服务器。内存。等等 图表的不同类型。 这些分隔的文件是从不同的源生成的,例如对数据库运行SQL查询或者运行 shell 脚本来处理IIS日志。 最终结果是一个好看的Twitter Bootstrap 电源,响应性的Web仪表板,你可以在任何时候在任何平台上运行。 因为它是HTML和 Javascript,你可以定制它来显示你想要的内容,你想要怎样。 非常方便地赢得brownie点和wooing客户。

使用指导

首先,使用 Twitter Bootstrap 模板定义图表容器的html。 例如这里是前两个图表 HTML Fragment:


<code><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>


</code>



接下来的Javascript负责通过读取数据文件来呈现图形:


<code>jChaart.build({ id: '#OnlineOrderWeekComparison', urls: "data/transactions/Online_week_comparison.txt" });


jChaart.build({ id: '#OnlineOrderSourceCount', urls: "data/transactions/OnlineOrders.txt", style: jChaart.GraphStyles.pieChart });


</code>



就是这样Twitter Bootstrap 负责所有的响应。 FlotChart执行 跨浏览器 图表绘制。 jChaart为库提供了这两个工作,分析分隔的文本文件,并且显示了一个良好的图表。

数据文件的格式如下:


<code>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


</code>



这是一个管道分隔的文件。 第一个是 xaxis NAME。 第二,图形上 line/bar/pie的标签。 第三,yaxis的值,第四个是 line/bar/pie.的颜色 NAME

在午夜你开始一个新文件,在每小时或者每分钟向它追加数据。 文件更新后,在javascript库可以使用AJAX加载它的位置传输该文件。

你还可以使用聚合函数将数据聚合到每日汇总类型图表中:


<code>jChaart.aggregate({ id: '#Chart2', urls: "data/transactions/OnlineHourlyOrderCount.txt", style: jChaart.GraphStyles.barChart });


</code>



它将通过总结所有失败。飞行。整个文件中的成功来生成一个条形图。

功能

jChaart提供了多种定制数据文件的方式的方法。 你可以定义自定义函数来解析x 轴。y 轴。颜色 等等,你可以根据文件上的数据动态计算颜色。 可以强制x 轴值的最大数量,从文件处理最大行,重写预定义的样式等等。

例如假设你想要生成一个 CPU。IO。磁盘统计信息。 你可以使用流行的Unix sar命令来生成系统统计信息。 它将以以下格式生成数据:


<code>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


</code>



这是一种完全不同的格式。 但是,你可以轻松解析这里文件并使用这里脚本生成图表:


<code>jChaart.build({ id:'#CPUGraph', urls:["data/server/omar-ubuntu_cpu.txt"], seriesNames: ['Ubuntu'], valueIndex:1, color: 'black', style:jChaart.GraphStyles.lineChart_filled });


</code>



在这里,你指的是y 轴值是每行的2nd 个项目,而行的颜色将是 black。 系列 NAME 是第一个文件的'ubuntu'。 是,你可以指定多个文件,以便在单个图表上重叠 !

借助sar和 iostat,你可以随时构建一个非常出色的服务器监视器仪表板:

部署

Web仪表板托管在一个Web服务器上,在任何平台上- Linux或者 Windows。 你只需要向它的他服务器公开"数据"文件夹,这将会将文本文件推向它的中。 Javascript使用AJAX加载文本文件,然后生成对象模型并使用 FlotChart插件生成图表。

生成数据文件

jChaart可以解析带分隔符的文本文件和绘制图表。 为了生成这些文件,你需要在你的应用程序或者数据库服务器上设置一些计划任务或者 crons。 下面是一些你可以如何做到的想法:

在cron中设置的示例 shell script

下面是一个可以用来生成文本文件的样板 shell script。 你可以设置一个cron来运行这个语句,每 10分钟或者每小时运行一次。


<code># 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/


</code>



生成文件后,你需要将文件传输到Web仪表板上的"数据"文件夹。 你可以使用 FTP,SFTP,网络共享复制任何你喜欢的内容。

运行SQL查询以生成数据文件

下面是一个SQL查询示例,你可以通过SQLPlus运行它以使用合适的格式从oracle获取数据。 假设有一个叫做订单的table,它有一个创建的列来保存订单创建日期。 状态列保存订单的状态。 现在,我们希望获得今天同一周 vs的成功和失败。 以下是Oracle脚本的示例:

订单统计:今天 vs的最后一天( Oracle )


<code>-- 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 上面 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


</code>



按小时排序统计( SQL Server )


<code>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;


</code>



从 命令行 运行SQL查询

对于 Unix,可以使用以下 命令行 对数据库运行查询,并在文本文件中生成输出。


<code>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


</code>



同样,对于 SQL Server,你可以使用这些参数运行它,以适当的格式生成数据文件:


<code>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


</code>



如果要从Powershell运行该命令,则需要使用以下格式:


<code>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"


</code>



设置 cron

在. sql 文件所在的文件夹中设置 ORACLE_HOME。路径和运行脚本有一些技巧。


<code>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/


</code>



设置 Windows 任务

首先创建一个带有所有命令并手动运行批处理文件的批处理文件,以确保它正常工作。 然后在任务计划程序中创建任务,使用系统用户来避免权限问题。 在设置触发器时,必须将"启动目录"作为批处理文件。sql文件和文本文件的文件夹放置在。 同时确保批处理文件中的第一行具有完整路径设置:


<code>set Path=C:Program FilesMicrosoft SQL Server100ToolsBinn;C:oracleinstantclient_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</code>



结束语

使用jChaat库,你可以快速构建你自己的完全可以定制的仪表板,你想要。 你不必处理部署昂贵。复杂的监视和报告软件。 不需要在每个服务器上部署代理,以收集数据并推到中央服务器。 不需要担心代理发疯,导致服务中断。 你可以完全控制如何获取数据以及如何显示数据。


相关文章