keen / keen-js

https://keen.io/ JavaScript SDKs. Track users and visualise the results. Demo http://keen.github.io/keen-dataviz.js/

Keen JavaScript SDK

Get API Keys

If you haven’t done so already, login to Keen to create a project. The Project ID and API Keys are available on the Access page of the Project Console.

Keen Tracking JS

A JavaScript tracking library for Keen. Track events, user actions, clicks, pageviews, conversions and more!

https://github.com/keen/keen-tracking.js

Keen Analysis JS

A JavaScript client for Keen. Make queries with ease!

https://github.com/keen/keen-analysis.js

Keen Dataviz JS

A JavaScript data visualization library for Keen. Create amazing interactive charts!

https://github.com/keen/keen-dataviz.js

Keen Explorer JS

https://github.com/keen/explorer

---

Keen-js deprecated versions

Previous versions and their documentation are available as branches of this repo.

---

Support

Need a hand with something? Shoot us an email at [email protected]. We're always happy to help, or just hear what you're building! Here are a few other resources worth checking out:

• API status
• API reference
• How-to guides
• Data modeling guide
• Slack (public)

keen-js's Issues

Tracking only code

Hello,

In the interest of size, we've hacked together a minimal 'tracking only' library, which is pretty much just the src/intro.js and src/track.js files, then wrapped it up in a local scope for our widget.

Would it be possible for you guys to add this in a more supported way? We're not so keen on adding 30KB of JS when we only use 5 of it!

Make area chart default instead of line chart

looks way better

client.draw() with a JSON object returns error

client.draw(this.data, document.getElementById("averageSpellsPerPlayer"), {
    chartOptions: {
        title: "Average Spells Per Player"
    }
});

[Keen IO] Error: Query 1 of 1 for project 530a932c36bf5a2d23000000 is not a valid request keen-3.0.0.visualize.js:836
[Keen IO] Check out our JavaScript SDK Usage Guide for Data Analysis: keen-3.0.0.visualize.js:836
[Keen IO] https://keen.io/docs/clients/javascript/usage-guide/#analyze-and-visualize keen-3.0.0.visualize.js:836

Spinner for wait time

Need a default spinner + hook to add custom one while waiting for queries to run/charts to load.

Boolean indices error (dataform bug)

Fix module defs and loading for AMD environments

I think there is an issue with you library (3.0.4) where Keen.utils.loadScript is fired as part of an IIFE that is not wrapped in AMD. Here is the offender:

https://github.com/keenlabs/keen-js/blob/master/src/plugins/keen-googlecharts.js#L21

I'm not 100% on how you build process works - but it looks like the plugins are coming after the outro:

https://github.com/keenlabs/keen-js/blob/master/Gruntfile.js#L53

Thoughts?

Allow custom formatting of metrics

You can't current modify a metric to add something like a '$' in front, or format the number to have commas, control the number of decimal places, etc. If you try to modify this.data.result before calling draw to turn the value into a string, you get the error message "The library you selected does not support this chartType"

It would be nice to basically give users the ability to specify their own "prettyPrint" function. So that they can output a custom formatted value.

Improve docs for Metric visualizations

• Detail use of colors property

Improve error handling

Convert error views into a chart type and pass API responses in as text. This will resolve issues like #78.

Can't draw a table with no config

This may not work at all, but definitely with no config

var recentSpellCasts = new Keen.Query("extraction", {
eventCollection: "spell_casts",
timeframe: "this_7_days",
latest: 10,
property_names: ["spell.name", "player.name"]
});
client.draw(recentSpellCasts, document.getElementById("recentSpellCasts"), {
chartOptions: {}
});

Row order in data table has weird swap of the second and the middle row.

You should see:

Notice that row 2 is in row 6's position, and row 6 has pushed row 1 into row 2's position.

