I am getting Timestamps from my Database and want them converted to be the scale on my X-axis, but i can't find the proper solution to do so. I'm Getting the data from the Server via Ajax call and i am using Node.js as a Framework.
graphini.js
var path = require('path');
module.exports = {
getTimestampAndValueFromKpiById: (req, res, connection) => {
var currentDate = new Date();
var currentDateInMilliseconds = currentDate.getTime();
/*
* Javascript timestamps are in milliseconds, the database timestamps are Unix Timestamps and they're in seconds
*/
var onYearInSeconds = 31556952;
var maxOneYearInThePast = parseInt(currentDateInMilliseconds/1000) - onYearInSeconds;
connection.query("SELECT ts, value from kpi_" + req.params.kpiId + " where ts >= " + maxOneYearInThePast + " ORDER BY ts",
function (err, rows) {
connection.release();
if (!err) {
/*
* Google charts
*
* Correct Data format:
* ['<typeOfDataXAxis>', '<nameOfGraph'],[<dataXAxis><dataYAxis>], ...
*
* Initialize 2-Dim array in fill it with data from specific kpi
*/
var graphInput = [[]];
graphInput[0] = ['date', req.params.kpiId];
var i = 1;
rows.forEach(function (entry) {
graphInput[i++] = [entry.ts*1000, entry.value];
});
graphInput.forEach(function (entry) {
console.log(entry);
});
res.send({graphInput:graphInput});
}
});
}
};
kpiChart.pug
html
head
script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js')
script(type='text/javascript', src='https://www.gstatic.com/charts/loader.js')
include fragments/headerinc
title="Kpi Content"
script(type='text/javascript').
google.charts.load('current', {'packages': ['corechart', 'line', 'controls']});
var url = window.location.href;
var urlForGraph = url.substr(21, 100);
var urlString = urlForGraph.split("/")
console.log(urlString);
for (var i = 0; i <= urlString; i++) {
urlForGraph = urlForGraph + "/" + urlString[i];
}
urlForGraph = urlForGraph + "/getGraphData";
function drawDashboard(res) {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
var data = google.visualization.arrayToDataTable(res.graphInput);
// We omit "var" so that programmaticSlider is visible to changeRange.
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'width': 500,
'height': 100,
'filterColumnLabel': 'date'
},
'ui': {'labelStacking': 'horizontal'},
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'programmatic_chart_div',
'options': {
'title': urlString[4],
'curveType': 'function',
'width': 900,
'height': 500,
trendlines: {0: {type: 'basis', color: '#ff0000'}},
'crosshair': {trigger: 'both', color: '#fffb00'},
'legend': {'position': 'right'},
}
});
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
changeRange = function () {
programmaticChart.draw();
programmaticSlider.draw();
};
changeOptions = function () {
programmaticChart.draw();
};
// Create a new JavaScript Date object based on the timestamp
}
$(document).ready(
function getTimestampAndValueFromKpiById() {
$.ajax({
url: urlForGraph,
type: 'GET',
}).done(function (res) {
drawDashboard(res);
});
});
body
include fragments/navbar
include fragments/bodyinc
.headlinePadding
ul.breadcrumb
li
a(href='/kamis') Home
li
a(href='/kamis/' + channelName)= channelName
li
a(href='/kamis' + '/' + channelName+ '/' + groupId)= groupId
li
a(href=kpiId)= kpiId
#programmatic_dashboard_div(style='width: 900px; height: 500px')
#programmatic_chart_div(style='width: 900px; height: 500px')
#programmatic_control_div(style='width: 900px; height: 100px')
#curve_chart(style='width: 900px; height: 500px')
Maybe you guys, can help me out here.
Thanks in advance.
via Kai
No comments:
Post a Comment