Rendering D3 Collapsible tree view inside a Bootbox popup? - javascript

I have a D3 collapsible tree view of a distribution, and I have a working code for it. I want to add it to a webpage, where the view should be visible as a popup on click of a button. I have been trying to use bootbox for creating the popup box. However, I am unable to understand how can I do this. I have tried bootbox.prompt and bootbox.dialog and passed my D3 tree code, but that doesn't work.
Can you suggest any other way to do it.
I have a working understanding of D3, and little to none knowledge of JS. Thanks!

Related

Tree multiselect JS with menu

I'm looking to make a Tree multislect, but not in the form of a dropdown, but rather a menu (which could slide).
Here is an example in image :
Link to image
I haven't found any plugin to do this, do you know any or do you think it's possible to create it easily?
Perhaps by creating a simple menu that contains several multiselects?
Thanks,

How to implement Interactive user guides?

I'm trying to build an interactive user guide for an application. Basically when its the users first time using the application they will be offered a tour of the site. It'll be pretty much done with a series of modal pop up boxes and focusing on elements.
My problem is i can't find a way to get control of the cursor to move it to certain locations of the page, is there a way to achieve this with JS, Jquery or CSS? Or is there any plugins available?
You can have a look at Bootstrap Tour or Joyride Plugin

Filter a DC.js table with a link?

I have a simple DC.js bar chart. I have it set up so you can click on an element and it gets filtered. This is standard behavior. It remains lit up, and the others go dark. You can then select other elements and have them added to the filter.
I'm looking for a way to replicate that functionality without clicking on the element. So like, i click a link outside the chart and the chart acts like I just clicked on some element.
Has anyone seen this done before?
Thanks,
Edit:
The reason I'm trying to do this is for accessibility. There's no way for keyboard users to interact as far as I can tell.
A hacky way to do it is to use chart.select to get a d3 selection of the element you want, and then fire an artificial click event as described here:
How to invoke "click" event programmatically in d3?
A better way is to do what the base chart onClick does:
_chart.filter(filter);
_chart.redrawGroup();
https://github.com/dc-js/dc.js/blob/master/src/base-mixin.js#L610
where filter is the key you want to filter on.

highchart inside facebox does not show up values

I am using highchart inside facebox to draw a chart. I can see the x-axis, y-axis, but not the values.. If I select the entire chart by dragging mouse, I can see the values. Which means that for some reason the chart is not being drawn. What could be the problem ?
Also I have a facebook login inside facebox, I can see the login button, but it does not work. Whereas similar login button on the main page works fine.
I tried my highchart code in jsfiddle, it works fine.
Here is how am I using facebox,
comp.append(hTag);
$('#statLeftRightId').append(comp);
jQuery.facebox({ div: '#statLeftRightId' });
I had a similar problem with HighCharts 2.2.1 and jQuery 1.7.1. I found that using jQuery 1.6.1 drew the charts.
As the answer to this thread indicates, there are some problems with jQuery 1.7.1. So I doubt this is a facebox problem.

jQuery UI Right-Click Menu AND General Advice Needed

So, recently I have been trying to build a user interface form builder that is almost entirely drag and drop. Kind of like Dreamweaver or visual studios I suppose. You guys can see it for yourselves HERE! I am trying to get a right-click menu thing going, however upon getting this working, I realized that it really conflicted with both the draggable and resizable methods. I don't have to right click at all, however when I go to resize or drag, it won't let me stop it. My cursor gets stuck either resizing or dragging, and requires vigorous clicking and shaking to free it. So, I'm assuming that I need a different plugin. Does anybody know of a stress free simple right-click menu that is hopefully compatible with jquery ui? I've tried google but most of them are simply a different version of the one I've already been using.
My second question is much more vague. As I previously mentioned, I'm trying to make a form builder. I'm wondering what the best way to go about this is as I feel sort of lost. My biggest problems right now are figuring out how I'm going to parse everything into code and export it. Does anybody know of anyone else who has attempted this or something similar? Is there any sort of guide?
I know the second questions has potential to be rather annoying, so feel free to only focus on the first one. Any help is appreciated, and I thank everybody who helps me.
EDIT: Just realized that you guys may not know how to use the builder. So far, all you can do is drag panels out onto the building space, and then drag tables within the panels. You can resize the building space, and panels vertically, and you can resize tables both vertically and horizontally. You can move panels and tables within their parent elements. Right click a panel or table for the contextmenu.
EDIT: So I think I found a context menu that will suffice, here it is. So, I guess that only leaves giving me advice on how to go about constructing this form builder.

Categories

Resources