Is there a javascript lib to design an IVR diagram with JSON output - javascript

i need a javascript plugin can design an dynamic IVR diagram and in output can get object for pass to server side.
i found mxgraph but not for IVR.

Here is a sample IVR app: https://gojs.net/latest/samples/IVRtree.html
Call diagram.model.toJson() to save it as JSON-formatted text.

I don't see why mxGraph would not work for this kind of task. In fact any reasonable graph drawing library should be able to able to do that.
I know for sure that you can easily implement great looking IVR diagrams (which are mostly just simple trees with a possibly dynamic automatic layout and a custom visualization for the nodes) with yFiles for HTML. That library has been created specifically to be highly extensible and as such allows for easily adding your own specific visualization for nodes and edges. Also trees and "near-tree" can easily be laid out automatically and you can create a dynamic interactive visualization of such a tree like in this decision tree demo.
Disclaimer: I work for the company that creates the latter of the above mentioned libraries, but I do not represent my employer on SO.

There are many libraries available for IVR diagrams. You can use d3.js, Gojs and JointJs.

Related

Extending Bokeh to match D3.js

As I understand it, Bokeh looks to provide for Python, similar capability that D3.js provides for JavaScript. Some advantages for Bokeh I can see include the use of HTML Canvas (so we can render more to the browser), Abstract Rendering and a lower barrier to entry for people familiar with Python over JavaScript but wanting to develop interactive browser based visualisations.
This is great but, where do you go (i.e. as a developer) to extend Bokeh to match the flexibility offered by D3 e.g. to add Chord diagrams, Network graphs or develop more novel visualisations such as those demonstrated at IEEE VIS or the VAST challenge?
Does the Bokeh project have aspirations to become as fully featured as D3 (appreciate D3 has been around for a while now)?
They do want to be fully featured as D3:
Its goal is to provide elegant, concise construction of novel graphics in the style of D3.js, and to extend this capability with high-performance interactivity over very large or streaming datasets. Bokeh can help anyone who would like to quickly and easily create interactive plots, dashboards, and data applications.
This is detailed in their technical vision page.
To help extend Bokeh, check the extending Bokeh page and the example of wrapping a JS library (visjs). There is also a developer guide and a enhancement proposal document.
It would be awesome to have something like D3's transitions!

D3 instead of jquery for dom management - possible?

I've been recently playing around in d3 and I became aware that it has similarities with jquery. Would it be possible to use d3 instead of jquery for general dom management?
This is not a comparison question, however I'd be glad if the answers include valid points to pick one over another.
D3 is focused on creating/manipulating data-driven documents, that is creating/manipulating visual documents from your data by using D3's data/enter/exit methods.
jQuery is a general purpose js/ajax library which offers general js/ajax functionalities like updating cookies, but it doesn't offer data-driven functionalities of D3.
D3 has many visualization extensions and jQuery has many general web app extensions.
Both are dom manipulation js libraries, have css selectors and fluent api and are based on web standards which makes them look similar.

Graph visualization frameworks

