A planogram is a visual representation of a store's products or services, often used as a tool to maximize sales.

Drag-and-drop "items" from the Palette onto "racks" in the Diagram. "Items" are implemented as Nodes; "racks" are implemented as Groups. Once items have been placed on a rack, they can be resized, if necessary. The DraggingTool.isGridSnapEnabled and ResizingTool.isGridSnapEnabled are both set to true to allow for snapping to the background grid. Node and Group templates both use dragging functions to allow for highlighting so the user knows which rack an item will belong to.

A pure CSS Accordion is used to create the four collapsible Palettes.

Diagram Model saved in JSON format, automatically updated after each transaction: 





  See also Northwoods Software's planogramming services: GoPlanogram.