How to "dump" points selected with the LinkedBrush plugin for mpld3?

How to "dump" points selected with the LinkedBrush plugin for mpld3? - javascript

I am trying to implement a plugin that allows the user to dump relevant information about points selected by the LinkedBrush plugin. I think my question is sort of related to this example. I have meta information tied to each point via the HTMLTooltip plugin. Ideally, I would somehow be able to dump this too. In the example I linked to, the information is outputted via a prompt. I wish to be able to save this information to a text file of some kind.
Put slightly differently: How do I determine which points in a scatter plot have been selected by the LinkedBrush tool so that I can save the information?

To solves this, I ended up just editing the LinkedBrush plugin code. I added a button that, when clicked, outputs the extent of the brush window by using brush.extent(). This prints the minimum and maximum x and y coordinates. I will basically use these coordinates to trace back to the input data set and determine which points fell within the bounds of the brush. If anyone has a better idea of how to solve this, I would welcome it.
class LinkedBrush(plugins.PluginBase):
JAVASCRIPT="""
mpld3.LinkedBrushPlugin = mpld3_LinkedBrushPlugin;
mpld3.register_plugin("linkedbrush", mpld3_LinkedBrushPlugin);
mpld3_LinkedBrushPlugin.prototype = Object.create(mpld3.Plugin.prototype);
mpld3_LinkedBrushPlugin.prototype.constructor = mpld3_LinkedBrushPlugin;
mpld3_LinkedBrushPlugin.prototype.requiredProps = [ "id" ];
mpld3_LinkedBrushPlugin.prototype.defaultProps = {
button: true,
enabled: null
};
function mpld3_LinkedBrushPlugin(fig, props) {
mpld3.Plugin.call(this, fig, props);
if (this.props.enabled === null) {
this.props.enabled = !this.props.button;
}
var enabled = this.props.enabled;
if (this.props.button) {
var BrushButton = mpld3.ButtonFactory({
buttonID: "linkedbrush",
sticky: true,
actions: [ "drag" ],
onActivate: this.activate.bind(this),
onDeactivate: this.deactivate.bind(this),
onDraw: function() {
this.setState(enabled);
},
icon: function() {
return mpld3.icons["brush"];
}
});
this.fig.buttons.push(BrushButton);
var my_icon = "data:image/png;base64,longstring_that_I_redacted";
var SaveButton = mpld3.ButtonFactory({
buttonID: "save",
sticky: false,
onActivate: this.get_selected.bind(this),
icon: function(){return my_icon;},
});
this.fig.buttons.push(SaveButton);
}
this.extentClass = "linkedbrush";
}
mpld3_LinkedBrushPlugin.prototype.activate = function() {
if (this.enable) this.enable();
};
mpld3_LinkedBrushPlugin.prototype.deactivate = function() {
if (this.disable) this.disable();
};
mpld3_LinkedBrushPlugin.prototype.get_selected = function() {
if (this.get_selected) this.get_selected();
};
mpld3_LinkedBrushPlugin.prototype.draw = function() {
var obj = mpld3.get_element(this.props.id);
if (obj === null) {
throw "LinkedBrush: no object with id='" + this.props.id + "' was found";
}
var fig = this.fig;
if (!("offsets" in obj.props)) {
throw "Plot object with id='" + this.props.id + "' is not a scatter plot";
}
var dataKey = "offsets" in obj.props ? "offsets" : "data";
mpld3.insert_css("#" + fig.figid + " rect.extent." + this.extentClass, {
fill: "#000",
"fill-opacity": .125,
stroke: "#fff"
});
mpld3.insert_css("#" + fig.figid + " path.mpld3-hidden", {
stroke: "#ccc !important",
fill: "#ccc !important"
});
var dataClass = "mpld3data-" + obj.props[dataKey];
var brush = fig.getBrush();
var dataByAx = [];
fig.axes.forEach(function(ax) {
var axData = [];
ax.elements.forEach(function(el) {
if (el.props[dataKey] === obj.props[dataKey]) {
el.group.classed(dataClass, true);
axData.push(el);
}
});
dataByAx.push(axData);
});
var allData = [];
var dataToBrush = fig.canvas.selectAll("." + dataClass);
var currentAxes;
function brushstart(d) {
if (currentAxes != this) {
d3.select(currentAxes).call(brush.clear());
currentAxes = this;
brush.x(d.xdom).y(d.ydom);
}
}
function brushmove(d) {
var data = dataByAx[d.axnum];
if (data.length > 0) {
var ix = data[0].props.xindex;
var iy = data[0].props.yindex;
var e = brush.extent();
if (brush.empty()) {
dataToBrush.selectAll("path").classed("mpld3-hidden", false);
} else {
dataToBrush.selectAll("path").classed("mpld3-hidden", function(p) {
return e[0][0] > p[ix] || e[1][0] < p[ix] || e[0][1] > p[iy] || e[1][1] < p[iy];
});
}
}
}
function brushend(d) {
if (brush.empty()) {
dataToBrush.selectAll("path").classed("mpld3-hidden", false);
}
}
this.get_selected = function(d) {
var brush = fig.getBrush();
var extent = brush.extent();
alert(extent);
}
this.enable = function() {
this.fig.showBrush(this.extentClass);
brush.on("brushstart", brushstart).on("brush", brushmove).on("brushend", brushend);
this.enabled = true;
};
this.disable = function() {
d3.select(currentAxes).call(brush.clear());
this.fig.hideBrush(this.extentClass);
this.enabled = false;
};
this.disable();
};
"""
def __init__(self, points, button=True, enabled=True):
if isinstance(points, mpl.lines.Line2D):
suffix = "pts"
else:
suffix = None
self.dict_ = {"type": "linkedbrush",
"button": button,
"enabled": False,
"id": utils.get_id(points, suffix)}

Related

Loading two similar scripts twice dosn't work