I want to visualize a Neo4j database in a graphical application. (I'm doing this primarily as a learning exercise).
I want it to behave almost identically to the visualization in Neo4j's WebAdmin: When the graphic appears, I want to see the nodes moving around as they settle into their final locations, and I want the user to be able to click and drag node icons around the screen and have them stick where they are dropped, with the rest of the graph adjusting to account for the change.
I have two questions.
What are the technical terms for the three requirements crudely described in the paragraph above?
I'm a Java programmer with no experience in JavaScript, but I'm thinking that, with this project, it's time to get some - sigma.js in particular seems very powerful and relatively simple. However, ultimately this needs to be done within a Java Swing application, and while I know there are various containers I can use to embed JS/HTML content into Swing, still it seems that a pure Java solution would be ideal, and I'm curious about any frameworks that might make this possible. I'm looking into Gephi now, but it doesn't seem anywhere near as powerful or as simple to use as sigma.js. Am I wrong in this assumption?
To summarize the second question: Which would be the better investment of my time: Learning sigma.js and the various JS frameworks (which will require me to get comfortable with JS in general), or learning to use Gephi in Java? (assuming I have a general and long-term interest in graph visualization)
Java visualization
Gephi does provide a toolkit for Java and Python which doesn't contains the UI modules, so unless you want to use Gephi itself to visualise your network you cannot embed its UI in your Java/Swing application as long as I know.
The toolkit contains all the algorithms and plugin infrastructure so if you want to use some of their analysis tool embedded in your app you can use that, otherwise I don't think it's your case.
There are other Java options if you want for graph visualisation here: Java graph library for dynamic visualisation
About Gephi and sigmaJS
IMHO Gephi is far more powerful than sigma.js: it has full SNA tools, multiple layouts, a data editor, exporters, plugin-systems...
One important factor is also the size of the dataset you want to visualise: while sigmaJS can handle up to 500 nodes in the view, Gephi can layout easily 50000 nodes with GPU support as well.
Gephi is a scientific tool made for people that don't want to code to visualise a network and it does it's job. SigmaJS is one of many JS solutions to visualise graphs on a web page.
You can always export to sigmaJS from Gephi with a plugin.
What's better?
At the end of the story I guess the tool you are going to use will depends on:
do you have to visualise a big dataset? -> Java solutions will win for big ones
do you need to distribute it easily? -> Web app / SigmaJS wins for distributed
do you want to have a full integration with your app? -> Java wins
The best one I've found is Keylines, but its not cheap.
Gephi is OK, but the last time I looked it did not support Neo4j 2.0
If your a programmer Neo4j is open source, so you can fork the repository on Git and use that (you will have to check the licencing model before you commercialise any product though)

design a widget [duplicate]

Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
Would anyone recommend a particular JavaScript charting library - specifically one that doesn't use flash at all?
There is a growing number of Open Source and commercial solutions for pure JavaScript charting that do not require Flash. In this response I will only present Open Source options.
There are 2 main classes of JavaScript solutions for graphics that do not require Flash:
Canvas-based, rendered in IE using ExplorerCanvas that in turns relies on VML
SVG on standard-based browsers, rendered as VML in IE
There are pros and cons of both approaches but for a charting library I would recommend the later because it is well integrated with DOM, allowing to manipulate charts elements with the DOM, and most importantly setting DOM events. By contrast Canvas charting libraries must reinvent the DOM wheel to manage events. So unless you intend to build static graphs with no event handling, SVG/VML solutions should be better.
For SVG/VML solutions there are many options, including:
Dojox Charting, good if you use the Dojo toolkit already
Raphael-based solutions
Raphael is a very active, well maintained, and mature, open-source graphic library with very good cross-browser support including IE 6 to 8, Firefox, Opera, Safari, Chrome, and Konqueror. Raphael does not depend on any JavaScript framework and therefore can be used with Prototype, jQuery, Dojo, Mootools, etc...
There are a number of charting libraries based on Raphael, including (but not limited to):
gRaphael, an extension of the Raphael graphic library
Ico, with an intuitive API based on a single function call to create complex charts
Disclosure: I am the developer of one of the Ico forks on github.
If you're using jQuery I've found flot to be very good - try out the examples to see if they suit your needs, but I've found them to do most of what I need for my current project.
Additionally ExtJS 4.0 has introduced a great set of charts - very powerful, and is designed to work with live data.
Check out http://www.highcharts.com !
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
It maybe not exactly what you are looking for, but
Google's Chart API is pretty cool and easy to use.
There is another javascript library based on SVG. It is called Protovis and it comes from Stanford Visualization Group
It also allows making nice interactive graphics and visualizations.
http://vis.stanford.edu/protovis/ex/
Although it is only for modern web browsers
UPDATE: The protovis team has moved to another library called d3.js (Data Driven Documents) as they said:
"The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis"
The new library can now be found in:
http://mbostock.github.com/d3/
UPDATE 2:
"Rickshaw" is a JavaScript toolkit for creating interactive time series graphs. Based on d3.js that simplifies a lot the work with d3.js although is a little bit less powerful.
http://code.shutterstock.com/rickshaw/
I was recently looking for a javascript charting library and I evaluated a whole bunch before finally settling on jqplot which fit my requirements very well. As Jean Vincent's answer mentioned you are really choosing between canvas based and svg based solution.
To my mind the major pros and cons were as follows. The SVG based solutions like Raphael (and offshoots) are great if you want to construct highly dynamic/interactive charts. Or if you charting requirements are very much outside the norm (e.g. you want to create some sort of hybrid chart or you've come up with a new visualization that no-one else has thought of yet). The downside is the learning curve and the amount of code you will have to write. You won't be banging out charts in a few minutes, be prepared to invest some real learning time and then to write a goodly amount of code to produce a relatively simple chart.
If your charting requirements are reasonably standard, e.g. you want some line or bar graphs or perhaps a pie chart or two, with limited interactivity, then it is worth looking at canvas based solutions. There will be hardly any learning curve, you'll be able to get basic charts going within a few minutes, you won't need to write a lot of code, a few lines of basic javascript/jquery will be all you need. Of course you will only be able to produce the specific types of charts that the library supports, usually limited to various flavors of line, bar, pie. The interactivity choices will be extremely limited, that is to say non-existent for many of the libraries out there, although some limited hover effects are possible with the better ones.
I went with JQplot which is a canvas based solution since I only really needed some standard types of charts. From my research and playing around with the various choices I found it to be reasonably full-featured (if you're only after the standard charts) and extremely easy to use, so I would recommend it if your requirements are similar.
To summarize, simple and want charts now, then go with JQplot. Complex/different and not pressed for time then go with Raphael and friends.
jqPlot is great. If your requirements are fairly "normal" and you just want to draw some charts, you're probably overwhelmed by the quantity of js charting options. Assuming you don't want to do hours of research, just go with jqPlot as it's probably your best bet. It covers most use cases for most people well. Some of the alternatives are specialised on a certain type of chart or built with a certain use case in mind.
As some kind of late answer, try d3.js
http://mbostock.github.com/d3/
It's the continuation of protovis.
The big difference to flot is in the number of features supported.
Though flot may be simpler, d3.js is definitely more powerful.
Flotr is another, pure Javascript chart-library based on Prototype and inspired by Flot
Try PlotKit
I'd recommend gRaphaël for pure JavaScript charting along with the pure JavaScript vector graphics library it's built on (Raphaël).
gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
a framework: http://www.simile-widgets.org/
a basic: http://www.filamentgroup.com/examples/charting_v2/index_2.php
good looking: http://www.highcharts.com/
Another is RGraph: Javascript charts and graph library:
http://www.rgraph.net
Canvas based so it's fast and there's roughly 20 different chart types. It's free for non-commercial use too!
My favourite (flot) has already been mentioned.
But be sure to investigate Ortho.
It is excellent for tree charts and timelines.
There is a lot of activity in the dojo charting library, and what is great I am using it inside an AIR application without problems too, pretty cool!
See for example there http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
Check out Google Visualization API, which is kind of a generalization of the simpler Chart API
http://code.google.com/apis/visualization/documentation/gallery.html
Has very cool interactive options including maps, gauges, and charts.
We just bought a license of TechOctave Charts Suite for our new startup. I highly recommend them. Licensing is simple. Charts look great! It was easy to get started and has a powerful API for when we need it. I was shocked by how clean and extensible the code is. Really happy with our choice.
Try the MIT simile timeline which could be made into a chart - http://simile.mit.edu/timeline/
or the final one, http://code.google.com/p/gchart/
Not a Javascript library but it may be a suitable alternative - check out Google Charts where you can generate charts by passing querystring data to their web service.
Take a look at Bluff. It's a JavaScript port of the Gruff graphing library for Ruby.
Protochart is all you need
Sencha acquired Raphael and now their charts are pure javascript as of version 4. Emprise and HighCharts mentioned above are my two favorites.
http://www.sencha.com/
For the more unusual charts: http://thejit.org/
I can recommend ArcadiaCharts. A brand-new professional charting library for JavaScript and GWT. Runs in all browsers without plugins. Easy and fast to use: creates great looking charts with just a few lines of code.
Free for non-commercial use.
Fusion charts has a new javascript/jquery library that looks promising.
In case what you need is bar chart only. I published some code I've been using in an old project. Someone told me the VML implementation is broken on recent versions of IE, but the SVG should work just fine. Might be getting back to the project and release some serverside renderers I already have and maybe WebGL rendering layer. There's a link: http://blog.conquex.com/?p=64
Probably not what the OP is looking for, but since this question has become a list of JS charting library options: jQuery Sparklines is really cool.
Check out ZingChart HTML5 Canvas, SVG, VML and Flash Charts. Very powerful and compatible library. I'm on the Zing team - mention us on twitter #zingchart or shoot any questions to support#zingchart.com.

Building Organizational chart using 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 :)

Categories

Resources