Custom DataFormat for Google Charts

Line chart with a custom DateFormat, using the Google Charts adapter (default)

HTML

<script src="https://d26b395fwzu5fz.cloudfront.net/3.4.0/keen.min.js?date=2016-02-17"></script>
<div id="chart"></div>

JavaScript

var client = new Keen({
    projectId: "53eab6e12481962467000000",
    readKey: "d1b97982ce67ad4b411af30e53dd75be6cf610213c35f3bd3dd2ef62eaeac14632164890413e2cc2df2e489da88e87430af43628b0c9e0b2870d0a70580d5f5fe8d9ba2a6d56f9448a3b6f62a5e6cdd1be435c227253fbe3fab27beb0d14f91b710d9a6e657ecf47775281abc17ec455"
});

Keen.ready(function(){
    var el = document.getElementById("chart");
    var query = new Keen.Query("count", {
        eventCollection: "user_action",
        timeframe: {
            start: "2014-08-01T00:00:00",
            end: "2014-08-04T00:00:00"
        },
        interval: "hourly"
    });
    var chart = new Keen.Dataviz()
        .el(el)
        .chartType('piechart')
        .height(400)
        .prepare();

    client.run(query, function(err, res){
       chart
           .parseRequest(this)
           .call(function(){
               var ds, df, line;
               ds = new google.visualization.arrayToDataTable(this.data());
               
               // Create and apply a formatter
               df = new google.visualization.DateFormat({
                   formatType: 'long', 
                   timeZone: -4
               });
               df.format(ds, 0);

               line = new google.visualization.LineChart(this.el());
               line.draw(ds);
           });
    });
});