Create Dynamic Control Flow chart using jQuery with PHP MySQL - javascript

I want to implement Flow Chart feature, where user needs to be able to create flow chart using the tool, and user needs to able save the flow chart for further use.
I am using below plugin:
http://www.jqueryscript.net/chart-graph/Simple-SVG-Flow-Chart-Plugin-with-jQuery-flowSVG.html
But it has following issues:
Does not support drag and drop elements to the flow chart for now -
I am using option in the DD to add new element.
Can't Select, Delete or Edit the element.
I need flow chart for live users so that user can create and attach elements to the live processes or users. ( process/user is like a DB record with the ID)
By using above plugin I can create element and attach but because of the above issues it got fail.
if you have similar plugin with drag and drop and selectable features elements please share.

You can user paper.js. It has a lot of features.
[edit] Is not a library that creates a flow chart right out of the box, but with ease you can create some great drawings with it.

Consider gojs. GoJS is a JavaScript and TypeScript library for building interactive diagrams and graphs.

Related

how to display an ontology in an html page?

I want to display an ontology as a tree in an HTML page and then make a drag and drop.
I want to let the user be able to drag a a vertex from this tree. Something like the tree in https://www.geeksforgeeks.org/hierarchical-treeview-in-python-gui-application/
I cannot find a plugin other than jOWL.
Is there a good plugin to do it?
You can try these:
D3.js: This is a JavaScript library for creating interactive data visualizations. You can use it to create a tree diagram of an ontology and enable drag-and-drop functionality through the use of event listeners.
GoJS: This is a JavaScript library for creating interactive diagrams and graphs. It includes support for creating tree diagrams and enabling drag-and-drop functionality.
cytoscape.js: is a JavaScript library for creating graph theory (network) models on the web, it's also support tree diagrams and draggable nodes
Vis.js: is a JavaScript library for creating interactive data visualizations. It includes support for creating tree diagrams and enabling drag-and-drop functionality.

Are selections in Vega visualizations accessible from outside Vega?

I've been reading about "selectors" in Vega, which allow a user to click and/or drag across a visualization to highlight data points.
From the documentation above, and searching here and elsewhere, though, I'm having trouble understanding whether selectors are accessible outside of a visualization that Vega produces. Using, for example, R and Shiny, I would like to be able to allow a user to select data points in a visualization, and for Vega to somehow publish the selected indices for use by the app (for example, to allow changing a table of data to just display information about the selected points).
The following can be pasted into the Vega example editor to produce a scatterplot with click-and-drag selection turned on:
{"description":"","data":{"values":[{"V1":15,"V2":14.9611},{"V1":-21.3411,"V2":-7.8442},{"V1":-16.7692,"V2":-5.663},{"V1":13.339,"V2":10.1382},{"V1":13.0422,"V2":19.1265}]},"mark":"point","encoding":{"x":{"field":"V2","type":"quantitative"},"y":{"field":"V1","type":"quantitative"}},"config":{"cell":{"width":500,"height":300},"mark":{"shape":"circle"}},"embed":{"renderer":"svg","actions":{"export":true,"source":false,"editor":false}},"selection":{"pts":{"type":"interval"}}}
Is it possible for Vega to expose which datapoints have been selected? Whether by writing to a hidden DOM element, exposing a javascript variable, or some other means?
The answer is yes but it's not very clean right now. You have to inspect the datasets and signals and reverse engineer the selections from that. A proper API is on the roadmap: https://github.com/vega/vega-lite/issues/1830.

Diagram on a web page with Changing Values

I am trying to create a diagram which will display the IOPS between a hypervisor and a SAN on a web page (c# mvc web application), to show how much data transfer activity there is on a monitoring system.
For example something like this, however in this example the IOPS would be between the Hypervisor and the Virtual Machine:
Two part question:
1) Is there a free software package to create such a diagram where I can put dynamically changing values into a specific place?
2) If Q1 isn't feasible, is it possible to overlay the dynamic values?
My suggestion is looking at drawing the diagram out in SVG. Something like Inkscape should do just fine. It is free and open source.
You are able to add IDs and classes onto the elements in there as well so that you can access them in the standard JQuery way.
If you are feeling adventurous, you could draw it out using D3 here
which is for all your unique type charts and graphs.
I don't know about the software but it can be achieved by ws protocol HTML5 with java SSE(server send event).
On client side you can use a static image for the values which are not changing dynamically and place any html element and change its value dynamically via jquery.
Use this only when you are aware of comet technology and have extra time.

Javascript time selection like google analytics

I am looking for a time range selector like the draggable google analytics time line section element.
Google provides the time line selection via a three block. This can be achieved with Jquery UI and many others. But the draggable timeline selection seems to be more difficult to achieve.
[ Shame about the image restriction for new users, perhaps someone could upload the image of google analytics time range selection via a draggable area ]
I do not want to use flash/flex for this and am looking for a javascript version. Im sure there is a javascript library out there but can not find it.
Check out the Highcharts master-detail example; the library uses jQuery and is pure JavaScript.

How to create an editable grid using js

I am looking to create a grid structure using javascript or one of its libraries. My idea is as follows: I am a merchandise manager for a retailer and want to create an application to tie into the django project I have been working on to track item sales based on display location. The javascript piece would involve drawing a grid on the screen and allowing the user to draw 'areas' over the grid. Each area would contain a set number of gridboxes, each representing a pallet of goods. At the time the grid is drawn, each box is a DOM object that can be assigned to event handlers etc. When an area is drawn over a a series of these boxes, they become active and each box can be assigned different characteristics. In the end, each box would effectively represent an empty pallet that could then be assigned an item. It's position could then be correlated with sales data via my django app. I just need a way to broadcast/manage the location data using javascript.
Is there a jquery plugin or some other js library that would facilitate such a project? I have checked into Raphael and it will work, but will take more time to create. I am wondering if there is already some kind of grid based drawing tool that would facilitate the process.
Everytime I think of a javascript Grid, I always thing about the fantastic TableSorter
And if you append an editable version to it, I would would say you will have the best AWESOME project!
:o)
JQuery UI's Selectable would probably be a good place to start. It makes it easy to create a grid whose areas are selectable by dragging a box over it.
The extJS javascript framework has an editable grid, refer to http://dev.sencha.com/deploy/dev/examples/grid/edit-grid.html for a sample demo and source code

Categories