qlikview extension using d3js and json

Fri, 17 Jul 2015 14:32:40 GMT

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

topic qlikview extension using d3js and json in QlikView

qlikview extension using d3js and json