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
Related
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.
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.
Use case:
A web page where the user is presented with several cards containing text. The user can classify the cards by dragging them to one of four containers. The cards should then snap into place, and the container should display a counter with the number of cards it contains.
The app is based on Rails, but this obviuosly needs to be done in JavaScript. The content of the cards is read and written to the server through a JSON API.
I know basic JS, CSS and HTML 5, but I hope someone can point me in the right direction when it comes to implementing this. For instance:
Should I use HTML 5 canvas?
Is there a JS library that will make the implementation easier?
If you can use make it without canvas, by using simple jQuery code.
Take a look at jQuery UI (https://jqueryui.com), especially at Draggable and Droppable.
I have requirements to make a image map of seats in a amphitheatre selectable, much like a check box, with 3 states: selected, unselected, and disabled. I wish to know if there is a way to do this so that selected images would become serialised for database submission?
I have it working with just checkboxes, but I can not use them for the client (they like pretty things :p)
Check out my jquery plugin ImageMapster. It does exactly this: allows you to identify areas of an image map that should be highlighted and can maintain state. There are a lot of options for rendering the highlights, including using a second image as the source for the highlighted areas, as well as for identifying areas that should be ignored or fixed in a certain state. In the USA map example on that link:
Washington State is permanently selected & does not respond to
mouseover events
Oregon is permanently deselected & does not respond
to mouseover events (this is just as if it was not part of the map -
but options can be changed on the fly so there might be reasons to
include areas in the map but turn them off).
Alaska is unselectable
(but does respond to mouseover events)
You can also assign options that determine how each area highlight should appear on a per-area basis.
The full documentation is on github.
You only need a single alternate image if you use the "alternate image" option for the highlights, the plug-in draws the content from the same area of a 2nd image to create each highlight.
It works with any HTML image map as the data source.
Why don't you just use the jquery UI buttons?
http://jqueryui.com/demos/button/#icons
That probably should help and you don't have to recode anything.
I have swing application in which there is MS excel like functionality. User can enter data in the columns. Most of the columns are drop down lists, so use have to select from the list.
Can this functionality be easily built in Adobe Flex or GWT?
Second complexity is depending upon what value is selected in a column, another column should show only those items which are related to selected value of first column.
Its not country city data but for simplicity I am taking this example.
For example, first column is country and the second column is city. So depending upon what country is selected the second column will show only cities under that country.
Its not just two drop down list on a page, its dropdowns of a row in a grid strructure.
Is this possible in Adobe Flex or GWT or anyother web UI framework apart from Swing?
ExtJS' EditorGridPanel for instance?
http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.EditorGridPanel
I don't think you'll get this kind of functionality out of the box from any framework. You'll have to develop your particular functionality on top of existing components.
Using GWT, the built in FlexTable & ComboBox widgets and a downloaded EditableLabel (http://gwt-widget.sourceforge.net/docs/apidocs/org/gwtwidgets/client/ui/EditableLabel.html) widget you'd be able to build the basics of what you want. How well it would work/perform all depends on how you build it and how many rows/columns you want. If you want something big and ultra slick then Flex would be a pretty safe bet, if you just want to keep it small (eg: Google Docs style) then GWT will do just fine.
All GWT widgets support attaching various listeners to them, so there would be no problem in firing actions that change cells just like you do in Swing.