{"id":50774,"date":"2021-12-03T00:00:00","date_gmt":"2021-12-03T08:00:00","guid":{"rendered":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/"},"modified":"2025-11-14T07:55:04","modified_gmt":"2025-11-14T15:55:04","slug":"time-sampled-data-visualization-with-vuejs-and-griddb","status":"publish","type":"post","link":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/","title":{"rendered":"VueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316"},"content":{"rendered":"

\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30b0\u30e9\u30d5\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u79d2\u3001\u5206\u3001\u6642\u9593\u306a\u3069\u306e\u6642\u9593\u8ef8\u3084\u300c\u89e3\u50cf\u5ea6\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n

\u3053\u3046\u3059\u308b\u3053\u3068\u3067\u3001\u9ad8\u89e3\u50cf\u5ea6\uff08\u4f8b\u3048\u3070\u79d2\uff09\u306e\u30c7\u30fc\u30bf\u304b\u3089\u30df\u30af\u30ed\u306a\u30c8\u30ec\u30f3\u30c9\u3092\u898b\u305f\u308a\u3001\u4f4e\u89e3\u50cf\u5ea6\uff08\u4f8b\u3048\u3070\u6642\u9593\uff09\u306e\u30c7\u30fc\u30bf\u304b\u3089\u30de\u30af\u30ed\u306a\u30c8\u30ec\u30f3\u30c9\u3092\u898b\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Vue\u3068Chart.js\u3092\u4f7f\u7528\u3057\u3066\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089GridDB\u306e\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u7570\u306a\u308b\u6642\u9593\u89e3\u50cf\u5ea6\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u4e88\u5b9a\u3067\u3059\u3002<\/p>\n

\u3053\u306e\u8a18\u4e8b\u306f\u3001Node Express\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068GridDB\u3092\u4f7f\u7528\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u30e2\u30cb\u30bf\u30fc\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3092\u69cb\u7bc9\u3057\u3001Vue\u3067\u30c7\u30fc\u30bf\u3092\u8996\u899a\u5316\u3059\u308b\u30b7\u30ea\u30fc\u30ba\u306e\u7d9a\u304d\u3067\u3059\u3002\u307e\u305a\u306f\u7b2c\u4e00\u56de<\/a>\u3068\u7b2c\u4e8c\u56de<\/a>\u3092\u8aad\u3093\u3067\u304a\u304f\u3068\u3088\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n

\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u30b3\u30fc\u30c9\u306fGitHub\u306e\u3053\u3061\u3089<\/a>\u304b\u3089\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n

Vue\u306eChartkick\u3067\u30c7\u30fc\u30bf\u3092\u30b0\u30e9\u30d5\u5316\u3059\u308b<\/h2>\n

\u3053\u306e\u30b7\u30ea\u30fc\u30ba\u306e\u524d\u56de\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u4f5c\u3063\u305fVue\u30a2\u30d7\u30ea\u306f\u3001\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316\u306bVueChartJs\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n

\u6b8b\u5ff5\u306a\u304c\u3089\u3001\u4eca\u56de\u884c\u3046\u3088\u3046\u306b\u30a2\u30d7\u30ea\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u306e\u4e2d\u3067\u7d99\u7d9a\u7684\u306b\u30c7\u30fc\u30bf\u3092\u66f4\u65b0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u3001\u3053\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3042\u307e\u308a\u5411\u3044\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n

\u3053\u306e\u70b9\u3067\u3001\u3088\u308a\u67d4\u8edf\u6027\u306e\u9ad8\u3044\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001Vue Chartkick<\/a>\u3067\u3059\u3002\u305d\u3053\u3067\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30d8\u30c3\u30c9\u3067\u8aad\u307f\u8fbc\u3093\u3067\u3044\u308bvue-chartjs\u30b9\u30af\u30ea\u30d7\u30c8\u3092vue-chartkick\u306b\u7f6e\u304d\u63db\u3048\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n

index.html<\/em><\/p>\n

\n
<head>\n  ...\n  <script src=\"<https:\/\/cdn.jsdelivr.net\/npm\/vue-chartkick@0.6.1\/dist\/vue-chartkick.min.js>\"><\/script>\n<\/head><\/code><\/pre>\n<\/div>\n
Then we can make a minor modification to our Vue app so it uses the Chartkick line chart component instead of VueChartJs.<\/p>\n
index.html<\/em><\/p>\n
\n
<div id=\"app\">\n  <line-chart v-if=\"serverData\" :data=\"serverData\"><\/line-chart>\n<\/div>\n<script type=\"text\/javascript\">\nnew Vue({\n  el: \"#app\",\n  data: () => ({\n    serverData: []\n  }),\n  async mounted () {\n    const res = await fetch(\"\/data\");\n    this.serverData = await res.json();\n  }\n})\n<\/script><\/code><\/pre>\n<\/div>\n
\u3053\u306e\u6642\u70b9\u3067\u3001Vue\u30a2\u30d7\u30ea\u306f\u4ee5\u524d\u3068\u540c\u3058\u3088\u3046\u306b\u898b\u3048\u308b\u306f\u305a\u3067\u3059\u304c\u3001\u3088\u308a\u67d4\u8edf\u306aChartkick\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3063\u3066\u3044\u308b\u3053\u3068\u3060\u3051\u306f\u78ba\u304b\u3067\u3059\u3002<\/p>\n
\u89e3\u50cf\u5ea6\u30bb\u30ec\u30af\u30bf\u3092\u8ffd\u52a0\u3059\u308b<\/h2>\n
\u73fe\u5728\u3001Vue\u30a2\u30d7\u30ea\u306f\u30b5\u30fc\u30d0\u30fc\u306b\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30da\u30a4\u30ed\u30fc\u30c9\u3092\u8981\u6c42\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u305d\u306e\u6642\u9593\u57fa\u6e96\u306f\u5e38\u306b\u540c\u3058\u300c\u79d2\u300d\u3067\u3059\u3002<\/p>\n
\u305d\u3053\u3067\u3001\u30a2\u30d7\u30ea\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b HTML \u306e select \u8981\u7d20\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30e6\u30fc\u30b6\u304c\u7570\u306a\u308b\u6642\u9593\u57fa\u6e96\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
\u79d2\u3001\u5206\u3001\u6642\u9593\u306e\u6642\u9593\u8ef8\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u3055\u3089\u306b\u3001v-model<\/code> \u3092\u5909\u6570 resolution<\/code> \u306b\u30d0\u30a4\u30f3\u30c9\u3057\u3066\u3044\u308b\u306e\u3067\u3001Vue \u30a2\u30d7\u30ea\u3067\u9078\u629e\u3057\u305f\u5024\u3092\u7c21\u5358\u306b\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
index.html<\/em><\/p>\n
\n
<div id=\"app\">\n  <div>\n    <line-chart v-if=\"serverData\" :data=\"serverData\"><\/line-chart>\n    <select name=\"resolution\" class=\"resolution-select\" v-model=\"resolution\">\n      <option value=\"seconds\">Seconds<\/option>\n      <option value=\"minutes\">Minutes<\/option>\n            <option value=\"hours\">Hours<\/option>\n    <\/select>\n  <\/div>\n<\/div><\/code><\/pre>\n<\/div>\n
\u305d\u308c\u3067\u306f\u3001Vue\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u65b0\u3057\u3044\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u30c7\u30fc\u30bf\u30d7\u30ed\u30d1\u30c6\u30a3 resolution<\/code> \u3092\u8ffd\u52a0\u3057\u3066\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u5024\u3068\u3057\u3066 seconds<\/code> \u3092\u4e0e\u3048\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
index.html<\/em><\/p>\n
\n
new Vue({\n  el: \"#app\",\n  data: () => ({\n    serverData: [],\n    resolution: 'seconds'\n  }),\n  ...\n})<\/code><\/pre>\n<\/div>\n
\u307e\u305f\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30d8\u30c3\u30c9\u306bCSS\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u3001\u30bb\u30ec\u30af\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u3088\u308a\u826f\u304f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
\n
<style>\n  .resolution-select {\n    margin: 2rem 0 0 1rem;\n    padding: 0.5rem;\n  }\n<\/style><\/code><\/pre>\n<\/div>\n
\u3053\u308c\u3067\u3001\u30c1\u30e3\u30fc\u30c8\u306e\u4e0b\u306b\u30bb\u30ec\u30af\u30bf\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u30bb\u30ec\u30af\u30c8\u5909\u66f4\u6642\u306b\u30c7\u30fc\u30bf\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b<\/h2>\n
\u30e6\u30fc\u30b6\u304c\u7570\u306a\u308b\u89e3\u50cf\u5ea6\u306e\u5024\u3092\u9078\u629e\u3059\u308b\u3068\u3001Vue\u30a2\u30d7\u30ea\u306f\u65b0\u3057\u3044\u30c7\u30fc\u30bf\u30da\u30a4\u30ed\u30fc\u30c9\u3092\u5f97\u308b\u305f\u3081\u306b\u30b5\u30fc\u30d0\u3092\u547c\u3073\u51fa\u3059\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u73fe\u5728\u3001\u30c7\u30fc\u30bf\u306f\u3001\u30a2\u30d7\u30ea\u304c\u30de\u30a6\u30f3\u30c8\u3055\u308c\u305f\u3068\u304d\u306b\u306e\u307f\u8981\u6c42\u3055\u308c\u307e\u3059\u3002<\/p>\n
\u3053\u308c\u3092\u53ef\u80fd\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u4ee5\u524d\u306e\u3088\u3046\u306b\u30b5\u30fc\u30d0\u3092\u547c\u3073\u51fa\u3059\u30ed\u30b8\u30c3\u30af\u3092\u542b\u3080 getServerData<\/code> \u30e1\u30bd\u30c3\u30c9\u3092\u4f5c\u6210\u3059\u308b\u3064\u3082\u308a\u3067\u3059\u3002<\/p>\n
\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u30de\u30a6\u30f3\u30c8\u3055\u308c\u305f\u30d5\u30c3\u30af\u3067\u547c\u3073\u51fa\u3055\u308c\u308b\u306e\u3067\u3001\u30a2\u30d7\u30ea\u304c\u521d\u671f\u5316\u3055\u308c\u305f\u3068\u304d\u306b\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002\u3057\u304b\u3057\u3001resolution<\/code>\u306e\u5024\u304c\u5909\u66f4\u3055\u308c\u308b\u305f\u3073\u306b\u3001\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3059\u3053\u3068\u306b\u3057\u307e\u3059\u3002\u3053\u308c\u306f watch<\/code> \u95a2\u6570\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u95a2\u6570\u306f\u3001reactive \u306e\u5024\u304c\u5909\u5316\u3059\u308b\u305f\u3073\u306b\u547c\u3073\u51fa\u3055\u308c\u307e\u3059\u3002<\/p>\n
index.html<\/em><\/p>\n
\n
new Vue({\n  el: \"#app\",\n  data: () => ({\n    serverData: [],\n    resolution: 'seconds'\n  }),\n  methods: {\n    async getServerData() {\n      const res = await fetch(\"\/data\");\n      this.serverData = await res.json();\n    }\n  },\n  watch: {\n    resolution() {\n      this.getServerData();\n    }\n  },\n  mounted () {\n    this.getServerData();\n  }\n})<\/code><\/pre>\n<\/div>\n
\u30b5\u30fc\u30d0\u30fc\u306b\u89e3\u50cf\u5ea6\u5024\u3092\u6e21\u3059<\/h2>\n
\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u9078\u629e\u3057\u305f\u89e3\u50cf\u5ea6\u3092\u30b5\u30fc\u30d0\u30fc\u306b\u6e21\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u304c\u6b63\u3057\u3044\u30c7\u30fc\u30bf\u3092\u8fd4\u305b\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n
\u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3001fetch \u30ea\u30af\u30a8\u30b9\u30c8\u3092 POST<\/code> \u578b\u306b\u5909\u66f4\u3057\u3066\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u30dc\u30c7\u30a3\u306e JSON \u30da\u30a4\u30ed\u30fc\u30c9\u306e\u4e00\u90e8\u3068\u3057\u3066\u89e3\u6c7a\u5024\u3092\u9001\u4fe1\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3001fetch<\/code> API \u306b\u8a2d\u5b9a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3057\u307e\u3059\u3002\u3053\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f method<\/code> \u304c POST<\/code> \u3067\u3001headers<\/code> \u30b5\u30d6\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c Content-Type<\/code> \u304c application\/json<\/code> \u3067\u3001body<\/code> \u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u89e3\u6c7a\u5024\u3092\u542b\u3080 JSON \u6587\u5b57\u5217\u3092\u751f\u6210\u3059\u308b\u3082\u306e\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
index.html<\/em><\/p>\n
\n
async getServerData() {\n  const res = await fetch(\"\/data\", {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application\/json'\n    },\n    body: JSON.stringify({ resolution: this.resolution })\n  });\n  this.serverData = await res.json();\n}<\/code><\/pre>\n<\/div>\n
Express \u3067 POST \u3092\u51e6\u7406\u3059\u308b<\/h2>\n
\u4ee5\u524d\u306f\u3001Express \u30b5\u30fc\u30d0\u306f \/data<\/code> \u3078\u306e GET \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u53d7\u4fe1\u3059\u308b\u3068\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n
\u4eca\u5ea6\u306f POST \u52d5\u8a5e\u3092\u4f7f\u7528\u3057\u3066\u3001JSON \u30da\u30a4\u30ed\u30fc\u30c9\u3067 resolution<\/code> \u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d7\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u53ef\u80fd\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u307e\u305a Express \u30b5\u30fc\u30d0\u30fc\u306b JSON \u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u8ffd\u52a0\u3057\u3066\u3001\u3053\u306e\u6a5f\u80fd\u3092\u6301\u305f\u305b\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n
server.js<\/em><\/p>\n
\n
app.use(express.json());<\/code><\/pre>\n<\/div>\n
\u6b21\u306b\u3001GET \/data<\/em>\u30eb\u30fc\u30c8\u3092POST \/data<\/em>\u306b\u5909\u66f4\u3057\u307e\u3059\u3002\u305d\u3057\u3066\u3001 getLatestRows<\/code> \u306b req.body<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3042\u308b\u89e3\u6c7a\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3059\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u308c\u306f\u3001GridDB\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u4f5c\u6210\u3057\u305f\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002<\/p>\n
server.js<\/em><\/p>\n
\n
\/* Before *\/\napp.get('\/data', async (req, res) => {\n  const rows = await container.getLatestRows();\n});\n\n\/* After *\/\napp.post('\/data', async (req, res) => {\n  const rows = await container.getLatestRows(req.body.resolution);\n  res.send(rows);\n});<\/code><\/pre>\n<\/div>\n
\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30af\u30a8\u30ea<\/h2>\n
\u524d\u56de\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304c\u52d5\u4f5c\u3057\u3066\u3044\u308b\u9593\u3001\u6bce\u79d2\u30b5\u30fc\u30d0\u30fc\u30e1\u30e2\u30ea\u306e\u30b9\u30ca\u30c3\u30d7\u30b7\u30e7\u30c3\u30c8\u3092\u53d6\u5f97\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n
getLatestRows` \u95a2\u6570\u306e\u30b3\u30f3\u30bb\u30d7\u30c8\u306f\u3001\u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3057\u3066\u904e\u53bb 5 \u5206\u9593\u306e\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u305d\u308c\u3092\u914d\u5217\u3068\u3057\u3066\u8fd4\u3059\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002<\/p>\n
db.js<\/em><\/p>\n
\n
const getLatestRows = (container) => async () => {\n  try {\n    const query = container.query(\"select * where timestamp > TIMESTAMPADD(MINUTE, NOW(), -5)\");\n    const rowset = await query.fetch();\n    const data = [];\n    while (rowset.hasNext()) {\n      data.push(rowset.next());\n    }\n    return data;\n  } catch(err) {\n    console.log(err);\n  }\n}<\/code><\/pre>\n<\/div>\n
\u3053\u3053\u3067\u3001\u3053\u306e\u95a2\u6570\u306b resolution<\/code> \u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u4f7f\u3046\u3068\u3001GridDB\u306b\u79d2\u5358\u4f4d\u3067\u306f\u306a\u304f\u3001\u5206\u5358\u4f4d\u3084\u6642\u9593\u5358\u4f4d\u3067\u30c7\u30fc\u30bf\u306e\u30b5\u30f3\u30d7\u30eb\u3092\u53d6\u5f97\u3059\u308b\u3088\u3046\u306b\u6307\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u305d\u306e\u305f\u3081\u306b\u3001GridDB\u306eTIME_SAMPLING<\/a>\u95a2\u6570\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\u3053\u306e\u95a2\u6570\u306f\u3001\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u5e73\u5747\u3092\u6307\u5b9a\u3057\u305f\u9593\u9694\u3067\u3001\u6307\u5b9a\u3057\u305f\u7bc4\u56f2\u306b\u6e21\u3063\u3066\u8fd4\u3057\u307e\u3059\u3002<\/p>\n
\u305d\u308c\u3067\u306f\u3001TIME_SAMPLE<\/code> \u3092\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u4e0a\u306e select<\/code> \u6587\u3067\u4f7f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u7b2c\u4e00\u5f15\u6570\u306b\u306f\u3001\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u3057\u305f\u3044\u30c7\u30fc\u30bf\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u3053\u306e\u5834\u5408\u3001 freeMemPercentage<\/code> \u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u7b2c\u4e8c\u5f15\u6570\u306b\u306f\u3001\u7bc4\u56f2\u306e\u5148\u982d\u3092\u6307\u5b9a\u3057\u307e\u3059\u30023\u756a\u76ee\u306e\u5f15\u6570\u306f\u7bc4\u56f2\u306e\u7d42\u7aef\u3067\u3059\u3002\u3053\u306e\u5834\u5408\u3001\u30af\u30a8\u30ea\u306e1\u6642\u9593\u524d\u304b\u3089\u59cb\u3081\u305f\u3044\u306e\u3067\u3001\u73fe\u5728\u306e\u6642\u523b\u304b\u308960\u5206\u3092\u5f15\u3044\u3066 TIMESTAMPADD(MINUTE, NOW(), -60)<\/code> \u3068\u3057\u3001\u73fe\u5728\u306e\u6642\u523b\u3067 NOW()<\/code> \u3092\u7d42\u4e86\u3055\u305b\u307e\u3059\u3002<\/p>\n
\u7b2c4\u5f15\u6570\u306b\u306f\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u3057\u305f\u3044\u9593\u9694\u3001\u7b2c5\u5f15\u6570\u306b\u306f\u6642\u9593\u8ef8\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u4eca\u56de\u306f\u30011\u5206\u3054\u3068\u306b\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
select TIME_SAMPLING(freeMemPercentage, TIMESTAMPADD(MINUTE, NOW(), -60), NOW(), 1, MINUTE)\n<\/code><\/pre>\n
\u305d\u308c\u3067\u306f\u3001 getLatestRows<\/code> \u95a2\u6570\u3092\u5909\u66f4\u3057\u3066\u3001\u9001\u4fe1\u3057\u305f\u89e3\u6c7a\u30d1\u30e9\u30e1\u30fc\u30bf\u306b\u4f9d\u5b58\u3059\u308b\u30af\u30a8\u30ea\u3092\u5b9f\u884c\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002\u3053\u3053\u3067\u306f switch \u6587\u3092\u4f7f\u7528\u3057\u3001\u4e0a\u8a18\u306e\u3088\u3046\u306a\u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
db.js<\/em><\/p>\n
\n
const getLatestRows = (container) => async (resolution) => {\n  try {\n    let tql;\n    switch(resolution) {\n      case 'hours':\n        tql = \"select TIME_SAMPLING(freeMemPercentage, TIMESTAMPADD(HOUR, NOW(), -24), NOW(), 1, HOUR)\"\n        break;\n      case 'minutes':\n        tql = \"select TIME_SAMPLING(freeMemPercentage, TIMESTAMPADD(MINUTE, NOW(), -60), NOW(), 1, MINUTE)\"\n        break;\n      default:\n        tql = \"select TIME_SAMPLING(freeMemPercentage, TIMESTAMPADD(MINUTE, NOW(), -1), NOW(), 1, SECOND)\"\n    }\n    const query = container.query(tql);\n    ...\n  }\n  ...\n}<\/code><\/pre>\n<\/div>\n
\u3053\u308c\u3067\u3001GridDB\u306f\u6b63\u3057\u3044\u89e3\u50cf\u5ea6\u3067\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u30c6\u30b9\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u6642\u9593\u8ef8\u306b “seconds” \u3092\u9078\u629e\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u8868\u793a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u4ee5\u4e0b\u306f\u3001”minutes” \u3092\u9078\u629e\u3057\u305f\u5834\u5408\u306e\u8868\u793a\u3067\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30b0\u30e9\u30d5\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u79d2\u3001\u5206\u3001\u6642\u9593\u306a\u3069\u306e\u6642\u9593\u8ef8\u3084\u300c\u89e3\u50cf\u5ea6\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u3053\u3046\u3059\u308b\u3053\u3068\u3067\u3001\u9ad8\u89e3\u50cf\u5ea6\uff08\u4f8b\u3048\u3070\u79d2\uff09\u306e\u30c7\u30fc\u30bf\u304b\u3089\u30df\u30af\u30ed\u306a\u30c8\u30ec\u30f3\u30c9\u3092\u898b\u305f\u308a\u3001\u4f4e\u89e3\u50cf\u5ea6\uff08\u4f8b\u3048\u3070\u6642\u9593\uff09\u306e\u30c7\u30fc\u30bf\u304b […]<\/p>\n","protected":false},"author":41,"featured_media":49330,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1005],"tags":[],"class_list":["post-50774","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1005"],"acf":[],"yoast_head":"\nVueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316 | GridDB: Open Source Time Series Database for IoT<\/title>\n<meta name=\"description\" content=\"\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30b0\u30e9\u30d5\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u79d2\u3001\u5206\u3001\u6642\u9593\u306a\u3069\u306e\u6642\u9593\u8ef8\u3084\u300c\u89e3\u50cf\u5ea6\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.griddb.net\/ja\/\u672a\u5206\u985e\/time-sampled-data-visualization-with-vuejs-and-griddb\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"VueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316 | GridDB: Open Source Time Series Database for IoT\" \/>\n<meta property=\"og:description\" content=\"\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30b0\u30e9\u30d5\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u79d2\u3001\u5206\u3001\u6642\u9593\u306a\u3069\u306e\u6642\u9593\u8ef8\u3084\u300c\u89e3\u50cf\u5ea6\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.griddb.net\/ja\/\u672a\u5206\u985e\/time-sampled-data-visualization-with-vuejs-and-griddb\/\" \/>\n<meta property=\"og:site_name\" content=\"GridDB: Open Source Time Series Database for IoT\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/griddbcommunity\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-03T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-14T15:55:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/wp-content\/uploads\/2021\/11\/vuejs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1160\" \/>\n\t<meta property=\"og:image:height\" content=\"653\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"griddb-admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@GridDBCommunity\" \/>\n<meta name=\"twitter:site\" content=\"@GridDBCommunity\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"griddb-admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/\"},\"author\":{\"name\":\"griddb-admin\",\"@id\":\"https:\/\/griddb.net\/en\/#\/schema\/person\/4fe914ca9576878e82f5e8dd3ba52233\"},\"headline\":\"VueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316\",\"datePublished\":\"2021-12-03T08:00:00+00:00\",\"dateModified\":\"2025-11-14T15:55:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/\"},\"wordCount\":97,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/griddb.net\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#primaryimage\"},\"thumbnailUrl\":\"\/wp-content\/uploads\/2021\/11\/vuejs.png\",\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/\",\"url\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/\",\"name\":\"VueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316 | GridDB: Open Source Time Series Database for IoT\",\"isPartOf\":{\"@id\":\"https:\/\/griddb.net\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#primaryimage\"},\"thumbnailUrl\":\"\/wp-content\/uploads\/2021\/11\/vuejs.png\",\"datePublished\":\"2021-12-03T08:00:00+00:00\",\"dateModified\":\"2025-11-14T15:55:04+00:00\",\"description\":\"\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30b0\u30e9\u30d5\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u79d2\u3001\u5206\u3001\u6642\u9593\u306a\u3069\u306e\u6642\u9593\u8ef8\u3084\u300c\u89e3\u50cf\u5ea6\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\",\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#primaryimage\",\"url\":\"\/wp-content\/uploads\/2021\/11\/vuejs.png\",\"contentUrl\":\"\/wp-content\/uploads\/2021\/11\/vuejs.png\",\"width\":1160,\"height\":653},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/griddb.net\/en\/#website\",\"url\":\"https:\/\/griddb.net\/en\/\",\"name\":\"GridDB: Open Source Time Series Database for IoT\",\"description\":\"GridDB is an open source time-series database with the performance of NoSQL and convenience of SQL\",\"publisher\":{\"@id\":\"https:\/\/griddb.net\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/griddb.net\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/griddb.net\/en\/#organization\",\"name\":\"Fixstars\",\"url\":\"https:\/\/griddb.net\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/griddb.net\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/griddb.net\/wp-content\/uploads\/2019\/04\/fixstars_logo_web_tagline.png\",\"contentUrl\":\"https:\/\/griddb.net\/wp-content\/uploads\/2019\/04\/fixstars_logo_web_tagline.png\",\"width\":200,\"height\":83,\"caption\":\"Fixstars\"},\"image\":{\"@id\":\"https:\/\/griddb.net\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/griddbcommunity\/\",\"https:\/\/x.com\/GridDBCommunity\",\"https:\/\/www.linkedin.com\/company\/griddb-by-toshiba\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/griddb.net\/en\/#\/schema\/person\/4fe914ca9576878e82f5e8dd3ba52233\",\"name\":\"griddb-admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/griddb.net\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5bceca1cafc06886a7ba873e2f0a28011a1176c4dea59709f735b63ae30d0342?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5bceca1cafc06886a7ba873e2f0a28011a1176c4dea59709f735b63ae30d0342?s=96&d=mm&r=g\",\"caption\":\"griddb-admin\"},\"url\":\"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/author\/griddb-admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"VueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316 | GridDB: Open Source Time Series Database for IoT","description":"\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30b0\u30e9\u30d5\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u79d2\u3001\u5206\u3001\u6642\u9593\u306a\u3069\u306e\u6642\u9593\u8ef8\u3084\u300c\u89e3\u50cf\u5ea6\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.griddb.net\/ja\/\u672a\u5206\u985e\/time-sampled-data-visualization-with-vuejs-and-griddb\/","og_locale":"ja_JP","og_type":"article","og_title":"VueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316 | GridDB: Open Source Time Series Database for IoT","og_description":"\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30b0\u30e9\u30d5\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u79d2\u3001\u5206\u3001\u6642\u9593\u306a\u3069\u306e\u6642\u9593\u8ef8\u3084\u300c\u89e3\u50cf\u5ea6\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002","og_url":"https:\/\/www.griddb.net\/ja\/\u672a\u5206\u985e\/time-sampled-data-visualization-with-vuejs-and-griddb\/","og_site_name":"GridDB: Open Source Time Series Database for IoT","article_publisher":"https:\/\/www.facebook.com\/griddbcommunity\/","article_published_time":"2021-12-03T08:00:00+00:00","article_modified_time":"2025-11-14T15:55:04+00:00","og_image":[{"width":1160,"height":653,"url":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/wp-content\/uploads\/2021\/11\/vuejs.png","type":"image\/png"}],"author":"griddb-admin","twitter_card":"summary_large_image","twitter_creator":"@GridDBCommunity","twitter_site":"@GridDBCommunity","twitter_misc":{"\u57f7\u7b46\u8005":"griddb-admin","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"2\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#article","isPartOf":{"@id":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/"},"author":{"name":"griddb-admin","@id":"https:\/\/griddb.net\/en\/#\/schema\/person\/4fe914ca9576878e82f5e8dd3ba52233"},"headline":"VueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316","datePublished":"2021-12-03T08:00:00+00:00","dateModified":"2025-11-14T15:55:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/"},"wordCount":97,"commentCount":0,"publisher":{"@id":"https:\/\/griddb.net\/en\/#organization"},"image":{"@id":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#primaryimage"},"thumbnailUrl":"\/wp-content\/uploads\/2021\/11\/vuejs.png","inLanguage":"ja","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/","url":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/","name":"VueJS\u3068GridDB\u306b\u3088\u308b\u30bf\u30a4\u30e0\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316 | GridDB: Open Source Time Series Database for IoT","isPartOf":{"@id":"https:\/\/griddb.net\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#primaryimage"},"image":{"@id":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#primaryimage"},"thumbnailUrl":"\/wp-content\/uploads\/2021\/11\/vuejs.png","datePublished":"2021-12-03T08:00:00+00:00","dateModified":"2025-11-14T15:55:04+00:00","description":"\u6642\u7cfb\u5217\u30c7\u30fc\u30bf\u306e\u30b0\u30e9\u30d5\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u79d2\u3001\u5206\u3001\u6642\u9593\u306a\u3069\u306e\u6642\u9593\u8ef8\u3084\u300c\u89e3\u50cf\u5ea6\u300d\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002","inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.griddb.net\/ja\/%e6%9c%aa%e5%88%86%e9%a1%9e\/time-sampled-data-visualization-with-vuejs-and-griddb\/#primaryimage","url":"\/wp-content\/uploads\/2021\/11\/vuejs.png","contentUrl":"\/wp-content\/uploads\/2021\/11\/vuejs.png","width":1160,"height":653},{"@type":"WebSite","@id":"https:\/\/griddb.net\/en\/#website","url":"https:\/\/griddb.net\/en\/","name":"GridDB: Open Source Time Series Database for IoT","description":"GridDB is an open source time-series database with the performance of NoSQL and convenience of SQL","publisher":{"@id":"https:\/\/griddb.net\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/griddb.net\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/griddb.net\/en\/#organization","name":"Fixstars","url":"https:\/\/griddb.net\/en\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/griddb.net\/en\/#\/schema\/logo\/image\/","url":"https:\/\/griddb.net\/wp-content\/uploads\/2019\/04\/fixstars_logo_web_tagline.png","contentUrl":"https:\/\/griddb.net\/wp-content\/uploads\/2019\/04\/fixstars_logo_web_tagline.png","width":200,"height":83,"caption":"Fixstars"},"image":{"@id":"https:\/\/griddb.net\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/griddbcommunity\/","https:\/\/x.com\/GridDBCommunity","https:\/\/www.linkedin.com\/company\/griddb-by-toshiba"]},{"@type":"Person","@id":"https:\/\/griddb.net\/en\/#\/schema\/person\/4fe914ca9576878e82f5e8dd3ba52233","name":"griddb-admin","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/griddb.net\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5bceca1cafc06886a7ba873e2f0a28011a1176c4dea59709f735b63ae30d0342?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5bceca1cafc06886a7ba873e2f0a28011a1176c4dea59709f735b63ae30d0342?s=96&d=mm&r=g","caption":"griddb-admin"},"url":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/author\/griddb-admin\/"}]}},"_links":{"self":[{"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/posts\/50774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/comments?post=50774"}],"version-history":[{"count":1,"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/posts\/50774\/revisions"}],"predecessor-version":[{"id":51608,"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/posts\/50774\/revisions\/51608"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/media\/49330"}],"wp:attachment":[{"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/media?parent=50774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/categories?post=50774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/ja\/wp-json\/wp\/v2\/tags?post=50774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}