If you load this html in your browser:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://d26b395fwzu5fz.cloudfront.net/3.0.0/keen.min.js"></script>
</head>
<body id="chart">
   <script type="text/javascript">
            var rows = [];
            var max = 11;
            for ( var i = 1; i <= max; i++) {
               rows.push({
                  col1 : i,
                  col2 : Math.floor(max / 2) - i
               });
            }
            Keen.ready(function() {
               window.chart = new Keen.Visualization({
                  result : rows
               }, document.getElementById('chart'), {
                  chartType : 'datatable',
                  title : "test table",
                  width : "auto"
               });
            });
         </script>
</body>
</html>

Remove google jsapi as a requirement

When installing the library, I should not need to put this ahead of the Keen JS SDK:

<script src="https://www.google.com/jsapi"></script>

Metric color settings override all other metrics

The color of all Metric graphs are changed when a color is specified in just one object.

Unknown Header Type

You need to wrap the types passed through as headers to the Visualization API.

Uncaught Error: Unknown header type: false 

Limited colorset in the library

The new library has a limited colorset which makes pie charts quite confusing.
See screenshot from workbench (3 of the pie slices are the same color :-p)

PieChart with empty/null result causes viz error

Queries are being executed twice

Run a query and turn on XHR logging in your console. You'll see each query ran twice.

Enable Set and Refresh on Keen.

As per the example I do this:

var client = new Keen({
    projectId: projectId,
    readKey: readKey
});

Would be handy if I could set these and refresh the project settings. We have a Live/Test projects to separate data.

Something like this:

var client = new Keen({
    projectId: projectId,
    readKey: readKey
});
//--- Change url--
{
  client.set({projectId: otherProjectId, readKey: otherReadKey});
  client.refresh();
}

It's just a suggestion, I'm sure there is a more logical API implementation.

Set default widths on visuals

chartType parameter is missing on the data table vis docs.

Eric Nylander in users chat:
FYI, the chartType parameter is missing on the data table visualiztion docs.

Number visualization needs a shortener

http://cl.ly/image/3Q0z3G2d3031

v2 has a method that turns all numbers into 4 characters

Improve docs for DOM element containers

Should not need to pass in a config object for client.draw()

client.draw(uniquePlayersPerDay, document.getElementById("uniquePlayersPerDay"));

should work, but doesn't.

move chartStack supported options to top level config

the chartOptions catchall should only be for options passed straight to the underlying charting library

trackExternalLink doesn't work if there's another tag inside the a href

<a href="..." onclick="return trackExternalLink(...);"><span>click me</span></a>

The span messes with the tracking code and the page doesn't follow the link when clicked.

I don't know how to make this render the html, so view source on this?

Y axis values get to long

http://cl.ly/image/3j2K1s2r222j

Probably should run them through a shortener if possible?

Viz defaults for area chart

Single-series charts are displayed as area charts, and multi-series charts are displayed as line charts.

Trigger events from tracking methods

Add an event trigger for "addEvent"

Consider ":before" and ":complete" suffixes?

keen.js breaks in IE11

Reproducible in workbench:

File: keen.js, Line: 73, Column: 4
Unable to get property '1' of undefined or null reference

colors option does not work for metric

