REST Client application with Topology diagram - javascript

I suppose to develop a network management REST client with topology diagram (as an image showing below). With that application, the user should able to create a topology diagram by drag and drop, change the nodes positions by dragging, edit nodes properties and delete node elements.
Now I'm doing some feasibility study how can I approach this task with HTML 5 client or Java thick client. I have seen some API called esri but it is commercialised.
I have planned to develop this application Angularjs or JavaFX. But none of them has inbuild libraries for it (I'm more preferring to develop this client application with AngularJs). Could you please help me to find any JavaScript frameworks or Java libraries available for accomplishing this task (then I can integrate them with AngularJs or JavaFX).
I have seen similar kind of question at StackOverflow, it was too old but now it can be available new frameworks.
Thanks

We can be accomplishing this task with some HTML 5 related UI frameworks which can visualize interactive graphs (user can create, update, read, and delete the graph elements). Some of them are as follow,
GoJS
GoJS is a feature-rich JavaScript library for implementing custom interactive diagrams and complex visualizations across modern web browsers and platforms.
The library makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts.
Commercial license.
source: https://gojs.net/latest/extensions/SnapLinkReshaping.html
JointJS
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools such as workflow editors,
process management tools, IVR systems, API integrators, presentational applications and more. Licensed under both Open Source license (fewer features) and Commercial license (more features).
source: https://resources.jointjs.com/demos/kitchensink
mxGraph
mxGraph is a JavaScript diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser.
Under the Apache license 2.0 (free and open source).
Support for JavaScript, Java, .NET, and PHP.
1) mxDraw
source: https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html
2) Graph Editor
source: https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
vis.js
vis.js is a dynamic, browser-based visualization library.
The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data.
Licensed under both Apache 2.0 (free and open source) and MIT (open source license).
source: vis.js library
D3.js
D3.js is a JavaScript library for manipulating documents based on data.
D3 brings data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers,
combining powerful visualization components and a data-driven approach to DOM manipulation.
Under the BSD license (open source initiative).
source: http://bl.ocks.org/rkirsling/5001347
Conclusion
According to the features of GoJS, it is the most convenient framework for visualizing interactive graphs,
because UI can customize easily and can save the Diagram Model as JSON format.
But this is under the commercial license ($2995 per developer).
JointJS provides fewer features with their open source license version,
therefore needs to purchase the commercial version for fulfilling our requirements.
It may be difficult to customize their complex UI.
D3.js is more user-friendly but we have to proceed more effort to fine-tune it according to our requirements such as,
proceed the node creation via a tool icon, enable the user to customize the node’s caption value, remove some existing visual effects, etc.
Needs to explore about the saving format (JSON, XML, TXT, etc.) of Diagram Model.
According to my conclusion, we can choose either mxGraph or vis.js JavaScript library for our developments.
mxGraph: It seems we can easily customize the ‘mxDraw’ (web 2.0-style diagram editor) drawing application and reuse it.
‘Graph Editor’ diagram editor application is more advanced and it may take more time to customize it and needs to explore about the Diagram Model saving format.
vis.js: Is more user-friendly than ‘mxGraph’ but we may have to spend some development effort for exploring about Diagram Model saving format and removing existing visual effects.

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!

web library to create a interactive flowchart

i am searching for a library in javascript/html to enable my users to create, update and save basic flowcharts(start, end, task, decision, swimlane, fork and join) and create/edit some custom values of each task for later use in one ERP, similar like here!
I found RaphaelJS and GoJS, with those libraries can i make this interactive flowchart? I need others sugestions to evaluate.
If it weren't for the "interactive" part, I would suggest to take a look at this SO question and answers.
Since you are mentioning commercial libraries, I assume that this is in a commercial scenario, and thus I believe this interactive flow-chart demo is pretty much exactly what you are looking for. Maybe also this BPMN editing demo.
The demos are using the commercial yFiles for HTML Javascript/HTML5 diagramming library. The library provides (among other features) editing capabilities for flow-chart-like and BPMN diagrams, has robust support for (optionally hierarchical, two-dimensional) swim lanes and of course adding custom data and custom interaction logic is easily supported. The most advanced feature though is the ability to automatically arrange the elements on the screen according to the flow-chart logic:
Disclaimer: I work for the company that creates this library. I do not represent my employer on SO, though.
RaphaelJS deals with SVG shapes and generic functions relating to them.
It has no explicit support for creating/manipulating flowcharts.
You can use JointJS for flowcharts which
produces charts in SVG format, but the commercial license is not free
You can use also use
plumbJS which is
open source and pretty well documented. This library also has support
for a VML fallback if the browser is IE8 or below

