Keentivate

A Keen.js To HTML Wrapper

Project maintained by CultivateStudios Hosted on GitHub Pages — Theme by mattgraham, customized by Joe Wegner

Welcome to Keentivate.

I have some bad news. Keen.io's javascript SDK is a wee bit confusing. A wee bit, as in if you want to build any sort of intricate analytics dashboard, you're going to find yourself in a giant mess of spaghetti code. Keentivate solves that. Keentivate is an almost no-code javascript library that turns your HTML markup into Keen charts

Install

Install is easy. All you have to do is include the keentivate javascript file, establish your API keys, and you're golden. The code will look something like below.

var keenCharts = new keentivate({
  projectId: "51cee1b7897a2c5a74123401", 
  readKey: "d26495906529de8ee6f1234cdee37505b3eaf4d6f5b5c8c072eef9fc61db01011e7bff3a0ea98055239921986b15118480463aa1b2b6f89ef6328fa8ee84a43cb4927886657cdaab402dd36f0eca7a4a23761d5df3e50ac787803bd607272a719936261fa61b43458ec51de250fd8cf5"
}, 
{
  keenClass: "keentivate"
});

Examples

Note: All of these examples use my site, [WegnerDesign's](http://www.wegnerdesign.com), analytics data..

Number Chart

<div class="keentivate"
        data-keen-event="page_load"
        data-keen-filter="newVisitor=true"
        data-keen-label="New Visitors">
</div>

List

<div class="keentivate"
    data-keen-type="list"
    data-keen-event="page_load"
    data-keen-group="page.path"
    data-keen-title="Popular Pages"
    data-keen-label-field="page.path"
    data-keen-max-elements="10">
</div>

Line Chart

<div class="keentivate"
        data-keen-type="line"
        data-keen-event="interaction"
        data-keen-filter="action=finished_blog"
        data-keen-label="Articles Finished"
        data-keen-end="2013-07-15T10:00Z"
        data-keen-start="2013-07-01T18:00Z"
        data-keen-interval="daily"
        data-keen-width="470"
        data-keen-title="Articles Finished"
        data-keen-x="time"
        data-keen-y="field goals">
</div>

MultiLine Chart

<div class="keentivate"
        data-keen-type="multiline"
        data-keen-event="interaction"
        data-keen-filter="page.path=/"
        data-keen-label="Homepage Interactions"
        data-keen-end="2013-07-15T10:00Z"
        data-keen-start="2013-07-01T18:00Z"
        data-keen-interval="daily"
        data-keen-width="470"
        data-keen-group="action"
        data-keen-title="Homepage Interactions"
        data-keen-x="days"
        data-keen-y="interactions">
</div>

Pie Chart

<div class="keentivate"
    data-keen-type="pie"
    data-keen-event="page_load"
    data-keen-group="page.path"
    data-keen-title="Page Popularity">
</div>

Funnel Chart

<ul class="keentivate" data-keen-type="funnel" data-keen-watch="guid" data-keen-title="Read and Shared" data-keen-start="2013-07-01T18:00Z" data-keen-end="2013-07-15T18:00Z">
        <li data-keen-event="interaction" data-keen-filter="action=finished_blog"></li>
        <li data-keen-event="interaction" data-keen-filter="action=social_hover"></li>
        <li data-keen-event="interaction" data-keen-filter="action=social_click"></li>
</ul>