Friday 19 May 2017

Google Charts date issue

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