When colors = ["green"] is added to the display options of a Metric object, this colour is overriden by the default (at some point during drawing, the option colour is displayed, but after the final rendering, the default color ("#00afd7") is used.
When settings colors to at least 3 colors,fe. ["green","red","blue"], the second is used as the color of all objects of the Metric type, not just the one of which the colors option was specified.

Keen.ready() doesn't fire when put in <body>

Works if I put it in , strange!!!

Change chartType "datatable" to just "table"

Default legend for series should not be "value"

Perhaps pick something like collection name instead?

Passing in string to Keen.Visualization adds commas in weird places

Sometimes I want to pass a customer response like a response with a $ or a % sign on the front/end. I am having trouble passing in the string to make this work (see output to the left of the code sample).

Deprecation warning in moment js

Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to moment/moment#1407 for more info.

a series query that generates anything above 2500 data points produces an "unknown" error

Here's some context:

trackExternalLink ignores target attribute

From a user:

when I track an external link using trackExternalLink method, the target attribute of the link is overridden.
Consider this simple example: http://jsbin.com/suwoboha/1/edit . Clearly, the target="_blank" doesn't work due to this element being bind to trackExternalLink.

Pie charts need a default value for minimum pie slice percentage

If you have a data set with high cardinality, it looks like a thousand tiny slices. v2 had some reasonable defaults there.

Update defaults for single/multi series charts

• Single-series charts are displayed as area charts.
• Multi-series charts are displayed as line charts.

Keen.ready() doesn't work when viz library is loaded async

this.draw with two series as this.data errors

I thought this was supposed to draw a double line chart?

var averageSpellsPerPlayer = client.run([uniquePlayersPerDay, spellsCastPerDay]);
averageSpellsPerPlayer.on("complete", function(){
    this.draw(document.getElementById("comboDiv"));
});

Publish keen-js to Bower

trackExternalLink should print warnings if not attached to an anchor or form

I had my trackExternalLink attached to the parent of the link and couldn't figure out why it was returning false constantly. Had to view the source to figure it out.

This should print a warning in an else case since we already check node name anyway.

Unknown error response for an extraction that exceeds the limit

Pebble noticed it in the workbench.
They tried to run an extraction that was too large, but didn't get a useful error.
Here's the Groove Ticket

Data column(s) for axis #0 cannot be of type string

Jordan is getting this strange error in the workbench: "Data column(s) for axis #0 cannot be of type string"

Here's the setup: http://cl.ly/image/220b0h382V3R

Dustin said:
Jordan, it looks like we had an outdated copy of the JS lib cached. I just pushed an update that resolves the issue, so give it a quick refresh and let me know if it's working correctly. Sorry for the inconvenience!

Jordan said:

Interesting. Now the workbench is fine, but my CDN-loaded copy in my app is bad. :^[ http://cl.ly/image/421Q1h1V0J1s

I'm running a Maximum with these options:

{"eventCollection":"monthy_active_engaged_users","groupBy":"line_name","interval":"daily","targetProperty":"value","timeframe":"this_28_days"}

I've also tried copying the javascript source into my env, and running exactly what the workbench tells me -- no luck.

Same data same config, different result.

What else could it be, besides the library, somehow?

This conversation is happen in the google-devs group.

Note: Michelle also had issues with the library versioning which made it impossible to render certain charts, seemingly randomly.

Correct. My env is making this request:

https://api.keen.io/3.0/projects/53641ab9ce5e435d27000005/queries/maximum?api_key=key&event_collection=monthy_active_engaged_users&group_by=line_name&interval=daily&target_property=value&timeframe=this_28_days&timezone=-25200

And produces a chart like:

http://cl.ly/image/1D1W2G2f052Z

No errors in the console.

Keen.Metric options

Expand configuration options for Keen.Metric. This will resolve #76 and #72.

• configurable prettyNumber method
• prefix and suffix

{
  chartOptions: {
    decimals: 3,
    prefix: "$",
    suffix: "/mo"
  }
}

Expose date parser for google charts tooltips

Recommended based on interval:

• Yearly: 2014
• Monthly: April 2014
• Weekly/Daily: April 20, 2014
• Hourly: April 20, 2014, 12 AM
• Minutely: April 20, 2014, 12:00 AM

new color set not fully utilized?

new color set doesn't seem to be fully utilized, or utilized in the order of the array.

(taken from the workbench)

min y value should be 0 by default

http://cl.ly/image/2J283X071c04

Notice the chart shows negatives. The y axis should only go down to 0 by default.

client.draw can't take in a JSON object as data

    var averageSpellsPerPlayer = client.run([uniquePlayersPerDay, spellsCastPerDay]);
    averageSpellsPerPlayer.on("complete", function(){
      var newData = [];
      for(var i = 0; i < this.data[0]["result"].length; i++){
        newData.push({
          timeframe: this.data[0]["result"][i]["timeframe"],
          value: this.data[1]["result"][i]["value"] / this.data[0]["result"][i]["value"] 
        })
      }

      this.data = {result: newData};

      client.draw(this.data, document.getElementById("averageSpellsPerPlayer"), {
        chartOptions: {
          title: "Average Spells Per Player"
        }
      });
    })