keen-dataviz.js

This project contains the most advanced data visualization functionality available for Keen IO, and will soon be built directly into keen-js, replacing and upgrading the current visualization capabilities of that library.

What's new:

Visualizations are powered by C3.js; a D3.js-based reusable chart library: check out what's available!
Breaking changes from keen-js: learn more about upgrading
Lightweight and blazing fast, with dramatic performance improvements
Create custom cohort analysis and visualizations

Upgrading from keen-js? Read this.

This example setup demonstrates how to put this library to work.

Getting started:

If you haven't done so already, login to Keen IO to create a project. The Project ID and API Keys are available on the Project Overview page. You will need these for the next steps.

Install the library and dependencies
Create and configure a new Dataviz instance
Load and parse data
Render into the page

Advanced usage:

Upgrading from keen-js:

There are several breaking changes and deprecations from keen-js.

client.draw() is not part of this SDK – check out keen-analysis.js for fetching query results
Method removal: the following methods are no longer necessary, and so they have been removed entirely:
- .parseRequest(): this is now handled by .data() (learn more)
- .dataType()
- .adapter()
- .initialize()
Method deprecations: the following method names have been changed, but are still available as aliases:
- .parseRawData() is now handled by .data()
- .chartType() is now .type() (new)
- .error() is now .message() (new)
Internal architecture: the internals for each Dataviz instance have changed dramatically. Please review the source if you have built something referencing these properties directly.
Dataset: the Dataset instance prototype and internal architecture have been heavily refactored:
- .input() has been removed, as instances no longer maintain the original raw input data
- .output() has been renamed to .data() (no alias)
- Dataset.parser() returns parsing functions for all standard API response types. These functions will correctly parse a given response and return a new Dataset instance. Learn more about these parsers

Additional resources:

Example setup demonstrates how to put all of this to work
Contributing is awesome and we hope you do!
Custom builds are encouraged as well - have fun!

Support:

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

Install the library

Include keen-dataviz.js and keen-dataviz.css within your page or project. Visualizations are powered by the C3.js library, which itself requires D3.js. These dependencies are already included.

<html>
  <head>
    <meta charset="utf-8">
    <!-- Use keen-analysis.js to fetch query results -->
    <script src="//d26b395fwzu5fz.cloudfront.net/keen-analysis-1.3.0.js"></script>

    <!-- Dataviz dependencies -->
    <link href="//d26b395fwzu5fz.cloudfront.net/keen-dataviz-1.2.1.css" rel="stylesheet" />
    <script src="//d26b395fwzu5fz.cloudfront.net/keen-dataviz-1.2.1.js"></script>
  </head>
  <body>
    <!-- DOM Element -->
    <div id="my-chart-div"></div>

    <!-- Create and Render -->
    <script>
      var chart = new Keen.Dataviz()
        .el('#my-chart-div')
        .colors(['red', 'orange', 'green'])
        .height(500)
        .title('New Customers per Week')
        .type('metric')
        .prepare();


      // Use keen-analysis.js to run a query
      // and pass the result into your chart:
      var client = new Keen({
        projectId: 'YOUR_PROJECT_ID',
        readKey: 'YOUR_READ_KEY'
      });

      client
        .query('count', {
          event_collection: 'pageviews',
          timeframe: 'this_14_days',
          interval: 'daily'
        })
        .then(function(res){
          // Handle the result
          chart
            .data(res)
            .render();
        })
        .catch(function(err){
          // Handle the error
          chart
            .message(err.message);
        });
    </script>
  </body>
</html>

This library can also be installed via npm or bower:

# via npm
$ npm install keen-dataviz

# or bower
$ bower install keen-dataviz

Create a Dataviz instance

Create a new Dataviz instance. This chart variable will be used throughout this guide as a reference to a Dataviz instance.

var chart = new Keen.Dataviz()
  .el('#dom-selector')
  .height(280)
  .title('Signups this week')
  .type('metric')
  .prepare();

// Fetch data from the API:
//  Imaginary callback ...
chart
  .data({ result: 621 })
  .render();

Learn more about the Dataviz API

Contributing

This is an open source project and we love involvement from the community! Hit us up with pull requests and issues. The more contributions the better!

Learn about contributing to this project.

Custom builds

Run the following commands to install and build this project:

# Clone the repo
$ git clone https://github.com/keen/keen-dataviz.js.git && cd keen-dataviz.js

# Install project dependencies
$ npm install

# Build project with gulp
# npm install -g gulp
$ gulp

# Build and launch to view demo page
$ gulp
$ open http://localhost:9002/demo

theopolisme / keen-dataviz.js

keen-dataviz.js

Install the library

Create a Dataviz instance

Contributing

Custom builds

About

Languages