Building Organizational chart using JavaScript - javascript

I have JSON data which come from server.
I want to display organization chart in the HTML file in the below format:
CEO
|
|
#Manager #Manager
I am using Dojo. I find this link extremely useful. I want to build exactly the same thing.
I am not able to find required dojo files in there site. So it could be proprietary to IBM.
I tried this link, but I do not find it useful.
Can someone please tell me how should I do it Using dojo or any other frameworks?

you can use Basic Primitives Diagrams
Which has various diagrams and optional format and is also open source,
it's client side JavaScript layout and rendering and no dependencies on 3rd party libraries.
It is also possible to try it online here

You might want to try google org charts . fairly easy to use it think.

I'm glad to offer jquery solution. As for which is the most easy to use, it all depends on your practical trying results.
The following snapshot shows the tree-like hierarchy created by jquery plugin OrgChart
If you have not svg, canvas or flex background, maybe this pure dom solution will be your favorite :)

Related

Which powerfull tools are used to create website and could GWT and GXT work ?

So I started working this year after finished studying last year. I have been exposed to so many things in the working environment. Suck as Maven, GWT and Hibernate.
Now I got this side project in which I just need to create a simple website which would bassically just display some information and contacting details.
So I was wondering if HTML5 CSS and JavaScript is still the way to go and if there are not powerfull frameworks in which could you help me do animations and graphics much easier.
Also if you know GWT and GXT would it be a bad idea to create a visually apealing website using these frameworks.
Thank you so much for reading
Have a nice day
Objective: Create a simple website which would basically just display some information and contacting details.
GXT:
GXT is built on GWT.
Go for GXT when you are in need of rich set of widgets (it is a very large set of collection) out of the box. Have a look on the following link where GXT has showcased the different widgets
http://examples.sencha.com/gxt/4.0.0/
GWT:
GWT will be having minimal set of widgets when compared to GXT. Have a look on the different widgets which are provided out of the box. http://samples.gwtproject.org/samples/Showcase/Showcase.html
Javascript Animation framework:
There are bunch of javascript libraries/frameworks for animation, choose one which is most appropriate to your work. Have a look on the following link.
https://www.javascripting.com/animation/
Conclusion:
Consider the following before finalizing on a framework
Framework which is having more out of the box components which matches the requirement.
Framework which is more stable
Framework which is having more support on the internet, such as forums, blogs.
Happy Coding!!

Best API/code library to build a timeline/chart

I'm reaching out for some advice on the best API/code library to use to build an interactive timeline/chart. I have included an example image below. The idea would be that you have a key, and clickable elements along a path/line that pop up/out when interacted with.
I have a lot of experience with Google Maps API, but this is quite clearly something a little different. Would you suggest ChartJS? Or something else? Just trying to get some background/research.
Do let me know if posting this on SO was the wrong thing to do.
Take a look at D3J or Dojo. They are both JavaScript libraries for data-driven and data-centric front-end applications.

Need Technology Recommendation: Web-based Database Manager

I'd like to build a proof-of-concept web-based database manager (such as the desktop version in the screenshot below) that has the following features.
The schema will be provided initially through a flat file.
It seems like HTML5 might be an option. What about non-HTML? What about processing.js? Are there any libraries I could/should take advantage? Is there already a service I can tap into?
Any opinions or advice would be appreciated!
Edit
Primary goal of the project is the build a protoype of the UI.
For the events that you will need to control everything, I would suggest using jQuery. It can cut you javascript in half. Canvas/SVG would be easy enough to use to create the diagram above (could even pull it off in straight html using some creative css and a judicious application of div's). I've never used flash but I also don't see anything in your image here that couldn't be done in Canvas/SVG. If you do go with Canvas you will want to look into using a lib called ex_canvas which will make it all work fairly nicely on IE (my company has some canvas items that work in IE6 using ex_canvas). Also you will want to look at css-sprites (in case you haven't heard of them before) as they can aid in the load performance of your page.
I've decided to use http://raphaeljs.com for the project. This SVG library supports older browsers and given this application is highly interactive with the user, it makes sense for me in this project to use SVG over Canvas.

How do I use the JavaScript InfoVis Toolkit?

I am working on a web visualization project and would like to use the JavaScript InfoVis Toolkit to create interactive graphs quickly in webpages. However, I have no idea how to start using it or even where to look for clues. The google group seems like it is mostly high level stuff, but I applied for membership and am waiting on a response.
What do I need to know in order to start using this toolkit, or more generally, any toolkit?
Website;
http://thejit.org/
Download the source code and look in the examples page, my advise is too open the results with FireBug and look at the example javascript code ;)
It's very easy to setup, you just need to change the "data" JSON and you'r all set ;)

YUI and/or jQuery for a new project?

If I am starting a new project how should I pick between using YUI 2, YUI 3 and jQuery?
I know there are a bunch of questions/answers already about can you use them together, but I am trying to figure out what criteria I should be thinking about to make my decision.
Are they overlapping?
Is one better at GUI and the other better at internals?
Do they play well together? My understanding from other questions is that they can live in different namespaces, so they can live together, but that doesn't necessarily mean that it is good to use both.
Thanks!
If you are familiar with neither, I personally have found jQuery's documentation and API easier to understand than YUI's, at least for simpler things. It also appears there is more jQuery related information than YUI on stackoverflow.
YUI does have its users and supporters though, so check it out in case you end up finding it suitable for you. It's got a huge library of additional modules you can use for complex web applications.
My usual advice would be to go with whatever you're familiar with, and I say this because I don't think it's worth dropping one to start learning the other from scratch. But if you are familiar with neither, then you should check out how easy the documentation for both is to understand.
PS I would not recommend YUI2 if you're starting anew as it has been superceded by YUI3, which is much better designed.
We need more information about the type and size of the project before a proper library can be suggested.
For example, if you're building a semi-complex/large-ish web app, I would suggest Dojo or ExtJs. Otherwise, for smaller projects, jQuery might be more appropriate. I cannot comment on YUI as I have not used it.
Impossible to say without knowing more details about the project. Use jQuery or Prototype for things like DOM manipulation and making autocomplete, etc. If you need a more powerful Javascript implementation take a look at ExtJS, which is basically a full stack framework for Javascript.
Both are JS frameworks and there to help you. YUI is known to be more natural in them and more closer to the original Javascript while jQuery is known as more easy and you find more jQuery users and support around then YUI. However, as said earlier, it depends on the project, if it is likely that you will be making your own custom widgets, I will suggest you to go with YUI but if it's like a simple e-commerce website in which you just need some fancy galleries and shopping cart, go with jQuery, you will learn and implement that quickly. I am not saying that you can not go more in depth with jQuery but my impression is that jQuery is more of a CakePHP for PHP like of framework which gets you off the grounds quickly.
In my opinion there is no need for you to use them side by side in a single project, that will just produce the over-head as both do whatever you want to do in them i.e creating dialog panels, autocomplete quick searches, event related utilities etc.
I am writing down a series of beginner and mid-level tutorials for YUI users, let me know if you find them useful or if there is anything else where I can help.
http://ciitronian.com/blog/tag/yui/

Categories

Resources