You can get the code for this tutorial here on GitHub<\/a>.<\/p>\n The Vue app we built in the previous tutorial of this series used the VueChartJs library for data visualization.<\/p>\n Unfortunately, this library is not great when you need to continually update the data during the app lifecycle as we’ll be doing here.<\/p>\n A library that provides more flexibility in this regard is Vue Chartkick<\/a>. So let’s replace the vue-chartjs script we’re loading in the document head with vue-chartkick.<\/p>\n index.html<\/em><\/p>\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 At this point, our Vue app should look the same as it did before, only now we’re using the more flexible Chartkick library.<\/p>\n Currently, our Vue app requests a time-series data payload from the server which always has the same time basis: seconds.<\/p>\n To allow a user to see the monitor on an hourly or minute basis instead, we’re going to add an HTML select element to our app template which will allow the user to select a different time basis.<\/p>\n Note that we have an option for a seconds, minutes, or hours time basis. Plus, we have a index.html<\/em><\/p>\n Let’s now add the new index.html<\/em><\/p>\n We can also add some CSS to the document head to style the select little better,<\/p>\n With that done, we now see the selector below the chart.<\/p>\n When the user selects a different resolution value, the Vue app should call the server for a new data payload. Currently, the data is only requested when the app is mounted.<\/p>\n To allow this, we’re going to create a method We’re now going to call this method in the mounted hook, so we get data when the app is initialized. But we’ll also call it whenever the value of index.html<\/em><\/p>\n The next step is to pass the user’s chosen resolution to the server so that the server can return the correct data.<\/p>\n To do this, we’re going to change our fetch request to be a index.html<\/em><\/p>\n Previously, our Express server was returning the time-series data when a GET request to Now, we want to use the POST verb so that we can receive the server.js<\/em><\/p>\n Next, we’ll change the GET \/data<\/em> route to POST \/data<\/em>. We’ll then be able to pass the resolution paramater, which will be a property of the server.js<\/em><\/p>\n In the previous tutorial, we made it so that a snapshot of the server memory is taken every second the server is running.<\/p>\n The concept of the db.js<\/em><\/p>\n Now we’re passing the To do this, we’re going to use GridDB’s TIME_SAMPLING<\/a> function which will return averages of time-series data at a specified interval over a given range.<\/p>\n So let’s use The second argument is the beginning of the range. The third argument is the end of the range. In this case, we want to begin an hour previous to the query, which we can do by subtracting 60 minutes from the current time, The fourth argument is the interval you want to sample on and the fifth argument is the time basis. In this case, we’re taking samples every 1 minute. select TIME_SAMPLING(freeMemPercentage, TIMESTAMPADD(MINUTE, NOW(), -60), NOW(), 1, MINUTE)<\/p>\n Let’s now modify the db.js<\/em><\/p>\n With that done, GridDB will return data at the correct resolution. We can go and test this in the browser now.<\/p>\n Here’s what we see when selecting “seconds” as the time basis:<\/p>\n Here’s what we see when selecting “minutes”:<\/p>\nCharting data with Vue Chartkick<\/h2>\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<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>\nAdding a resolution selector<\/h2>\n
v-model<\/code> bound to a variable resolution<\/code> so that we can easily get the selected value in our Vue app.<\/p>\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>\nresolution<\/code> reactive data property to the Vue instance and give it a default value of seconds<\/code>.<\/p>\nnew Vue({\n el: \"#app\",\n data: () => ({\n serverData: [],\n resolution: 'seconds'\n }),\n ...\n})<\/code><\/pre>\n<\/div>\n<style>\n .resolution-select {\n margin: 2rem 0 0 1rem;\n padding: 0.5rem;\n }\n<\/style><\/code><\/pre>\n<\/div>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2021\/11\/ss_seconds.png\")
<\/a><\/p>\nReloading data on select change<\/h2>\n
getServerData<\/code> which will contain the logic for calling the server we had before.<\/p>\nresolution<\/code> changes. We can do this by using a watch<\/code> function which is called whenever the reactive value changes.<\/p>\nnew 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>\nPassing resolution value to the server<\/h2>\n
POST<\/code> type and send the resolution value as part of a JSON payload in the request body. We can do this by passing a config object to the fetch<\/code> API. This object will have a method<\/code> of POST<\/code>, a headers<\/code> sub-object with Content-Type<\/code> of application\/json<\/code> and a body<\/code> property to which we create a JSON string containing the resolution value.<\/p>\nasync 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>\nHandling POST with Express<\/h2>\n
\/data<\/code> was received.<\/p>\nresolution<\/code> parameter in a JSON payload. To allow for this, we’ll first add the JSON middleware to the Express server so it has this capability.<\/p>\napp.use(express.json());<\/code><\/pre>\n<\/div>\nreq.body<\/code> object, to getLatestRows<\/code>. This is the method we created to query data from GridDB.<\/p>\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>\nTime sampling queries<\/h2>\n
getLatestRows<\/code> function is that we use a query to get the last 5 minutes of data and return that as an array.<\/p>\nconst 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>\nresolution<\/code> parameter to this function. We can use this to tell GridDB to get samples of the data on a minute or hour basis rather than just on a second basis.<\/p>\nTIME_SAMPLE<\/code> in a select<\/code> statement on our database. The first argument is the data we want sampled. In this case, that will be freeMemPercentage<\/code>.<\/p>\nTIMESTAMPADD(MINUTE, NOW(), -60)<\/code> and end at the current time, NOW()<\/code>.<\/p>\ngetLatestRows<\/code> function so that the query will be dependent on the resolution parameter we send. We’ll use a switch statement for this and use a query similar to the one above.<\/p>\nconst 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<\/a><\/p>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2021\/11\/ss_minutes.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"