qlikview extension using d3js and json

[#1]

Hi,

I am trying to create a extension for world map using the d3js , i started with an example which is codes in html. I tried to use the same code in qv script.js and see if i can generate the chart. I had to use the d3.json to load the map co ordinates in a json file , and I am facing issue doing that . below is my code.

var template_path = "C://Users//502335699//AppData//Local//QlikTech//QlikView//Extensions//Objects//V-worldmap//"//Qva.Remote + "?public=only&name=Extensions/Objects/V-worldmap/";

function extension_Init()

{

if( typeof jQuery == 'undefined') {

  Qva.LoadScript(template_path + "jquery.min.js", function() {

  Qva.LoadScript(template_path + "d3.min.js", function() {

  Qva.LoadScript(template_path + "topojson.min.js", extension_Done);

  });

  });

} else {

  Qva.LoadScript(template_path + "d3.min.js", extension_Done);

   }

}

function extension_Done(){

//topojson code

{

topojson=function(){function t(t,e){function n(e){var n=t.arcs,r=n[0],o=[0,0];return n.forEach(function(t){o[0]+=t[0],o[1]+=t[1]}),[r,o]}var r={},o={},a={};e.forEach(function(t){var e=n(t);(r[e[0]]||(r[e[0]]=[])).push(t),(r[e[1]]||(r[e[1]]=[])).push(~t)}),e.forEach(function(t){var e,r,i=n(t),u=i[0],c=i[1];if(e=a)if(delete a[e.end],e.push(t),e.end=c,r=o){delete o[r.start];var s=r===e?e:e.concat(r);o[s.start=e.start]=a[s.end=r.end]=s}else if(r=a){delete o[r.start],delete a[r.end];var s=e.concat(r.map(function(t){return~t}).reverse());o[s.start=e.start]=a[s.end=r.start]=s}else o[e.start]=a[e.end]=e;else if(e=o)if(delete o[e.start],e.unshift(t),e.start=u,r=a){delete a[r.end];var f=r===e?e:r.concat(e);o[f.start=r.start]=a[f.end=e.end]=f}else if(r=o){delete o[r.start],delete a[r.end];var f=r.map(function(t){return~t}).reverse().concat(e);o[f.start=r.end]=a[f.end=e.end]=f}else o[e.start]=a[e.end]=e;else if(e=o)if(delete o[e.start],e.unshift(~t),e.start=c,r=a){delete a[r.end];var f=r===e?e:r.concat(e);o[f.start=r.start]=a[f.end=e.end]=f}else if(r=o){delete o[r.start],delete a[r.end];var f=r.map(function(t){return~t}).reverse().concat(e);o[f.start=r.end]=a[f.end=e.end]=f}else o[e.start]=a[e.end]=e;else if(e=a)if(delete a[e.end],e.push(~t),e.end=u,r=a){delete o[r.start];var s=r===e?e:e.concat(r);o[s.start=e.start]=a[s.end=r.end]=s}else if(r=o){delete o[r.start],delete a[r.end];var s=e.concat(r.map(function(t){return~t}).reverse());o[s.start=e.start]=a[s.end=r.start]=s}else o[e.start]=a[e.end]=e;else e=,o[e.start=u]=a[e.end=c]=e});var i=[];for(var u in a)i.push(a);return i}function e(e,n,r){function a(t){0>t&&(t=~t),(l||(l=[])).push(f)}function i(t){t.forEach(a)}function u(t){t.forEach(i)}function c(t){t.type==="GeometryCollection"?t.geometries.forEach(c):t.type in d&&(f=t,d[t.type](t.arcs))}var s=[];if(arguments.length>1){var f,l=[],d={LineString:i,MultiLineString:u,Polygon:u,MultiPolygon:function(t){t.forEach(u)}};c(n),l.forEach(arguments.length<3?function(t,e){s.push()}:function(t,e){r(t[0],t[t.length-1])&&s.push()})}else for(var p=0,h=e.arcs.length;h>p;++p)s.push(

);return o(e,{type:"MultiLineString",arcs:t(e,s)})}function n(t,e){return e.type==="GeometryCollection"?{type:"FeatureCollection",features:e.geometries.map(function(e){return r(t,e)})}:r(t,e)}function r(t,e){var n={type:"Feature",id:e.id,properties:e.properties||{},geometry:o(t,e)};return e.id==null&&delete n.id,n}function o(t,e){function n(t,e){e.length&&e.pop();for(var n,r=h[0>t?~t:t],o=0,i=r.length,u=0,c=0;i>o;++o)e.push([(u+=(n=r)[0])*f+d,(c+=n[1])*l+p]);0>t&&a(e,i)}function r(t){return[t[0]*f+d,t[1]*l+p]}function o(t){for(var e=[],r=0,o=t.length;o>r;++r)n(t,e);return e.length<2&&e.push(e[0]),e}function i(t){for(var e=o(t);e.length<4;)e.push(e[0]);return e}function u(t){return t.map(i)}function c(t){var e=t.type;return"GeometryCollection"===e?{type:e,geometries:t.geometries.map(c)}:e in v?{type:e,coordinates:v(t)}:null}var s=t.transform,f=s.scale[0],l=s.scale[1],d=s.translate[0],p=s.translate[1],h=t.arcs,v={Point:function(t){return r(t.coordinates)},MultiPoint:function(t){return t.coordinates.map(r)},LineString:function(t){return o(t.arcs)},MultiLineString:function(t){return t.arcs.map(o)},Polygon:function(t){return u(t.arcs)},MultiPolygon:function(t){return t.arcs.map(u)}};return c(e)}function a(t,e){for(var n,r=t.length,o=r-e;o<--r;)n=t,t[o++]=t,t=n}function i(t,e){for(var n=0,r=t.length;r>n;){var o=n+r>>>1;t<e?n=o+1:r=o}return n}function u(t){function e(t,e){t.forEach(function(t){0>t&&(t=~t);var n=o||(o=[]);n||(n.forEach(function(t){var n,r;r=i(n=a,t),n!==t&&n.splice(r,0,t),r=i(n=a,e),n!==e&&n.splice(r,0,e)}),n=e)})}function n(t,n){t.forEach(function(t){e(t,n)})}function r(t,e){t.type==="GeometryCollection"?t.geometries.forEach(function(t){r(t,e)}):t.type in u&&u[t.type](t.arcs,e)}var o=[],a=t.map(function(){return[]}),u={LineString:e,MultiLineString:n,Polygon:n,MultiPolygon:function(t,e){t.forEach(function(t){n(t,e)})}};return t.forEach(r),a}return{version:"1.1.0",mesh:e,feature:n,neighbors:u}}();

}

alert("topojson code added fine");

Qv.AddExtension("V-worldmap",

        function () {

  //Load a CSS style sheet

  Qva.LoadCSS(template_path + "style.css");

  var _this = this;

  var divName = "#tooltip-container"

  //_this.Layout.ObjectId.replace("\\", "_");

  if(_this.Element.children.length == 0) {//if this div doesn't already exist, create a unique div with the divName

  var ui = document.createElement("div");

  ui.setAttribute("id", divName);

  _this.Element.appendChild(ui);

  } else {

  //if it does exist, empty the div so we can fill it again

  $("#" + divName).empty();

  }

  // Create a variable to hold generated html

        var html = "<table>";

        // Cycle Through the data

var countrypop = new Array(this.Data.Rows.length) ;

          for (var i = 0; i < this.Data.Rows.length; i++) {

                // get the row

        var row = this.Data.Rows ;

                // Generate html

  countrypop = new Array(2);

  countrypop[0]=row[0].text;

  countrypop[1]=row[1].text;

  //pop[row[0].text] = row[1].text ;

                html += "<tr><td>" + row[0].text + "</td><td>" + row[1].text + "</td></tr>";

  //alert(country);

  //alert(pop[row[0].text]);

    }

        // Finalise the html

        html += "</table>";

        // Set the HTML

    //this.Element.innerHTML = html;

//delete from here

   {

  var config = {"data0":"Country (or dependent territory)","data1":"Population","label0":"label 0","label1":"label 1","color0":"#99ccff","color1":"#0050A1","width":800,"height":400}

  var width = 960,

      height = 960;

  var COLOR_COUNTS = 9;

  function Interpolate(start, end, steps, count) {

      var s = start,

          e = end,

          final = s + (((e - s) / steps) * count);

      return Math.floor(final);

  }

  function Color(_r, _g, _b) {

      var r, g, b;

      var setColors = function(_r, _g, _b) {

          r = _r;

          g = _g;

          b = _b;

      };

      setColors(_r, _g, _b);

      this.getColors = function() {

          var colors = {

              r: r,

              g: g,

              b: b

          };

          return colors;

      };

  }

  function hexToRgb(hex) {

      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

      return result ? {

          r: parseInt(result[1], 16),

          g: parseInt(result[2], 16),

          b: parseInt(result[3], 16)

      } : null;

  }

  function valueFormat(d) {

    if (d > 1000000000) {

      return Math.round(d / 1000000000 * 10) / 10 + "B";

    } else if (d > 1000000) {

      return Math.round(d / 1000000 * 10) / 10 + "M";

    } else if (d > 1000) {

      return Math.round(d / 1000 * 10) / 10 + "K";

    } else {

      return d;

    }

  }

  var COLOR_FIRST = config.color0, COLOR_LAST = config.color1;

  var rgb = hexToRgb(COLOR_FIRST);

  var COLOR_START = new Color(rgb.r, rgb.g, rgb.b);

  rgb = hexToRgb(COLOR_LAST);

  var COLOR_END = new Color(rgb.r, rgb.g, rgb.b);

  var startColors = COLOR_START.getColors(),

      endColors = COLOR_END.getColors();

  var colors = [];

  for (var i = 0; i < COLOR_COUNTS; i++) {

    var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i);

    var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i);

    var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i);

    colors.push(new Color(r, g, b));

  }

  var MAP_KEY = 0;

  var MAP_VALUE = 1;

  var projection = d3.geo.mercator()

      .scale((width + 1) / 2 / Math.PI)

      .translate([width / 2, height / 2])

      .precision(.1);

  var path = d3.geo.path()

      .projection(projection);

  var graticule = d3.geo.graticule();

  var svg = d3.select("#canvas-svg").append("svg")

      .attr("width", width)

      .attr("height", height);

  svg.append("path")

      .datum(graticule)

      .attr("class", "graticule")

      .attr("d", path);

  var valueHash = {};

  function log10(val) {

    return Math.log(val);

  }

  countrypop.forEach(function(d)

{ 

//alert(d[0]);

//alert(d[1]);

// alert(+d[MAP_VALUE]);

    valueHash[d[0]] = +d[1];

  });

  var quantize = d3.scale.quantize()

      .domain([0, 1.0])

      .range(d3.range(COLOR_COUNTS).map(function(i) { return i }));

  quantize.domain([d3.min(countrypop, function(d){

      return (+d[MAP_VALUE]) }),

    d3.max(countrypop, function(d){

      return (+d[MAP_VALUE]) })]);

  alert("all fine before json");

d3.json("world-topo-min.json", function(error, world) {

  if(error) alert("json data load failed");

var countries = topojson.feature(world, world.objects.countries).features;

  }

  );

}

},true);

}

extension_Init();

Seems like the json file is not loaded , I am not able to debug this , looking for some help on this.

Thanks,

Varun