Alternatives to replace ExtJS 1.2 [duplicate]

This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
So what I'm looking for is a javascript framework I can use that has several UI controls. I have taken a look at jQuery but those controls are very basic compared to ExtJS. Are there any other competitive alternatives?
This question exists because it has historical significance, but it is not considered a good, on-topic question for this site, so please do not use it as evidence that you can ask similar questions here. More info: help center.
Nothing compares to extjs in terms of community size and presence on StackOverflow. Despite previous controversy, Ext JS now has a GPLv3 open source license. Its learning curve is long, but it can be quite rewarding once learned. Ext JS lacks a Material Design theme, and the team has repeatedly refused to release the source code on GitHub. For mobile, one must use the separate Sencha Touch library.
Have in mind also that,
large JavaScript libraries, such as YUI, have been receiving less attention from the community. Many developers today look at large JavaScript libraries as walled gardens they don’t want to be locked into.
-- Announcement of YUI development being ceased
That said, below are a number of Ext JS alternatives currently available.
Leading client widget libraries
Blueprint is a React-based UI toolkit developed by big data analytics company Palantir in TypeScript, and "optimized for building complex data-dense interfaces for desktop applications". Actively developed on GitHub as of May 2019, with comprehensive documentation. Components range from simple (chips, toast, icons) to complex (tree, data table, tag input with autocomplete, date range picker. No accordion or resizer.
Blueprint targets modern browsers (Chrome, Firefox, Safari, IE 11, and Microsoft Edge) and is licensed under a modified Apache license.
Sandbox / demo • GitHub • Docs
Webix - an advanced, easy to learn, mobile-friendly, responsive and rich free&open source JavaScript UI components library. Webix spun off from DHTMLX Touch (a project with 8 years of development behind it - see below) and went on to become a standalone UI components framework. The GPL3 edition allows commercial use and lets non-GPL applications using Webix keep their license, e.g. MIT, via a license exemption for FLOSS. Webix has 55 UI widgets, including trees, grids, treegrids and charts. Funding comes from a commercial edition with some advanced widgets (Pivot, Scheduler, Kanban, org chart etc.). Webix has an extensive list of free and commercial widgets, and integrates with most popular frameworks (React, Vue, Meteor, etc) and UI components.
Skins look modern, and include a Material Design theme. The Touch theme also looks quite Material Design-ish. See also the Skin Builder.
Minimal GitHub presence, but includes the library code, and the documentation (which still needs major improvements). Webix suffers from a having a small team and a lack of marketing. However, they have been responsive to user feedback, both on GitHub and on their forum.
The library was lean (128Kb gzip+minified for all 55 widgets as of ~2015), faster than ExtJS, dojo and others, and the design is pleasant-looking. The current version of Webix (v6, as of Nov 2018) got heavier (400 - 676kB minified but NOT gzipped).
The demos on Webix.com look and function great. The developer, XB Software, uses Webix in solutions they build for paying customers, so there's likely a good, funded future ahead of it.
Webix aims for backwards compatibility down to IE8, and as a result carries some technical debt.
Wikipedia • GitHub • Playground/sandbox • Admin dashboard demo • Demos • Widget samples
react-md - MIT-licensed Material Design UI components library for React. Responsive, accessible. Implements components from simple (buttons, cards) to complex (sortable tables, autocomplete, tags input, calendars). One lead author, ~1900 GitHub stars.
kendo - jQuery-based UI toolkit with 40+ basic open-source widgets, plus commercial professional widgets (grids, trees, charts etc.). Responsive&mobile support. Works with Bootstrap and AngularJS. Modern, with Material Design themes. The documentation is available on GitHub, which has enabled numerous contributions from users (4500+ commits, 500+ PRs as of Jan 2015).
Well-supported commercially, claiming millions of developers, and part of a large family of developer tools. Telerik has received many accolades, is a multi-national company (Bulgaria, US), was acquired by Progress Software, and is a thought leader.
A Kendo UI Professional developer license costs $700 and posting access to most forums is conditioned upon having a license or being in the trial period.
[Wikipedia] • GitHub/Telerik • Demos • Playground • Tools
OpenUI5 - jQuery-based UI framework with 180 widgets, Apache 2.0-licensed and fully-open sourced and funded by German software giant SAP SE.
The community is much larger than that of Webix, SAP is hiring developers to grow OpenUI5, and they presented OpenUI5 at OSCON 2014.
The desktop themes are rather lackluster, but the Fiori design for web and mobile looks clean and neat.
Wikipedia • GitHub • Mobile-first controls demos • Desktop controls demos • SO
DHTMLX - JavaScript library for building rich Web and Mobile apps. Looks most like ExtJS - check the demos. Has been developed since 2005 but still looks modern. All components except TreeGrid are available under GPLv2 but advanced features for many components are only available in the commercial PRO edition - see for example the tree. Claims to be used by many Fortune 500 companies.
Minimal presence on GitHub (the main library code is missing) and StackOverflow but active forum. The documentation is not available on GitHub, which makes it difficult to improve by the community.
Polymer, a Web Components polyfill, plus Polymer Paper, Google's implementation of the Material design. Aimed at web and mobile apps. Doesn't have advanced widgets like trees or even grids but the controls it provides are mobile-first and responsive. Used by many big players, e.g. IBM or USA Today.
Ant Design claims it is "a design language for background applications", influenced by "nature" and helping designers "create low-entropy atmosphere for developer team". That's probably a poor translation from Chinese for "UI components for enterprise web applications". It's a React UI library written in TypeScript, with many components, from simple (buttons, cards) to advanced (autocomplete, calendar, tag input, table).
The project was born in China, is popular with Chinese companies, and parts of the documentation are available only in Chinese. Quite popular on GitHub, yet it makes the mistake of splitting the community into Chinese and English chat rooms. The design looks Material-ish, but fonts are small and the information looks lost in a see of whitespace.
PrimeUI - collection of 45+ rich widgets based on jQuery UI. Apache 2.0 license. Small GitHub community. 35 premium themes available.
qooxdoo - "a universal JavaScript framework
with a coherent set of individual components", developed and funded by German hosting provider 1&1 (see the contributors, one of the world's largest hosting companies. GPL/EPL (a business-friendly license).
Mobile themes look modern but desktop themes look old (gradients).
Wikipedia • GitHub • Web/Mobile/Desktop demos • Widgets Demo browser • Widget browser • SO • Playground • Community
jQuery UI - easy to pick up; looks a bit dated; lacks advanced widgets. Of course, you can combine it with independent widgets for particular needs, e.g. trees or other UI components, but the same can be said for any other framework.
angular + Angular UI. While Angular is backed by Google, it's being radically revamped in the upcoming 2.0 version, and "users will need to get to grips with a new kind of architecture. It's also been confirmed that there will be no migration path from Angular 1.X to 2.0". Moreover, the consensus seems to be that Angular 2 won't really be ready for use until a year or two from now. Angular UI has relatively few widgets (no trees, for example).
DojoToolkit and their powerful Dijit set of widgets. Completely open-sourced and actively developed on GitHub, but development is now (Nov 2018) focused on the new dojo.io framework, which has very few basic widgets. BSD/AFL license. Development started in 2004 and the Dojo Foundation is being sponsored by IBM, Google, and others - see Wikipedia. 7500 questions here on SO.
Themes look desktop-oriented and dated - see the theme tester in dijit. The official theme previewer is broken and only shows "Claro". A Bootstrap theme exists, which looks a lot like Bootstrap, but doesn't use Bootstrap classes. In Jan 2015, I started a thread on building a Material Design theme for Dojo, which got quite popular within the first hours. However, there are questions regarding building that theme for the current Dojo 1.10 vs. the next Dojo 2.0. The response to that thread shows an active and wide community, covering many time zones.
Unfortunately, Dojo has fallen out of popularity and fewer companies appear to use it, despite having (had?) a strong foothold in the enterprise world. In 2009-2012, its learning curve was steep and the documentation needed improvements; while the documentation has substantially improved, it's unclear how easy it is to pick up Dojo nowadays.
With a Material Design theme, Dojo (2.0?) might be the killer UI components framework.
Wikipedia • GitHub • Themes • Demos • Desktop widgets • SO
Enyo - front-end library aimed at mobile and TV apps (e.g. large touch-friendly controls). Developed by LG Electronix and Apache-licensed on GitHub.
The radical Cappuccino - Objective-J (a superset of JavaScript) instead of HTML+CSS+DOM
Mochaui, MooTools UI Library User Interface Library. <300 GitHub stars.
CrossUI - cross-browser JS framework to develop and package the exactly same code and UI into Web Apps, Native Desktop Apps (Windows, OS X, Linux) and Mobile Apps (iOS, Android, Windows Phone, BlackBerry). Open sourced LGPL3. Featured RAD tool (form builder etc.). The UI looks desktop-, not web-oriented. Actively developed, small community. No presence on GitHub.
ZinoUI - simple widgets. The DataTable, for instance, doesn't even support sorting.
Wijmo - good-looking commercial widgets, with old (jQuery UI) widgets open-sourced on GitHub (their development stopped in 2013). Developed by ComponentOne, a division of GrapeCity. See Wijmo Complete vs. Open.
CxJS - commercial JS framework based on React, Babel and webpack offering form elements, form validation, advanced grid control, navigational elements, tooltips, overlays, charts, routing, layout support, themes, culture dependent formatting and more.
Widgets - Demo Apps - Examples - GitHub
Full-stack frameworks
SproutCore - developed by Apple for web applications with native performance, handling large data sets on the client. Powers iCloud.com. Not intended for widgets.
Wakanda: aimed at business/enterprise web apps - see What is Wakanda?. Architecture:
Wakanda Server (server-side JavaScript (custom engine) + open-source NoSQL database)
desktop IDE and WYSIWYG editor for tables, forms, reports
Wakanda Application Framework (datasource layer + browser-based interface widgets) that helps with browser and device compatibility across desktop and mobile
Wakanda is highly integrated, includes a ton of features out of the box, but has a very small GitHub community and SO presence.
Servoy - "a cross platform frontend development and deployment environment for SQL databases". Boasts a "full WYSIWIG (What You See Is What You Get) UI designer for HTML5 with built-in data-binding to back-end services", responsive design, support for HTML6 Web Components, Websockets and mobile platforms. Written in Java and generates JavaScript code using various JavaBeans.
SmartClient/SmartGWT - mobile and cross-browser HTML5 UI components combined with a Java server. Aimed at building powerful business apps - see demos.
Vaadin - full-stack Java/GWT + JavaScript/HTML3 web app framework
Backbase - portal software
Shiny - front-end library on top R, with visualization, layout and control widgets
ZKOSS: Java+jQuery+Bootstrap framework for building enterprise web and mobile apps.
CSS libraries + minimal widgets
These libraries don't implement complex widgets such as tables with sorting/filtering, autocompletes, or trees.
Bootstrap
Foundation for Apps - responsive front-end framework on top of AngularJS; more of a grid/layout/navigation library
UI Kit - similar to Bootstrap, with fewer widgets, but with official off-canvas.
Libraries using HTML Canvas
Using the canvas elements allows for complete control over the UI, and great cross-browser compatibility, but comes at the cost of missing native browser functionality, e.g. page search via Ctrl/Cmd+F.
Zebra - demos
No longer developed as of Dec 2014
Yahoo! User Interface - YUI, launched in 2005, but no longer maintained by the core contributors - see the announcement, which highlights reasons why large UI widget libraries are perceived as walled gardens that developers don't want to be locked into.
echo3, GitHub. Supports writing either server-side Java applications that don't require developer knowledge of HTML, HTTP, or JavaScript, or client-side JavaScript-based applications do not require a server, but can communicate with one via AJAX. Last update: July 2013.
ampleSDK
Simpler widgets livepipe.net
JxLib
rialto
Simple UI kit
Prototype-ui
Other lists
Best of JS - component toolkits
Wikipedia's Comparison of JavaScript frameworks
Wikipedia's list of GUI-related JavaScript libraries
jqueryuiwidgets.com - detailed jQuery widgets feature comparison

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)

Javascript Library for charts to integrate WinJS

I am asking about some JavaScript library or API that I can integrate it in my winjs/HTML Windows store application.
I would like to connect it with my data to render some awesome charts or pies etc.
If someone have any library in mind it will be helpful for me.
Basically you can use any of the diverse Javascript graphing libraries out there. It will depend on what you want to achieve but here's a couple of libraries I found to be of very high quality:
http://g.raphaeljs.com/ (very straightforward)
http://d3js.org/ (more power, more complexity)
http://www.flotcharts.org/ (nice plugin system)
In case charting is an important part of your app, this commercial library may be for you http://www.highcharts.com/
I also found this very extensive list which has even more charting libraries on it but didn't sift through it.
If you are looking for a solution built specifically for Windows 8 HTML and WinJS, then look at the RacControls for Windows 8. They contain a wide array of charts and graphs, as well as SparkLines (coming in beta in the next couple of days) for very lightweight rendering of your data visualizations. If you are looking for Cross Platform, Kendo UI DataViz has many of the same options.
[Full disclosure, I work for Telerik as the Senior Developer Evangelist for DevTools]

Categories

Resources