javascriptkeen-io

Keen.io how to use savedQueries() to chart graph


I'm trying to use savedQueries to draw graph without success. Is savedQueries only used to CRUD queries in Keen or can it actually be used to chart graph as well?? Keys removed from the code, sorry for the inconvenience.

var client = new Keen({
  projectId: keen.project,
  writeKey: keen.writeKey,
  readKey: keen.readKey,
  masterKey: keen.masterKey
});
var savedQueries = client.savedQueries();
savedQueries.get("monthly-active-users", function(err, response) {
  if (err) {
    console.log(err);
  }
  console.log(response);
  var chart1 = new Keen.Dataviz()
    .el(document.getElementById('chart'))
    .chartType("area")
    .colors(["#6ab975"])
    .title("Monthly Active Users")
    .prepare();

  chart1
    .data(response)
    .render();

});

response obj from saved query

{
  "refresh_rate": 0,
  "user_last_modified_date": "2017-06-09T18:51:59.676000+00:00",
  "last_modified_date": "2017-06-09T18:51:59.676000+00:00",
  "query_name": "monthly-active-users",
  "urls": {
    "cached_query_url": "/3.0/projects/58f6fb8a90b3659264951b8d/queries/saved/monthly-active-users",
    "cached_query_results_url": "/3.0/projects/58f6fb8a90b3659264951b8d/queries/saved/monthly-active-users/result"
  },
  "created_date": "2017-04-25T23:52:45.685000+00:00",
  "query": {
    "filters": [
      {
        "operator": "ne",
        "property_name": "user_id",
        "property_value": "guest"
      },
      {
        "operator": "not_contains",
        "property_name": "fromState",
        "property_value": "app"
      },
      {
        "operator": "not_contains",
        "property_name": "user_email",
        "property_value": "@giblib.com"
      },
      {
        "operator": "not_contains",
        "property_name": "fromState",
        "property_value": "app.auth_postregister"
      }
    ],
    "analysis_type": "count_unique",
    "timezone": "US/Pacific",
    "group_by": null,
    "force_exact": null,
    "timeframe": "this_2_months",
    "target_property": "user_id",
    "interval": "monthly",
    "event_collection": "user-page-access"
  },
  "run_information": null,
  "metadata": {
    "visualization": {
      "chart_type": "areachart"
    },
    "display_name": "Monthly Active Users"
  }
}

Solution

  • I noticed that you did not include the Keen.ready() function. Also, I recommend using client.run instead of client.get because it runs the query and gets the result.

    I went ahead and created an example JSFiddle: https://jsfiddle.net/pn14bs0L/2/

    Keen.ready(function() {
    
      client.run("test-saved-query", function(err, response) {
        if (err) {
          // there was an error
        } else {
          var chart1 = new Keen.Dataviz()
            .el(document.getElementById('my_chart'))
            .chartType("areachart")
            .colors(["#6ab975"])
            .title("Monthly Active Users")
            .prepare();
    
          chart1
            .data(response)
            .render();
        }
      });
    
    });
    

    You can see this working with some test data in the JSFiddle.

    Note: I assumed you were using keen-js here and not keen-dataviz.js.