用PowerShell将MongoDB的数据转换成Json格式，在C3.js中生成图表

3 年 ago

宇, 华

2 minutes

利用PowerShell将MongoDB的数据转换成Json，然后使用C3.js展示图表。

为了快速查看以不同方式存储的MongoDB数据，我们尝试使用C3.js进行图形化。
可能在流行的趋势下，Web服务器端可能是Node.js之类的，但作为主要的Windows用户，我首先将其转换成Json格式，使用IIS上的PoweShell。
虽然使用PowerShell可以直接显示数据和C3.js，但考虑到改进机制，我们希望将数据提取和显示分开。
虽然结果可能并不是特别快速，但由于客户的服务器已限制安装，因此可以使用内置的PowerShell非常方便。（关于Web服务器环境，使用Windows 2016 TP4上的IIS将PowerShell作为CGI运行）

ソフト等バージョン備考Windows Server 2016Technical Preview 4(Build 10586)2012R2のHyper-V上で動作PowerShell5.02016TP4標準のままMongoDB3.2.1Windows 64-bit 2008 R2+ legacyMongoDB .NET Driver1.11.0
D3.js3.5.14
C3.js0.4.10

创建 JSON 输出。

在条件中直接指定机器名称作为查询。
（在 PowerShell 中，可以通过 $ENV:QUERY_STRING 获取。）
搜索后，将其转化为 C3.js 可处理的 Json 格式并输出。

##### 指定マシンのログをMongoDBからJsonで取り出し #####
# マシン名はクエリーで指定。
# ex: machuneLog.ps1?V3

write-host "Conten-type:application/json"
write-host ""

# ドライバ読み込み
$DRIVER_PATH = "C:\MongoDB\CSharpDriver-1.11.0";
Add-Type -Path "$DRIVER_PATH\MongoDB.Bson.dll";
Add-Type -Path "$DRIVER_PATH\MongoDB.Driver.dll";

# MongoDBの、logsデータベースの、osコレクションに接続
$client = New-Object MongoDB.Driver.MongoClient("mongodb://S2016TP4");
$server = $client.GetServer();
$db = $server.GetDatabase("logs");
$coll = $db.GetCollection("os");

# クエリーを作成して検索
$Q = [MongoDB.Driver.Builders.Query];
$query = $Q::EQ("ComputerName",$ENV:QUERY_STRING);
$mc = $coll.Find($query);

# 要素毎に格納する配列を用意
$TimeStamp = @();
$Processor_per = @();
$Network_byte = @();
$Disk_byte = @();

# ドキュメント毎に整形して格納
foreach($d in $mc) {
  $TimeStamp += ($d["TimeStamp"].ToLocalTime() | Get-date -UFormat "%Y-%m-%d %R");
  $Processor_per += $d["Processor_per"].ToInt32();
  $Network_byte += $d["Network_byte"].ToInt32();
  $Disk_byte += $d["Disk_byte"].ToInt32();
}

# まとめて、Jsonに変換して出力
@{
  TimeStamp = $TimeStamp;
  Processor_per = $Processor_per;
  Network_byte = $Network_byte;
  Disk_byte = $Disk_byte;
} | ConvertTo-json -Compress;

由于我对c3.js的使用方法了解有限，所以目前对整个形态不太满意，正在朝着与c3.js相符的方向进行整形。如果可能的话，我希望能够通过c3.js的配置来解决，而不是进行整形。

我确认我可以直接访问并显示。

布置C3.js(和D3.js)。

我没有太多使用这种库的经验，但是C3.js看起来很简单，所以先试试看。
（如果在工作中需要使用高级功能的话，到时候可能会考虑切换。）
我将下载C3.js v0.4.10和D3.js v3.5.14，并在IIS的wwwroot下创建一个名为“lib”的文件夹，然后只放必要的文件进去。

让我来演示一下。

有一个问题，但是由于显示本身很容易，所以到此为止。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>C3.js Graph</title>
<link href="/lib/c3.min.css" rel="stylesheet" type="text/css">
<script src="/lib/d3.min.js"></script>
<script src="/lib/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var chart = c3.generate({
  data: {
//    x: 'x',
//    xFormat: '%Y-%m-%d %H:%M',
    url: '/cgi/machineLog.ps1?S2016TP4',
    mimeType: 'json',
    axes: {
        'Processor_per': 'y',
        'Network_byte': 'y2',
        'Disk_byte': 'y2'
    },
    hide: 'TimeStamp'
  },
  axis: {
//    x: {
//      type: 'timeseries'
//    },
    y: {
      label: 'processor(%)'
    },
    y2: {
      label: 'Network/Disk(byte)',
      show: true
    }
  }
});
</script>
</body>
</html>

通过这个源代码，我们可以用图形来表示如下。

只要进行动态切换，即可使其以某种程度上的运动方式进行显示，但是X轴的日期不能被设置为日期。（这边被注释在源代码中。如果删除该注释会导致错误。）
为了将来能够切换并显示机器名称以及进行其他各种操作，我们希望在此之前能够确定一个计划。

#技术文章