CODEWITHSUNDEEP
keen-io
anyeone
anyeone

Reputation: 251

this.el(..).appendChild() is not a function error when calling client.draw()

I'm trying to integrate the keen.io JS SDK with an angularJS application. I don't have any trouble writing the events but I am having trouble drawing a chart.

I used the Explorer to generate the javascript for the chart, but have to make a couple modifications for it to be angular compatible. Unfortunately when I get to the line actually calling client.draw (or in my case, keenClient.draw) I get an error thrown inside the keen.min.js file saying "this.el(..).appendChild() is not a function".

I am passing the actual div to the method and not just a text string, and I can see in the JS debugger that the div is being found. The keenClient is also instantiated and the query seems to be created without error. So I am not sure what is happening. Here is what my controller looks like:

'use strict';

angular.module('myApp.view2', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view2', {
    templateUrl: 'view2/view2.html',
    controller: 'View2Ctrl'
  });
}])

.controller('View2Ctrl', ['$scope', function($scope, $document) {
   // write hit to keen
  var keenClient = new Keen({
    projectId: window.keenio_project_id, // String (required always)
    writeKey: window.keenio_write_key,   // String (required for sending data)
    readKey: window.keenio_read_key      // String (required for querying data)

    // protocol: "https",         // String (optional: https | http | auto)
    // host: "api.keen.io/3.0",   // String (optional)
    // requestType: "jsonp"       // String (optional: jsonp, xhr, beacon)
  });

    var pageHit = {
        "action": "loaded",
        "page": "view2"
    };

    keenClient.addEvent("pagehits", pageHit, function(err, res){
      if (err) {
          // there was an error!
          alert('Error sending keen.io stats');
      }
    });

     angular.element(Keen).ready(function (){

         var query = new Keen.Query("count", {
    eventCollection: "pagehits",
    groupBy: "page",
    interval: "hourly",
    timeframe: "this_3_days",
    timezone: "UTC"
  });

         var div = angular.element(document.getElementById("chart-wrapper"));

         keenClient.draw(query, div, 
             {
                 title: "Hits",
                 chartType: "columnchart"
             });

    });
}]);

My view is very simple:

<div id="chart-wrapper" ng-controller="View2Ctrl"></div>

I am importing keen.io version 3.3.0, using angular 1.4.8.

Thanks in advance for any suggestions. I'm pretty new to angular as well as keen.io so I may be missing something silly here.

Upvotes: 1

Views: 543

Answers (1)

anyeone
anyeone

Reputation: 251

After spending several hours troubleshooting I tried graphing with the Keen.Dataviz() option instead of client.draw() and that worked right away. So I am thinking their simple syntax just is not Angular compatible.

 var chart = new Keen.Dataviz()

             .el(document.getElementById("chart-wrapper"))

             .chartType("columnchart")

             .prepare();

         var req = keenClient.run(query, function(err, res){

             if(err){

                 chart.err(err.message)

             }

             else{

                 chart.parseRequest(this).title("Hits").render();

             }

         });


        setInterval(function() {

               req.refresh();
        }, 60000);


I still would be curious if anyone has a way to get the other syntax working, though I can do what I need this way.

Upvotes: 1

Related Questions