Develop Reference

HTML5 Webpack Dynamic Drag & Drop

Requirement
We are having a webrtc call solution where multiple people on a webinar call. we have used a third party WebRTC provider (Agora) with HTML webpack Build code they have shared.
We want to drag , drop and switch the users who are joining the channel . Its a complete HTML5 WebPack code.
CODE
Git Code : https://github.com/AgoraIO/Basic-Video-Call/tree/master/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack
Front End : https://webdemo.agora.io/agora-web-showcase/examples/Agora-Web-Tutorial-1to1-Web/
Problem
We used JQUERY Draggable and Droppable in the code which we have. But whenever a NEW user is added to the WEBRTC call a new DIV is generated and that is not DRAGABLE or DROPPABLE.
HELP REQUIRED
I would appreciate any good drag and drop library which can be used in dynamic users for HTML5 WEBPACK

It seems like you shared Agora code rather than your own code which contains the drag/drop logic. Can you share your code with your drag/drop implementation? It would make it easier to provide a relevant answer as to what might be going wrong.
Regarding drag and drop libraries, I really don't think a library is likely to help you until you know what's going wrong with your current implementation, but here are some options:
Draggable - Originally written by Shopify but now with other maintainers
InteractJS - Looks interesting but have not tried this one myself
(Not a library) Native HTML drag and drop API - What I've used when implementing similar features in the past, though with Daily rather than Agora (not that this should make a difference for the drag/drop features)

Creating charts in java or javascript without images

One of the project requirements for my new java web project is to have dynamic charts that will load really fast.
While in discussion , it was asked if we could implement charts without using images ie without loading jpg, png files etc. Also files like pdf cannot be used.
Basically my question is
Can charts be implemented in jsp/javascript without using images,pdf etc ?
ie even api's used should not provide end result as image,or pdf etc.
I did not say no right away , as I have implemented charts in console applications in C on screen. Can we do something like that on a webpage ? ie show a graph by drawing on screen dots,lines,circles etc.But it should be possible inside a div ?
PS : Comments and answer from Lucien Stals helped to understand that the technology i was looking for was svg.
I am looking for some nudging in the right direction from some of the experienced java , javascript programmers in SO.

Many JavaScript chart libraries exist that render in HTML5 on your page. You can probably find one that meets other requirements or wishes of your team, since each have feature areas in which they excel. http://www.zingchart.com has also been adding many ways to include them in your charts if you decide to go with something other than vanilla JavaScript (jQuery, Angular, etc). Full disclosure: I'm on the ZingChart team. I can help you weigh the pro's and con's if you find a few that catch your interest.

A simple bar chart would be easy enough to create with DIVs and CSS.
Anything more complicated and I think you are talking SVG, which could be drawn using http://raphaeljs.com/, or maybe http://d3js.org/ .
Also look at the HTML5 canvas element.

I would suggest to use Google Chart Framework. I did use it in past for my project and it is good.

You can check highcharts http://www.highcharts.com/ . This can be integrated easily with your javascript .

Most of this js chart plugins expects data in array or json format and can dynamically render the charts.Easy to integrate in the web pages
jgccharts.js Jquery charts
jquery charts plugin

Show relation b/w nodes in D3 tree graph

I am using d3 js library and eveything is working fine . But I need some enhancement and I don't know If d3 library already support the same or not.
Actually I want to show inter-relation b/w two nodes using de , you will get better idea from the image I have added.
I am using this library right now to show graph .The enhancement which I am looking for is possible using same library or I have to use any other library.

I found one library which suits my needs , it is a multiple parent library.
http://bl.ocks.org/robschmuecker/6afc2ecb05b191359862
I hope it helps someone else too

Javascript libraries for drawing multilevel trees

I would like to know about the available js libraries for drawing multilevel trees. Some functionalities I'd like to add to the created tree would be to make the nodes click-able and to be able to select an area on the graph and do actions based on the selection.

Maybe you should try arbor.js?

I'd check out Protovis. I've had good success with it. However, it is a very general library, giving you lots of building blocks to make nice graphs, but it won't be a turnkey solution.

Displaying a Multidimensional Array in a Bar Graph (in JavaScript)?

Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks

Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.

According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).