Pie Charts for Keen IO with NVD3.js

readme.md

Pie Charts for Keen IO with NVD3.js

This example requires a hypothetical event model where pageviews are tracked with a type or category property, such as "homepage" or "article", so that views can be counted for each category.

Get Project ID & API Keys

If you haven’t done so already, login to Keen IO to create a project for your app. The Project ID and API Keys are available on the Project Overview page.

pie.js

// Pie Charts for Keen IO with NVD3.js

// Load and configure the client
var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.2-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
Keen.configure({
  projectId: 'your_project_id',
  readKey: 'your_read_key'
});

// Query: count events, grouped by type/category
var pageviews = new Keen.Metric("pageview", {
  analysisType: "count",
  timeframe: "last_week",
  groupBy: "type"
});

// Pie-maker runs query, formats response, and creates a responsive pie
var bakePie = function(query, selector, options) {
  query.getResponse(function(response){
    var pieData = [];
    var result = response.result;
    
    for (var i = 0; i < result.length; i++){
      // Map label to appropriate property
      pieData.push({
        "label" : result[i]['type'],
        "value" : result[i]['result']
      });
    }

    nv.addGraph(function() {
      
      var chart = nv.models.pieChart()
        .margin({ top: 20, right: 10, bottom: 20, left: 10 })
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .color(function(d) { 
          // remove if color mapping isn't necessary
          return colorMap[d.data.label];
        })
        .showLabels(true)
        .labelThreshold(.03)
        .labelType("percent")
        //.showLegend(false)
        .donut(true)
        .donutRatio(0.35)
        .donutLabelsOutside(true)
        .tooltips(true);
      
      d3.select(selector)
        .datum(pieData)
        .transition().duration(350)
        .call(chart);
      
      nv.utils.windowResize(chart.update);
      
      return chart;
    });
  });
};

// Optional: map labels to colors
// Remove chart.color() above to disable
var colorMap = {
  'home': 'blue',
  'category': 'pink',
  'profile': 'yellow',
  'article': 'green',
  'search': 'purple',
  'favorites': 'gold',
  'error-404': 'red'
};

// Pass the query into the pie maker
// NVD3 requires an existing SVG element
bakePie(pageviews, '#selector svg.chart');

// Optional: build a custom legend
// Set chart.showLegend(false)
// This example uses underscore.js
_.each(colorMap, function(color, label){
  $('#selector ul').append('<li><canvas style="background: ' + color + '"></canvas> ' + label + '</li>');
});