Tooltip format in a Google column chart created through Keen

We use Keen on the site to track browsing data. This works well, but I had a problem with the way some data is presented on graphs (using the v3.0.5 JS SDK). The user panel has a graph showing the latest data for 4 months (timeframe: this_4_months). I have a request though -

When a user hovers over one of the columns, you see the details in a tooltip, for example. "April 1, 2015 12:00:00" - is there a way to format this tooltip into something more user-friendly? e.g. April 2015

Keen.ready(function() {

        var query = new Keen.Query('count', {
            'eventCollection' : 'profile_views',
            'timeframe' : 'this_4_months',
            'interval' : 'monthly',
            'groupBy' : 'view.membership_type',
            'filters' : [
                {
                    'property_name' : 'view.user_id',
                    'operator' : 'eq',
                    'property_value' : String(user_id)
                }
            ]
        });

        client.draw(query, document.getElementById(element_id), {
            chartType: 'columnchart',
            width : graph_width,
            height : 250,
            colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
            colorMapping : {
                'pro' : '#abdd99',
                'basic' : '#8dc7d9'
            },
            labelMapping: {
                "basic": "BASIC",
                "pro": "PRO"
            },
            title : '',
            chartOptions: {
                width : '100%',
                height : '100%',
                isStacked: true,
                fontName : 'Helvetica',
                fontSize : '11px',  
                chartArea : {
                    left : '10px',
                    top : '0',
                    width : '90%',
                    height : '90%'
                },
                axisTitlesPosition : 'in',
                vAxis : {
                    viewWindowMode : 'pretty',
                    gridlines : { color : '#eeeeee' },
                    baselineColor : '#eeeeee',
                    textPosition : 'in'
                },
                hAxis : {
                    viewWindowMode : 'pretty',
                    gridlines : {
                        color : '#eeeeee'
                    },
                    baselineColor : '#eeeeee',
                    textPosition : 'none'
                },
                legend : {
                    position : 'in'
                },
                titlePosition : 'none'
            }
        });

    });

Here is a screenshot of how the tooltip appears:

keen

+4
source share
1 answer

var chart = keenIoClient.draw(query, document.getElementById("chart2"), options );

, . :

        keenIoClient.run(query, function(err, response){
          if (err) {
            // there was an error!
          }
          else {
              var arrayData = [];
              arrayData.push(['Day','Views']);
              response.result.forEach(function (element, index, array) {
                var date = new Date(element.timeframe.start);
                arrayData.push([date.getDate() + '/' + (date.getMonth() + 1) + '/' +  date.getFullYear() , element.value]);
              });
              var data = google.visualization.arrayToDataTable(arrayData);                
              var chart = new google.visualization.ColumnChart( document.getElementById('chart2'));
              chart.draw(data, options);
          }
        });

"options" .

P.S. .

P.P.S. :

        var query = new Keen.Query("count", {
            eventCollection: "views",
            interval: "daily",
            timeframe: "this_7_days",
        });
+1

All Articles