Format tooltip content of Google column chart generated via Keen

Question

We use Keen on a site to track view data. This works well but I’m having an issue with how some of the data is presented in the graphs (using v3.0.5 of the JS SDK). On the users dashboard we have a graph showing the last 4 months data (timeframe : this_4_months). I have a query though -

When the user hovers over one of the columns you see detail in a tooltip e.g. "April 1, 2015 12:00:00 AM" - is there any 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

It is indeed possible, but a small code example showing how you initialise the chart using the keen data would be helpful, I mean would produce a more precise answer. — davidkonrad, May 14 '15 at 14:55
Hi David, no problem, I've updated my post with a code sample. Thanks — Phil, May 15 '15 at 08:02
OK, where? :) just an examkple of the JSON from keen you are using. Guess you have more complex result than the examples in https://keen.io/docs/getting-started-guide/ — davidkonrad, May 15 '15 at 08:09
Sorry.. had trouble editing my own question for some reason so I've added it in an 'answer' below. Hope this helps! — Phil, May 15 '15 at 08:13
Edited your "answer" into the question and corrected syntax highlightning. _Now you can delete the answer below_. We should never misuse the answer-button to comment or enhance the question (no offense). — davidkonrad, May 17 '15 at 12:47
I am sorry, but I cannot solve that. I thought it was a pure google-visualization question, and that it would be easy to add a tooltip-column with parsed date-strings. But keen uses a wrapper that makes such solution unavailable. — davidkonrad, May 17 '15 at 12:50
This is how it should be done -> https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_content have read the keen docs, https://github.com/keen/keen-js/blob/master/docs/visualization.md#chart-type-examples with no luck — davidkonrad, May 17 '15 at 13:00
hi @davidkonrad, firstly apologies for mis-using the answer button, and thanks for your help. I'll approach the Keen support team and see if they can offer any advice. — Phil, May 18 '15 at 10:31

score 1 · Answer 1 · answered Nov 06 '15 at 02:47

Instead of

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

Collect all your data to array manually, so you can add more columns there. Here is example with dates and pageviews:

        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);
          }
        });

The "options" variable stays the same.

P.S. on the way you can set up the format for your dates.

P.P.S. in my case the Query was:

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

Format tooltip content of Google column chart generated via Keen

1 Answers1