3

Can I somehow change date formatting on Google Chart Timeline Tooltip? Javascript is not my strong suit to be perfectly honest. But I've tried something like this, and miserably failed:

I want to format Tooltip if it is possible like this 'd.M, yy'and if possible to write on Duration (Croatian:Trajanje) instead of 1 year, 2 months, 28 days to write 1 godina, 2 mjeseca, 28 dana (localize to croatian language) I believed that with adding language "hr" package will change that but it didn't. (picture below) enter image description here I've used resources from this link to try something with customization but i didn't achieve much.

Customizing tooltip on Google Timeline Chart Code is below:

    google.charts.load('current', {
        'packages': ['timeline'],
        'language': 'hr'
    });

    google.charts.setOnLoadCallback(graf_4);

    function graf_4() {

        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

        dataTable.insertColumn(2, {
            type: 'string',
            role: 'tooltip',
            p: {
                html: true
            }
        });

        var dateFormat = new google.visualization.DateFormat({
            pattern: 'd.M.yy. '
        });
        for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
            var tooltip = '<div class="ggl-tooltip"><span>' +
                dataTable.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' +
                dataTable.getValue(i, 0) + '</span>: ' +
                dateFormat.formatValue(dataTable.getValue(i, 3)) + ' - ' +
                dateFormat.formatValue(dataTable.getValue(i, 4)) + '</div>';
            dataTable.setValue(i, 2, tooltip);
        }

        var options = {
            tooltip: {
                isHtml: true
            },
            legend: 'none',
            timeline: {
                trigger: 'focus',
                showRowLabels: false
            }

        };
        chart.draw(data, options);
    }
    $(window).resize(function() {
        graf_4();
    });

And here is my original code:

google.charts.load('current', {
    'packages': ['timeline'],
    'language': 'hr'
});

google.charts.setOnLoadCallback(graf_4);

function graf_4() {

var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {
    tooltip: {
        isHtml: true
    },
    legend: 'none',
    timeline: {
        trigger: 'focus',
        showRowLabels: false
    }

};
chart.draw(data, options);
}
Community
  • 1
  • 1
Svinjica
  • 2,389
  • 2
  • 37
  • 66
  • if you want to calculate the duration manually, recommend using [moment.js](http://momentjs.com/) for accuracy. otherwise, it's pretty easy to take the duration in milliseconds, and break that down into days, hours, seconds, etc. -- [similar to this answer](http://stackoverflow.com/a/13904120/5090771) -- but when it comes to months, you would have to pick an average number of days, such as 30, or write some elaborate routine to recognize the date, and deduct each month individually, which leads back to moment.js -- anyway, once calculated, easy to add to custom tooltip... – WhiteHat Sep 30 '16 at 22:21
  • Hmm I want to change tooltip a bit. So, instead of "year", "months","days" to show "godina", "mjeseci", "dani", localize to Croatian language if possible. And for the date format, on the Tooltip it shows month and year. I would like to show and day as well if it is possible. Just that :) – Svinjica Sep 30 '16 at 22:31
  • so without calculating the duration, not sure how to get numbers for displaying "godina", "mjeseci", "dani". unless you modify the default tooltip dynamically when it's displayed, replacing just the words. – WhiteHat Sep 30 '16 at 22:46

0 Answers0