i have this javascript that I called cookiebar.js, it shows a sticky bar message for cookies, (source code)
(function (context) {
"use strict";
var win = context,
doc = win.document;
var global_instance_name = "cbinstance";
function contentLoaded(win, fn) {
var done = false,
top = true,
doc = win.document,
root = doc.documentElement,
add = doc.addEventListener ? "addEventListener" : "attachEvent",
rem = doc.addEventListener ? "removeEventListener" : "detachEvent",
pre = doc.addEventListener ? "" : "on",
init = function (e) {
if (e.type == "readystatechange" && doc.readyState != "complete") return;
(e.type == "load" ? win : doc)[rem](pre + e.type, init, false);
if (!done && (done = true)) fn.call(win, e.type || e);
},
poll = function () {
try {
root.doScroll("left");
} catch (e) {
setTimeout(poll, 50);
return;
}
init("poll");
};
if (doc.readyState == "complete") fn.call(win, "lazy");
else {
if (doc.createEventObject && root.doScroll) {
try {
top = !win.frameElement;
} catch (e) {}
if (top) poll();
}
doc[add](pre + "DOMContentLoaded", init, false);
doc[add](pre + "readystatechange", init, false);
win[add](pre + "load", init, false);
}
}
var Cookies = {
get: function (key) {
return decodeURIComponent(doc.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(key).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
set: function (key, val, end, path, domain, secure) {
if (!key || /^(?:expires|max\-age|path|domain|secure)$/i.test(key)) {
return false;
}
var expires = "";
if (end) {
switch (end.constructor) {
case Number:
expires = end === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + end;
break;
case String:
expires = "; expires=" + end;
break;
case Date:
expires = "; expires=" + end.toUTCString();
break;
}
}
doc.cookie = encodeURIComponent(key) + "=" + encodeURIComponent(val) + expires + (domain ? "; domain=" + domain : "") + (path ? "; path=" + path : "") + (secure ? "; secure" : "");
return true;
},
has: function (key) {
return new RegExp("(?:^|;\\s*)" + encodeURIComponent(key).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=").test(doc.cookie);
},
remove: function (key, path, domain) {
if (!key || !this.has(key)) {
return false;
}
doc.cookie = encodeURIComponent(key) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (domain ? "; domain=" + domain : "") + (path ? "; path=" + path : "");
return true;
},
};
var Utils = {
merge: function () {
var obj = {},
i = 0,
al = arguments.length,
key;
if (0 === al) {
return obj;
}
for (; i < al; i++) {
for (key in arguments[i]) {
if (Object.prototype.hasOwnProperty.call(arguments[i], key)) {
obj[key] = arguments[i][key];
}
}
}
return obj;
},
str2bool: function (str) {
str = "" + str;
switch (str.toLowerCase()) {
case "false":
case "no":
case "0":
case "":
return false;
default:
return true;
}
},
fade_in: function (el) {
if (el.style.opacity < 1) {
el.style.opacity = (parseFloat(el.style.opacity) + 0.05).toFixed(2);
win.setTimeout(function () {
Utils.fade_in(el);
}, 50);
}
},
get_data_attribs: function (script) {
var data = {};
if (Object.prototype.hasOwnProperty.call(script, "dataset")) {
data = script.dataset;
} else {
var attribs = script.attributes;
var key;
for (key in attribs) {
if (Object.prototype.hasOwnProperty.call(attribs, key)) {
var attr = attribs[key];
if (/^data-/.test(attr.name)) {
var camelized = Utils.camelize(attr.name.substr(5));
data[camelized] = attr.value;
}
}
}
}
return data;
},
normalize_keys: function (options_object) {
var camelized = {};
for (var key in options_object) {
if (Object.prototype.hasOwnProperty.call(options_object, key)) {
var camelized_key = Utils.camelize(key);
camelized[camelized_key] = options_object[camelized_key] ? options_object[camelized_key] : options_object[key];
}
}
return camelized;
},
camelize: function (str) {
var separator = "-",
match = str.indexOf(separator);
while (match != -1) {
var last = match === str.length - 1,
next = last ? "" : str[match + 1],
upnext = next.toUpperCase(),
sep_substr = last ? separator : separator + next;
str = str.replace(sep_substr, upnext);
match = str.indexOf(separator);
}
return str;
},
find_script_by_id: function (id) {
var scripts = doc.getElementsByTagName("script");
for (var i = 0, l = scripts.length; i < l; i++) {
if (id === scripts[i].id) {
return scripts[i];
}
}
return null;
},
};
var script_el_invoker = Utils.find_script_by_id("cookiebanner");
var Cookiebanner = (context.Cookiebanner = function (opts) {
this.init(opts);
});
Cookiebanner.prototype = {
cookiejar: Cookies,
init: function (opts) {
this.inserted = false;
this.closed = false;
this.test_mode = false;
var default_text = "This site uses cookies.";
var default_link = "Detail";
this.default_options = {
cookie: "cookiebanner-accepted",
closeText: "✖",
cookiePath: "/",
debug: false,
expires: Infinity,
zindex: 255,
mask: false,
maskOpacity: 0.5,
maskBackground: "#000",
height: "auto",
minHeight: "21px",
bg: "#000",
fg: "#ddd",
link: "#aaa",
position: "bottom",
message: default_text,
linkmsg: default_link,
moreinfo: "http://www.examplesite123.com/cookie-policy/",
effect: null,
fontSize: "14px",
fontFamily: "arial, sans-serif",
instance: global_instance_name,
textAlign: "center",
acceptOnScroll: true,
};
this.options = this.default_options;
this.script_el = script_el_invoker;
if (this.script_el) {
var data_options = Utils.get_data_attribs(this.script_el);
this.options = Utils.merge(this.options, data_options);
}
if (opts) {
opts = Utils.normalize_keys(opts);
this.options = Utils.merge(this.options, opts);
}
global_instance_name = this.options.instance;
this.options.zindex = parseInt(this.options.zindex, 10);
this.options.mask = Utils.str2bool(this.options.mask);
if ("string" === typeof this.options.expires) {
if ("function" === typeof context[this.options.expires]) {
this.options.expires = context[this.options.expires];
}
}
if ("function" === typeof this.options.expires) {
this.options.expires = this.options.expires();
}
if (this.script_el) {
this.run();
}
},
log: function () {
if ("undefined" !== typeof console) {
console.log.apply(console, arguments);
}
},
run: function () {
if (!this.agreed()) {
var self = this;
contentLoaded(win, function () {
self.insert();
});
}
},
build_viewport_mask: function () {
var mask = null;
if (true === this.options.mask) {
var mask_opacity = this.options.maskOpacity;
var bg = this.options.maskBackground;
var mask_markup =
'<div id="cookiebanner-mask" style="' +
"position:fixed;top:0;left:0;width:100%;height:100%;" +
"background:" +
bg +
";zoom:1;filter:alpha(opacity=" +
mask_opacity * 100 +
");opacity:" +
mask_opacity +
";" +
"z-index:" +
this.options.zindex +
';"></div>';
var el = doc.createElement("div");
el.innerHTML = mask_markup;
mask = el.firstChild;
}
return mask;
},
agree: function () {
this.cookiejar.set(this.options.cookie, 1, this.options.expires, this.options.cookiePath);
return true;
},
agreed: function () {
return this.cookiejar.has(this.options.cookie);
},
close: function () {
if (this.inserted) {
if (!this.closed) {
if (this.element) {
this.element.parentNode.removeChild(this.element);
}
if (this.element_mask) {
this.element_mask.parentNode.removeChild(this.element_mask);
}
this.closed = true;
}
}
return this.closed;
},
agree_and_close: function () {
this.agree();
return this.close();
},
cleanup: function () {
this.close();
return this.unload();
},
unload: function () {
if (this.script_el) {
this.script_el.parentNode.removeChild(this.script_el);
}
context[global_instance_name] = undefined;
return true;
},
insert: function () {
this.element_mask = this.build_viewport_mask();
var zidx = this.options.zindex;
if (this.element_mask) {
zidx += 1;
}
var el = doc.createElement("div");
el.className = "cookiebanner";
el.style.position = "fixed";
el.style.left = 0;
el.style.right = 0;
el.style.height = this.options.height;
el.style.minHeight = this.options.minHeight;
el.style.zIndex = zidx;
el.style.background = this.options.bg;
el.style.color = this.options.fg;
el.style.lineHeight = el.style.minHeight;
el.style.padding = "5px 16px";
el.style.fontFamily = this.options.fontFamily;
el.style.fontSize = this.options.fontSize;
el.style.textAlign = this.options.textAlign;
if ("top" === this.options.position) {
el.style.top = 0;
} else {
el.style.bottom = 0;
}
el.innerHTML = '<div class="cookiebanner-close" style="float:right;padding-left:5px;">' + this.options.closeText + "</div>" + "<span>" + this.options.message + " <a>" + this.options.linkmsg + "</a></span>";
this.element = el;
var el_a = el.getElementsByTagName("a")[0];
el_a.href = this.options.moreinfo;
el_a.target = "_blank";
el_a.style.textDecoration = "none";
el_a.style.color = this.options.link;
var el_x = el.getElementsByTagName("div")[0];
el_x.style.cursor = "pointer";
function on(el, ev, fn) {
var add = el.addEventListener ? "addEventListener" : "attachEvent",
pre = el.addEventListener ? "" : "on";
el[add](pre + ev, fn, false);
}
var self = this;
on(el_x, "click", function () {
self.agree_and_close();
});
if (this.element_mask) {
on(this.element_mask, "click", function () {
self.agree_and_close();
});
doc.body.appendChild(this.element_mask);
}
if (this.options.acceptOnScroll) {
on(window, "scroll", function () {
self.agree_and_close();
});
}
doc.body.appendChild(this.element);
this.inserted = true;
if ("fade" === this.options.effect) {
this.element.style.opacity = 0;
Utils.fade_in(this.element);
} else {
this.element.style.opacity = 1;
}
},
};
if (script_el_invoker) {
if (!context[global_instance_name]) {
context[global_instance_name] = new Cookiebanner();
}
}
})(window);
I load it in this way in functions.php in Wordpress:
function wpb_hook_javascript() {
?>
<script defer type="text/javascript" id="cookiebanner" src="https://www.examplesite123.com/cookiebar.js"></script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
It works fine.
Now i duplicate the same javascript code and i called it stickybar.js. I add some modifications, also change class with name "stickybar":
The code of the stickybar.js is here (i pasted it in jsfiddle because there is too much text for stackoverflow)
Then i show this second bar (stickybar.js) only on mobile device and after 8 second with this CSS:
.stickybar { display: none; }
#media only screen and (max-device-width:480px) {
.stickybar {
display: block;
animation: cssAnimation 0s 8s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
}
I load it in Wordpress with this code in functions.php:
function wpb_hook_javascript() {
?>
<script defer type="text/javascript" id="cookiebanner" src="https://www.examplesite123.com/stickybar.js"></script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
It works fine.
If i load one by one of this codes, they work fine.
The problem is that when i load the two scripts together in this way in functions.php, only the first works:
function wpb_hook_javascript() {
?>
<script defer type="text/javascript" id="cookiebanner" src="https://www.examplesite123.com/cookiebar.js"></script>
<script defer type="text/javascript" id="cookiebanner" src="https://www.examplesite123.com/stickybar.js"></script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
How can i load the two scripts together?

The comment thread on this question is semantically correct, you can only have one instance of each html id attribute, they must be unique, and your find_script_by_id methods are both searching for the same thing.
However, you're doing what's generally called "baking in" the scripts into your header which is at best, a faux pas, at least as far as WordPress is concerned. Properly Enqueueing Scripts (and styles) is very easy in WordPress, and your future self, web clients, and other people who look at your code will thank you for doing it.
It's not unlike how you're "baking in" the scripts now:
function wpb_hook_javascript() {
?>
<script defer type="text/javascript" id="cookiebanner" src="https://www.examplesite123.com/cookiebar.js"></script>
<script defer type="text/javascript" id="cookiebanner" src="https://www.examplesite123.com/stickybar.js"></script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
But with a few things changed:
function enqueue_my_scripts(){
wp_enqueue_script( 'cookie-bar', 'https://www.examplesite123.com/cookiebar.js', array(), '1.0', true );
wp_enqueue_script( 'sticky-bar', 'https://www.examplesite123.com/stickybar.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_scripts' );
Namely, it uses the wp_enqueue_script() function on the wp_enqueue_scripts hook. This lets you defer the script to the footer, load in the header, add version numbers to prevent caching issues, add dependencies, allows you to dynamically add/remove them programatically,gives them unique ID's based on the handle, and much more. (You do still need to update your find_script_by_id functions to use these new handles instead cookie-bar, sticky-bar, change the global_instance_name, etc. (more on that in a second)
With that said, if the .js files are on your server, you'll want to use site_url(), plugins_url(), get_stylesheet_directory_uri(), or similar functions to grab the URL of the file instead of typing it out. If you're using a remote resource, don't worry about it, but if they're on you're site, you should swap out the baked in version for that so you don't have issues if you ever move your site, and it allows you easier methods to edit the version to prevent caching problems if you change them.
Back to your variables, you may also want to replace your find_script_by_id type functions with document.currentScript instead, to allow them to be more abstract and not rely on typo/duplicate prone element IDs, and instead reference the currently running <script> tag.

Jquery Not Synchronized with the DOM

I found a new problem where when i manipulate the dom using jquery. The dom is not updated.
Here we go.
var PostCard = function($root) {
this.$root = $root;
this.stuff_id = this.$root.data('stuff_id');
this.id = this.$root.data('id');
this.is_owner = this.$root.data('is_owner');
this.$propose_button = null;
this.$favorite_button = null;
this.init();
this.initEvents();
};
PostCard.prototype.init = function () {
this.$propose_button = this.$root.find("." + PostCard.prototype.CSS_CLASSES.PROPOSE_BUTTON);
this.$proposal_box_modal = this.$root.find("." + PostCard.prototype.CSS_CLASSES.PROPOSAL_MODAL);
this.$proposal_box = this.$root.find("." + PostCard.prototype.CSS_CLASSES.PROPOSAL_BOX);
this.$favorite_button = this.$root.find(".post-card-button-favorite");
this.$total_favorite = this.$root.find('.post-card-total-favorite');
this.$image_view_editor = this.$root.find("#" + this.id + "-image-view");
this.image_view_editor = new ImageViewEditor(this.$image_view_editor);
this.proposal_box = new HomeProposalBox(this.$proposal_box);
};
PostCard.prototype.initEvents = function() {
var self =this;
$(document).on("click", "#" + this.id,function(e) {
if(e.target && $(e.target).hasClass('post-card-button-propose') ){
if(self.is_owner ) {
return false;
}
if(CommonLibrary.isGuest()) {
return false;
}
self.$proposal_box_modal.modal("show").load($(this).attr("value"));
} else if(e.target && $(e.target).hasClass('post-card-button-favorite')) {
self.clickFavoriteButton_();
}
});
PostCard.prototype.clickFavoriteButton_ = function() {
this.markFavorite();
};
PostCard.prototype.markFavorite = function() {
this.$favorite_button.addClass('post-card-button-red');
};
When Favorite button is clicked, the clickFavoriteButton() will be trigerred, and markfavorite method will be fired next.
The problem is although this.$favorite_button is updated (the class is added to the variable), the dom in the page is not updated
this only happens to dynamically loaded element, and does not happen to element that has been around since the page is loaded.
The PostCard is created in PostList class
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var PostList = function($root) {
this.$root = $root;
this.stuff_ids = '';
this.id = $root.data('id');
this.location = $root.data('location');
this.query = '';
this.post_cards = [];
this.$post_list_area = null;
this.permit_retrieve_post = true;
this.init();
this.initEvents();
};
PostList.prototype.SCROLL_VALUE = 95;
PostList.prototype.init = function() {
$.each($(".post-card"), function(index, value) {
this.post_cards.push(new PostCard($(value)));
if(this.stuff_ids === '' ) {
this.stuff_ids += $(value).data('stuff_id');
} else {
this.stuff_ids += "," + $(value).data('stuff_id');
}
}.bind(this));
this.$post_list_area = this.$root.find('.post-list-area');
};
PostList.prototype.initEvents = function() {
$(window).scroll({self:this}, this.retrievePostWhenScroll_);
};
PostList.prototype.retrievePostWhenScroll_ = function(e) {
var self = e.data.self;
var scrollPercentage =
((document.documentElement.scrollTop + document.body.scrollTop) /
(document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
if(scrollPercentage > PostList.prototype.SCROLL_VALUE) {
if(self.permit_retrieve_post) {
self.permit_retrieve_post = false;
$.ajax({
url: $("#base-url").val() + "/site/get-more-posts",
type: 'post',
data: {'ids' : self.stuff_ids, query: self.query, location: self.location},
success: function(data) {
var parsedData = JSON.parse(data);
if(parsedData['status'] === 1) {
self.$post_list_area.append(parsedData['view']);
$(parsedData['view']).filter('.post-card').each(function(index, value) {
self.post_cards.push(new PostCard($(value)));
self.stuff_ids += "," + $(value).data('stuff_id');
});
}
self.permit_retrieve_post = true;
},
error : function(data) {
self.permit_retrieve_post = true;
}
});
}
}
};
When you scroll the page, the retrieveWhenScroll method will be fired and PostCard will be dynamically added

philogb/Treemap only renders undefined

I am trying to use https://github.com/philogb/jit to create a treemap of data coming from top. The data looks like:
"{"rsyslogd":{"children":[{"children":[],"data":{"PID":"17670","$color":"#D40106","cmdinfo":"<br><b>USER</b>:syslog<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:383m<br><b>RES</b>:5412<br><b>SHR</b>:1108<br><b>S</b>:S<br><b>CPU</b>:177%<br>%<b>MEM</b>:0.3%<br><b>TIME+</b>:32230:25<br>","$area":4},"id":"proc-1-17670","name":"rsyslogd"}],"data":{"PID":"rsyslogd","$area":50},"id":"proc-rsyslogd","name":"rsyslogd(1)"},"init":{"children":[{"children":[],"data":{"PID":"1","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:23584<br><b>RES</b>:1324<br><b>SHR</b>:1044<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.1%<br><b>TIME+</b>:0:00.10<br>","$area":2},"id":"proc-1-1","name":"init"}],"data":{"PID":"init","$area":30},"id":"proc-init","name":"init(1)"},"dbus-daemon":{"children":[{"children":[],"data":{"PID":"88","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:messageb<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:23556<br><b>RES</b>:328<br><b>SHR</b>:324<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.0%<br><b>TIME+</b>:0:00.00<br>","$area":1},"id":"proc-1-88","name":"dbus-daemon"}],"data":{"PID":"dbus-daemon","$area":20},"id":"proc-dbus-daemon","name":"dbus-daemon(1)"},"sshd":{"children":[{"children":[],"data":{"PID":"183","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:49436<br><b>RES</b>:1640<br><b>SHR</b>:1528<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.1%<br><b>TIME+</b>:0:00.14<br>","$area":2},"id":"proc-1-183","name":"sshd"}],"data":{"PID":"sshd","$area":30},"id":"proc-sshd","name":"sshd(1)"},"cron":{"children":[{"children":[],"data":{"PID":"209","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:18900<br><b>RES</b>:704<br><b>SHR</b>:628<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.0%<br><b>TIME+</b>:0:01.34<br>","$area":1},"id":"proc-1-209","name":"cron"}],"data":{"PID":"cron","$area":20},"id":"proc-cron","name":"cron(1)"},"mysqld":{"children":[{"children":[],"data":{"PID":"240","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:mysql<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:334m<br><b>RES</b>:49m<br><b>SHR</b>:3988<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.2%<br><b>TIME+</b>:58:21.44<br>","$area":33},"id":"proc-1-240","name":"mysqld"}],"data":{"PID":"mysqld","$area":340},"id":"proc-mysqld","name":"mysqld(1)"},"sendmail-mta":{"children":[{"children":[],"data":{"PID":"317","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:68284<br><b>RES</b>:844<br><b>SHR</b>:648<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.1%<br><b>TIME+</b>:0:31.61<br>","$area":2},"id":"proc-1-317","name":"sendmail-mta"}],"data":{"PID":"sendmail-mta","$area":30},"id":"proc-sendmail-mta","name":"sendmail-mta(1)"},"apache2":{"children":[{"children":[],"data":{"PID":"372","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:342m<br><b>RES</b>:8404<br><b>SHR</b>:5412<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.5%<br><b>TIME+</b>:0:50.46<br>","$area":6},"id":"proc-1-372","name":"apache2"},{"children":[],"data":{"PID":"24804","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:369m<br><b>RES</b>:81m<br><b>SHR</b>:56m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:5.3%<br><b>TIME+</b>:0:07.93<br>","$area":54},"id":"proc-1-24804","name":"apache2"},{"children":[],"data":{"PID":"24821","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:366m<br><b>RES</b>:66m<br><b>SHR</b>:41m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.3%<br><b>TIME+</b>:0:06.27<br>","$area":44},"id":"proc-1-24821","name":"apache2"},{"children":[],"data":{"PID":"24828","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:359m<br><b>RES</b>:71m<br><b>SHR</b>:53m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.7%<br><b>TIME+</b>:0:06.39<br>","$area":48},"id":"proc-1-24828","name":"apache2"},{"children":[],"data":{"PID":"24832","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:361m<br><b>RES</b>:70m<br><b>SHR</b>:52m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.6%<br><b>TIME+</b>:0:04.18<br>","$area":47},"id":"proc-1-24832","name":"apache2"},{"children":[],"data":{"PID":"24860","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:368m<br><b>RES</b>:77m<br><b>SHR</b>:53m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:5.1%<br><b>TIME+</b>:0:06.15<br>","$area":52},"id":"proc-1-24860","name":"apache2"},{"children":[],"data":{"PID":"24862","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:361m<br><b>RES</b>:58m<br><b>SHR</b>:41m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.8%<br><b>TIME+</b>:0:03.86<br>","$area":39},"id":"proc-1-24862","name":"apache2"},{"children":[],"data":{"PID":"24878","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:359m<br><b>RES</b>:51m<br><b>SHR</b>:34m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.4%<br><b>TIME+</b>:0:01.54<br>","$area":35},"id":"proc-1-24878","name":"apache2"},{"children":[],"data":{"PID":"24882","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:362m<br><b>RES</b>:53m<br><b>SHR</b>:34m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.5%<br><b>TIME+</b>:0:01.60<br>","$area":36},"id":"proc-1-24882","name":"apache2"},{"children":[],"data":{"PID":"24885","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:366m<br><b>RES</b>:61m<br><b>SHR</b>:38m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.0%<br><b>TIME+</b>:0:02.65<br>","$area":41},"id":"proc-1-24885","name":"apache2"},{"children":[],"data":{"PID":"24887","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:366m<br><b>RES</b>:73m<br><b>SHR</b>:50m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.8%<br><b>TIME+</b>:0:02.04<br>","$area":49},"id":"proc-1-24887","name":"apache2"},{"children":[],"data":{"PID":"24888","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:363m<br><b>RES</b>:60m<br><b>SHR</b>:36m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.9%<br><b>TIME+</b>:0:02.34<br>","$area":40},"id":"proc-1-24888","name":"apache2"},{"children":[],"data":{"PID":"24889","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:363m<br><b>RES</b>:61m<br><b>SHR</b>:39m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.0%<br><b>TIME+</b>:0:02.81<br>","$area":41},"id":"proc-1-24889","name":"apache2"},{"children":[],"data":{"PID":"24892","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:356m<br><b>RES</b>:47m<br><b>SHR</b>:33m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.1%<br><b>TIME+</b>:0:02.60<br>","$area":32},"id":"proc-1-24892","name":"apache2"},{"children":[],"data":{"PID":"24893","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:355m<br><b>RES</b>:49m<br><b>SHR</b>:33m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.2%<br><b>TIME+</b>:0:01.70<br>","$area":33},"id":"proc-1-24893","name":"apache2"},{"children":[],"data":{"PID":"24897","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:363m<br><b>RES</b>:62m<br><b>SHR</b>:38m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.1%<br><b>TIME+</b>:0:02.44<br>","$area":42},"id":"proc-1-24897","name":"apache2"},{"children":[],"data":{"PID":"24900","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:365m<br><b>RES</b>:63m<br><b>SHR</b>:39m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.1%<br><b>TIME+</b>:0:01.82<br>","$area":42},"id":"proc-1-24900","name":"apache2"},{"children":[],"data":{"PID":"24903","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:364m<br><b>RES</b>:56m<br><b>SHR</b>:36m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.7%<br><b>TIME+</b>:0:03.43<br>","$area":38},"id":"proc-1-24903","name":"apache2"},{"children":[],"data":{"PID":"24924","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:365m<br><b>RES</b>:61m<br><b>SHR</b>:37m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.0%<br><b>TIME+</b>:0:02.13<br>","$area":41},"id":"proc-1-24924","name":"apache2"},{"children":[],"data":{"PID":"24926","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:362m<br><b>RES</b>:51m<br><b>SHR</b>:33m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.3%<br><b>TIME+</b>:0:00.81<br>","$area":34},"id":"proc-1-24926","name":"apache2"},{"children":[],"data":{"PID":"24930","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:367m<br><b>RES</b>:61m<br><b>SHR</b>:36m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.0%<br><b>TIME+</b>:0:01.32<br>","$area":41},"id":"proc-1-24930","name":"apache2"},{"children":[],"data":{"PID":"24933","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:355m<br><b>RES</b>:44m<br><b>SHR</b>:30m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.9%<br><b>TIME+</b>:0:00.56<br>","$area":30},"id":"proc-1-24933","name":"apache2"},{"children":[],"data":{"PID":"24935","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:353m<br><b>RES</b>:39m<br><b>SHR</b>:24m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.5%<br><b>TIME+</b>:0:00.28<br>","$area":26},"id":"proc-1-24935","name":"apache2"},{"children":[],"data":{"PID":"24936","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:359m<br><b>RES</b>:52m<br><b>SHR</b>:33m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.4%<br><b>TIME+</b>:0:00.98<br>","$area":35},"id":"proc-1-24936","name":"apache2"},{"children":[],"data":{"PID":"24939","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:354m<br><b>RES</b>:41m<br><b>SHR</b>:27m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.7%<br><b>TIME+</b>:0:00.28<br>","$area":28},"id":"proc-1-24939","name":"apache2"},{"children":[],"data":{"PID":"24941","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:362m<br><b>RES</b>:57m<br><b>SHR</b>:34m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.7%<br><b>TIME+</b>:0:00.43<br>","$area":38},"id":"proc-1-24941","name":"apache2"},{"children":[],"data":{"PID":"24942","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:357m<br><b>RES</b>:41m<br><b>SHR</b>:26m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.7%<br><b>TIME+</b>:0:00.31<br>","$area":28},"id":"proc-1-24942","name":"apache2"},{"children":[],"data":{"PID":"24943","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:346m<br><b>RES</b>:16m<br><b>SHR</b>:8604<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:1.1%<br><b>TIME+</b>:0:00.09<br>","$area":12},"id":"proc-1-24943","name":"apache2"},{"children":[],"data":{"PID":"24944","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:351m<br><b>RES</b>:34m<br><b>SHR</b>:21m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.3%<br><b>TIME+</b>:0:00.18<br>","$area":24},"id":"proc-1-24944","name":"apache2"},{"children":[],"data":{"PID":"24945","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:363m<br><b>RES</b>:67m<br><b>SHR</b>:43m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.4%<br><b>TIME+</b>:0:00.99<br>","$area":45},"id":"proc-1-24945","name":"apache2"},{"children":[],"data":{"PID":"24946","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:342m<br><b>RES</b>:5552<br><b>SHR</b>:1800<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.4%<br><b>TIME+</b>:0:00.03<br>","$area":5},"id":"proc-1-24946","name":"apache2"},{"children":[],"data":{"PID":"24950","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:360m<br><b>RES</b>:48m<br><b>SHR</b>:30m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.2%<br><b>TIME+</b>:0:00.39<br>","$area":33},"id":"proc-1-24950","name":"apache2"}],"data":{"PID":"apache2","$area":11400},"id":"proc-apache2","name":"apache2(32)"},"newrelic-daemon":{"children":[{"children":[],"data":{"PID":"399","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:16232<br><b>RES</b>:292<br><b>SHR</b>:288<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.0%<br><b>TIME+</b>:0:00.00<br>","$area":1},"id":"proc-1-399","name":"newrelic-daemon"},{"children":[],"data":{"PID":"400","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:264m<br><b>RES</b>:7284<br><b>SHR</b>:2360<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.5%<br><b>TIME+</b>:40:33.01<br>","$area":6},"id":"proc-1-400","name":"newrelic-daemon"}],"data":{"PID":"newrelic-daemon","$area":80},"id":"proc-newrelic-daemon","name":"newrelic-daemon(2)"},"top":{"children":[{"children":[],"data":{"PID":"24988","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:19196<br><b>RES</b>:1328<br><b>SHR</b>:1048<br><b>S</b>:R<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.1%<br><b>TIME+</b>:0:00.00<br>","$area":2},"id":"proc-1-24988","name":"top"}],"data":{"PID":"top","$area":30},"id":"proc-top","name":"top(1)"}}"
I then convert this into a JavaScript Object using JSON.parse(...) and assign it to data .
Then the actual InfoVis code:
function getCanvasConfig() {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
return {
labelType: (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML',
nativeTextSupport: (!nativeCanvasSupport || (textSupport && !iStuff)),
useGradients: nativeCanvasSupport,
animate: !(iStuff || !nativeCanvasSupport)
};
}
var config = getCanvasConfig();
var attrs = {id: "infovis"};
var tmConfig = {
//where to inject the visualization
injectInto: attrs.id,
//parent box title heights
titleHeight: 15,
//enable animations
animate: config.animate,
//box offsets
offset: 1,
//Attach left and right click events
Events: {
enable: true,
onClick: function(node) {
if(node) tm.enter(node);
},
onRightClick: function() {
tm.out();
}
},
duration: 1000,
//Enable tips
Tips: {
enable: true,
//add positioning offsets
offsetX: 20,
offsetY: 20,
//implement the onShow method to
//add content to the tooltip when a node
//is hovered
onShow: function(tip, node, isLeaf, domElement) {
var html = "<div class=\"tip-title\">" + node.name
+ "</div><div class=\"tip-text\">";
var data = node.data;
if(data.PID) {
html += "<br><b>PID</b>: " + data.PID;
}
if(data.cmdinfo) {
html += ""+ data.cmdinfo +"";
}
tip.innerHTML = html;
}
},
//Add the name of the node in the correponding label
//This method is called once, on label creation.
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
var data = node.data;
var PID = data.PID;
var style = domElement.style;
style.display = '';
style.border = '1px solid transparent';
domElement.onclick = function() {
$('input#PIDtext').val(PID);
};
domElement.onmouseover = function() {
style.border = '1px solid #efefef';
};
domElement.onmouseout = function() {
style.border = '1px solid transparent';
};
}
};
var tm = new $jit.TM.Squarified(tmConfig);
tm.loadJSON(data);
tm.refresh();
However, all I keep getting is "undefined" injected into the canvas. Any clues?

Just leaving this here:
The problem was with the data. I need to have a root node with appropriate name & ID that had the rest of the data as children.

Infovis not Iterating over Root Node

I'm facing weird behaviour of Jit Infovis i'm using. I have two different html files that include a load json function from a Javascript file. The function is using infovis library to display a hypertree map from a json file. Both two html files load the same json file.
One html file has been succeeded rendering the map properly. But another one has not. It renders the map almost properly, but after i debugged it, i got it not iterating over the root node. Then, the root node becames inactive without label and clickability.
This is the js function i'm using.
var labelType, useGradients, nativeTextSupport, animate;
(function () {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();
var Log = {
elem: false,
write: function (text) {
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (350 - this.elem.offsetWidth / 2) + 'px';
}
};
function init(slugParam, pageParam) {
var isFirst = true;
var isSetAsRoot = false;
// alert(slugParam+ " | "+pageParam);
var url = Routing.generate('trade_map_buyer_json', { slug : slugParam, page : pageParam });
//init data
$.getJSON(url, function (json) {
var type = 'Buyer';
//end
var infovis = document.getElementById('infovis');
infovis.style.align = "center";
infovis.innerHTML = '';
// infovis.innerHTML = '<img align="center" id="gifloader" style="margin-left:50%; margin-top:50%" src="{{ asset('/bundles/jariffproject/frontend/images/preloader.gif') }}" width="30px" height="30px"/>'
var w = infovis.offsetWidth - 50, h = infovis.offsetHeight - 50;
url = url.replace("/json/", "/");
window.history.pushState("object or string", "Title", url);
//init Hypertree
var ht = new $jit.Hypertree({
//id of the visualization container
injectInto: 'infovis',
Navigation: {
enable: false,
panning: 'avoid nodes',
},
//canvas width and height
width: w,
height
: h,
//Change node and edge styles such as
//color, width and dimensions.
Node: {
dim: 9,
overridable: true,
color: "#66FF33"
},
Tips: {
enable: true,
type: 'HTML',
offsetX: 0,
offsetY: 0,
onShow: function(tip, node) {
// dump(tip);
tip.innerHTML = "<div style='background-color:#F8FFC9;text-align:center;border-radius:5px; padding:10px 10px;' class='node-tip'><p style='font-size:100%;font-weight:bold;'>"+node.name+"</p><p style='font-size:50%pt'>"+node.data.address+"</p></div>";
}
},
Events: {
enable: true,
type: 'HTML',
onMouseEnter: function(node, eventInfo, e){
var nodeId = node.id;
var menu1 = [
{'set as Root':function(menuItem,menu) {
menu.hide();
isSetAsRoot = true;
console.log(nodeId);
init(nodeId, 0);
}},
$.contextMenu.separator,
{'View details':function(menuItem,menu) {
}}
];
$('.node').contextMenu(menu1,{theme:'vista'});
}
},
Edge: {
lineWidth: 1,
color: "#52D5DE",
overridable: true,
},
onBeforePlotNode: function(node)
{
if (isFirst) {
console.log(node._depth);
var odd = isOdd(node._depth);
if (odd) {
node.setData('color', "#66FF33"); // hijau (supplier)
} else {
node.setData('color', "#FF3300"); // merah (buyer)
}
isFirst = false;
}
},
onPlotNode: function(node)
{
if (isSetAsRoot) {
var nodeInstance = node.getNode();
var nodeId = nodeInstance.id;
init(nodeId, 0);
isSetAsRoot = false;
}
},
onBeforeCompute: function (domElement, node) {
var dot = ht.graph.getClosestNodeToOrigin("current");
type = isOdd(dot._depth) ? 'Supplier' : 'Buyer';
},
//Attach event handlers and add text to the
//labels. This method is only triggered on label
//creation
onCreateLabel: function (domElement, node) {
var odd = isOdd(node._depth);
if (odd) {
node.setData('color', "#66FF33"); // hijau (supplier)
} else {
node.setData('color', "#FF3300"); // merah (buyer)
}
domElement.innerHTML = node.name;
// if (node._depth == 1) {
console.log("|"+node.name+"|"+node._depth+"|");
// }
$jit.util.addEvent(domElement, 'click', function () {
ht.onClick(node.id, {
onComplete: function () {
console.log(node.id);
ht.controller.onComplete(node);
}
});
});
},
onPlaceLabel: function (domElement, node) {
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth <= 1) {
style.fontSize = "0.8em";
style.color = "#000";
style.fontWeight = "normal";
} else if (node._depth == 2) {
style.fontSize = "0.7em";
style.color = "#555";
} else {
style.display = 'none';
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
},
onComplete: function (node) {
var dot = ht.graph.getClosestNodeToOrigin("current");
console.log(dot._depth);
var connCount = dot.data.size;
var showingCount = '';
if (connCount != undefined) {
var pageParamInt = (parseInt(pageParam)+1) * 10;
var modulus = connCount%10;
showingCount = (pageParamInt - 9) + " - " + pageParamInt;
if (connCount - (pageParamInt - 9) < 10) {
showingCount = (pageParamInt - 10) + " - " + ((pageParamInt - 10) + modulus);
}
} else {
connCount = '0';
showingCount = 'No Connections Shown'
}
}
});
//load JSON data.
ht.loadJSON(json);
//compute positions and plot.
ht.refresh();
//end
ht.controller.onComplete();
});
}
function isEven(n)
{
return isNumber(n) && (n % 2 == 0);
}
function isOdd(n)
{
return isNumber(n) && (n % 2 == 1);
}
function isNumber(n)
{
return n === parseFloat(n);
}
function processAjaxData(response, urlPath){
}
function dump(obj) {
var out = '';
for (var i in obj) {
out += i + ": " + obj[i] + "\n";
}
out = out + "\n\n"
console.log(out);
// or, if you wanted to avoid alerts...
var pre = document.createElement('pre');
pre.innerHTML = out;
document.body.appendChild(pre)
}
What's probably causing this?

Please check whether there is conflict id. Basically infovis render each nodes by the id.
And if there is an DOM element that has the same id with one DOM element of a node. It would conflict and won't render
you can check it by duming dom element iterating over the nodes.

How to create a plugin to add attachment or file in rich text editor of Adobe CQ 5?

I need help in creating a plugin for rich text editor in Adobe cq 5 to add an image, pdf, video, ppt or any file into rich text editor.
The existing rte plugins that are available are findreplace, undo, spellcheck, table etc
How to create a plugin to add a file to rich text editor?
The plugins are an ext js files. Appreciate if any one can suggest answer. It will be of great help.
Thanks

I added a custom drop down into my RTE. It was used to add values to the editor on selecting values from it. I think this might help you solve your issue because similarly you can create your required plugin.
Please refer comments next to the methods for your reference.
/**
* Placeholder Plugin
*/
var keyvalueEnteries = [];
var newText;
var doc;
var range
CUI.rte.plugins.PlaceholderPlugin = new Class({
toString: "PlaceholderPlugin",
extend: CUI.rte.plugins.Plugin,
/**
* #private
*/
cachedFormats: null,
/**
* #private
*/
formatUI: null,
getFeatures: function() {
return [ "Myparaformat" ];
},
/**
* #private
*
*/
getKeys: function() {
var com = CUI.rte.Common;
if (this.cachedFormats == null) {
this.cachedFormats = this.config.formats || { };
com.removeJcrData(this.cachedFormats);
this.cachedFormats = com.toArray(this.cachedFormats, "tag", "description");
}
return this.cachedFormats;
},
initializeUI: function(tbGenerator) {
var plg = CUI.rte.plugins;
var ui = CUI.rte.ui;
if (this.isFeatureEnabled("placeHolder")) {
this.formatUI = tbGenerator.createParaFormatter("placeHolder", this,null,this.getKeys());
tbGenerator.addElement("placeHolder", plg.Plugin.SORT_PARAFORMAT, this.formatUI,
10);
}
},
notifyPluginConfig: function(pluginConfig) { //This function gets executed once on load of RTE for the first time
var url = pluginConfig.sourceURL;
keyvalueEnteries = CQ.HTTP.eval(url);
keyvalueEnteries = JSON.stringify(keyvalueEnteries);
if(keyvalueEnteries == undefined){
keyvalueEnteries = '[{"key":"","value":"None"}]';
}
pluginConfig = pluginConfig || { };
//creating JSON sttructure
var placeholderJSON = '{"formats":' + keyvalueEnteries + '}';
var placeHolderVals = eval('(' + placeholderJSON + ')');
var defaults = placeHolderVals;
if (pluginConfig.formats) {
delete defaults.formats;
}
CUI.rte.Utils.applyDefaults(pluginConfig, defaults);
this.config = pluginConfig;
},
execute: function(cmd) { // This function gets executed when there is change in the state of custom plugin/drop down
if (this.formatUI) {
var formatId = this.formatUI.getSelectedFormat();
if (formatId && range != undefined) {
var placeholderElement = "";
if(formatId == 'none' && range.collapsed == false){//checks if None is selected in placeholder and the text is selected
range.deleteContents();
}else if(formatId != 'none'){
placeholderElement = document.createTextNode(" ${" + formatId + "} ");
range.insertNode(placeholderElement); //INSERTS PLACEHOLDER AT CURRENT CARET LOCATION
range.setStartAfter(placeholderElement);//INSERTS CURSOR AT THE END OF CURRENT PLACEHOLDER IF PLACEHOLDER IS SELECTED AGAIN
}
}
}
},
updateState: function(selDef) { // This function gets executed on click on the editor space in RTE
doc = selDef.editContext.doc; //GET THE DOCUMENT INSIDE THE IFRAME
range = doc.getSelection().getRangeAt(0); //GETS CURRENT CARET POSITION
}
});
//register plugin
CUI.rte.plugins.PluginRegistry.register("placeholder",
CUI.rte.plugins.PlaceholderPlugin);
CUI.rte.ui.ext.ParaFormatterImpl = new Class({
toString: "ParaFormatterImpl",
extend: CUI.rte.ui.TbParaFormatter,
// Interface implementation ------------------------------------------------------------
addToToolbar: function(toolbar) {
var com = CUI.rte.Common;
this.toolbar = toolbar;
if (com.ua.isIE) {
// the regular way doesn't work for IE anymore with Ext 3.1.1, hence working
// around
var helperDom = document.createElement("span");
helperDom.innerHTML = "<select class=\"x-placeholder-select\">"
+ this.createFormatOptions() + "</select>";
this.formatSelector = CQ.Ext.get(helperDom.childNodes[0]);
} else {
this.formatSelector = CQ.Ext.get(CQ.Ext.DomHelper.createDom({
tag: "select",
cls: "x-placeholder-select",
html: this.createFormatOptions()
}));
}
this.initializeSelector();
toolbar.add(
CQ.I18n.getMessage("Placeholder"), // Type the name you want to appear in RTE for the custom plugin /drop down
" ",
this.formatSelector.dom);
},
/**
* Creates HTML code for rendering the options of the format selector.
* #return {String} HTML code containing the options of the format selector
* #private
*/
createFormatOptions: function() {
var htmlCode = "";
if (this.formats) {
var formatCnt = this.formats.length;
htmlCode += "<option value='none'>None</option>";
for (var f = 0; f < formatCnt; f++) {
var text = this.formats[f].text;
htmlCode += "<option value=\"" + this.formats[f].value + "\">" + text
+ "</option>";
}
}
return htmlCode;
},
createToolbarDef: function() {
return {
"xtype": "panel",
"itemId": this.id,
"html": "<select class=\"x-placeholder-select\">"
+ this.createFormatOptions() + "</select>",
"listeners": {
"afterrender": function() {
var item = this.toolbar.items.get(this.id);
if (item && item.body) {
this.formatSelector = CQ.Ext.get(item.body.dom.childNodes[0]);
this.initializeSelector();
}
},
"scope": this
}
};
},
initializeSelector: function() {
this.formatSelector.on('change', function() {
var format = this.formatSelector.dom.value;
if (format.length > 0) {
this.plugin.execute(this.id);
}
}, this);
this.formatSelector.on('focus', function() {
this.plugin.editorKernel.isTemporaryBlur = true;
}, this);
// fix for a Firefox problem that adjusts the combobox' height to the height
// of the largest entry
this.formatSelector.setHeight(20);
},
getSelectorDom: function() {
return this.formatSelector.dom;
},
getSelectedFormat: function() {
var format;
if (this.formatSelector) {
format = this.formatSelector.dom.value;
if (format.length > 0) {
return format;
}
} else {
var item = this.toolbar.items.get(this.id);
if (item.getValue()) {
return item;
}
}
return null;
},
selectFormat: function(formatToSelect, auxRoot, formatCnt, noFormatCnt) {
var indexToSelect = -1;
var selectorDom = this.formatSelector.dom;
if ((formatToSelect != null) && (formatCnt == 1) && (noFormatCnt == 0)) {
var options = selectorDom.options;
for (var optIndex = 0; optIndex < options.length; optIndex++) {
var optionToCheck = options[optIndex];
if (optionToCheck.value == formatToSelect) {
indexToSelect = optIndex;
break;
}
}
}
selectorDom.disabled = (noFormatCnt > 0) && (auxRoot == null);
selectorDom.selectedIndex = indexToSelect;
}
});

We Keep Coding

JavaScript is the programming language of the Web.

How to "dump" points selected with the LinkedBrush plugin for mpld3? - javascript

Related

Loading two similar scripts twice dosn't work

Jquery Not Synchronized with the DOM

philogb/Treemap only renders undefined

Infovis not Iterating over Root Node

How to create a plugin to add attachment or file in rich text editor of Adobe CQ 5?

Categories

Resources