Old school D3 from simpler times

All examples By author By category About

dustinlarimer

Full window Github gist

GeoCharts with Keen IO

GeoCharts with Keen IO

This recipe uses geographic properties generated by the ip_to_geo data enrichment addon.

If you would like to activate this addon for your project, just ask!

The team is available in HipChat, IRC, or at contact@keen.io.

<html>
<head>
  <title>GeoCharts with Keen IO</title>
  <script src="https://dc8na2hxrj29i.cloudfront.net/code/keen-2.1.2-min.js"></script>
  <script>
    
    Keen.configure({
      projectId: "your_project_id",
      readKey: "your_read_key"
    });
    
    Keen.onChartsReady(function() {
      
      var data = [["Country", "Count"]], options = {}, datatable, chart;
      
      var countries = new Keen.Metric("pageview", {
        analysisType: "count",
        groupBy: "keen_ip_geo_info.country",
        timeframe: "this_week"
      });
      
      countries.getResponse(function(response){
        for (var i = 0; i < response.result.length; i++) {
          data.push([response.result[i]["keen_ip_geo_info.country"], response.result[i]["result"]]);
        }
        options = {};
        datatable = google.visualization.arrayToDataTable(data);
        chart = new google.visualization.GeoChart(document.getElementById("map"));
        
        chart.draw(datatable, options);
      });
      
    });
    
  </script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

xxxxxxxxxx
 
<html>
<head>
  <title>GeoCharts with Keen IO</title>
  <script src="https://dc8na2hxrj29i.cloudfront.net/code/keen-2.1.2-min.js"></script>
  <script>
    
    Keen.configure({
      projectId: "your_project_id",
      readKey: "your_read_key"
    });
    
    Keen.onChartsReady(function() {
      
      var data = [["Country", "Count"]], options = {}, datatable, chart;
      
      var countries = new Keen.Metric("pageview", {
        analysisType: "count",
        groupBy: "keen_ip_geo_info.country",
        timeframe: "this_week"
      });
      
      countries.getResponse(function(response){
        for (var i = 0; i < response.result.length; i++) {
          data.push([response.result[i]["keen_ip_geo_info.country"], response.result[i]["result"]]);
        }
        options = {};
        datatable = google.visualization.arrayToDataTable(data);
        chart = new google.visualization.GeoChart(document.getElementById("map"));
        
        chart.draw(datatable, options);
      });
      
    });
    
  </script>
</head>
<body>
  <div id="map"></div>
</body>
</html>
    

https://dc8na2hxrj29i.cloudfront.net/code/keen-2.1.2-min.js