Formating tooltip data in Google Charts

Question

I have the page http://goodandevilbook.com/stats where I am using google charts to display data.

On one of the charts (the area chart) When I hover over the tool tip, it displays the date in a hard-to-read format. I would like to format this date into a more readable way. Also, the tooltip displays ga:visitors, and I would like to change this to just Visitors. I can't really put the JSON file data into the desired format, because that is generated automatically

Somehow, I need to change this data once I have it received. Here is the code where I generate the Area Chart:

google.setOnLoadCallback(drawGraph);
function drawGraph(){
    var graph = new google.visualization.ChartWrapper({
    "containerId":"last30chart",
    "dataSourceUrl":"http://good-and-evil-stats.appspot.com/query?id=ahVzfmdvb2QtYW5kLWV2aWwtc3RhdHNyFQsSCEFwaVF1ZXJ5GICAgICA14wKDA&format=data-table-response",
        "refreshInterval":0,
         "chartType":"AreaChart",
            "options":{
                "width":675,
                "height":400,
                "chartArea":{width:"95%", height:"83%"},
                "areaOpacity":0.1,
                "pointSize":4,
                "backgroundColor":"transparent",
                "colors":['#76BB72'],
                "legend":{position: 'none'},
                "tooltip":{textStyle: {fontSize:18}},
                "hAxis":{textPosition:"none", gridlines: {color: 'red', count: 7}},
                "dateFormat":{formatType: "long"}
            }
            });
    graph.draw();}

I have tried to insert the code for formating the date.

https://developers.google.com/chart/interactive/docs/reference#dateformatter

this is what I was playing around with:

var monthYearFormatter = new google.visualization.DateFormat({ 
     pattern: "MMM yyyy" 
}); 
monthYearFormatter.format(dataSourceUrl);

I've tried playing around with this for quite awhile, and can't get it to work. I am new to Javascript/jquery and so am not really sure what I'm doing.

asgallant asgallant · Accepted Answer · 2014-02-10T17:10:22

You cannot format the data when using the dataSourceUrl parameter of the ChartWrapper object to pull in your data. You have to switch over to using a Query object instead, and then you can format your data and change column labels as you see fit. Since your dates are actually strings and not Date objects, you will have to use a DataView to translate them into Date objects before you can format them. Here's an example:

function drawGraph(){
    var query = new google.visualization.Query("http://good-and-evil-stats.appspot.com/query?id=ahVzfmdvb2QtYW5kLWV2aWwtc3RhdHNyFQsSCEFwaVF1ZXJ5GICAgICA14wKDA&format=data-table-response");
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }

        var data = response.getDataTable();
        // set the label of column 1 to "Visitors"
        data.setColumnLabel(1, 'Visitors');

        // create a formatter for the dates
        var formatter = new google.visualization.DateFormat({pattern: "MMM yyyy"});

        var graph = new google.visualization.ChartWrapper({
            "containerId": "last30chart",
            "chartType":"AreaChart",
            dataTable: data,
            "options": {
                "width":675,
                "height":400,
                "chartArea": {width:"95%", height:"83%"},
                "areaOpacity":0.1,
                "pointSize":4,
                "backgroundColor":"transparent",
                "colors":['#76BB72'],
                "legend":{position: 'none'},
                "tooltip":{textStyle: {fontSize:18}},
                "hAxis":{textPosition:"none", gridlines: {color: 'red', count: 7}},
                "dateFormat":{formatType: "long"}
            },
            view: {
                columns: [{
                    type: 'date',
                    label: data.getColumnLabel(0),
                    calc: function (dt, row) {
                        var dateStr = dt.getValue(row, 0);
                        var year = parseInt(dateStr.substring(0, 4), 10);
                        var month = parseInt(dateStr.substring(4, 6), 10) - 1; // convert month to 0-based index
                        var day = parseInt(dateStr.substring(6, 8), 10);
                        var date = new Date(year, month, day);
                        return {v: date, f: formatter.formatValue(date)};
                    }
                }, 1]
            }
        });
        graph.draw();
    });
}

Formating tooltip data in Google Charts

1 Answers