I was recently working on one assignment where in we need to draw the flow of inventory movements based on the incoming data from the database. These datasets have to configured based on the routes coming from the database. Also, the case was values coming from database are redundant as well, so the algorithm has to be smart enough to figureout which route has been drawn and if same is getting repeated, then skip that part for the next time.

For making the same i have used one open API by google (http://jsplumb.org/demo/flowchart/dom.html), then modified the built in api based on my requirement. It’s a fairly, good combination of server side and client side projection. Below, is the sample code which i have used for the same.

  1. @{
  2. ViewBag.Title = "DataModel";
  3. }
  4. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6. <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
  7. <link rel="stylesheet" href="~/Scripts/JsPlumb/demo-all.css">
  8. <link rel="stylesheet" href="~/Scripts/JsPlumb/demo.css">
  10. @*<body data-demo-id="statemachine" data-library="jquery">*@
  12. <script type="text/javascript">
  13. var rootDir = "@Url.Content("~/")";
  14. $(document).ready(function () {
  16. var querystring = window.location.search.replace('?', '').split('amp');
  17. var simid = "";
  18. for (var i = 0; i < querystring.length; i++) {
  19. if (querystring[0] != "") {
  20. simid = querystring[0].split('=')[1];
  21. $("#hdnSimid").val(simid);
  22. }
  23. }
  24. $('#lnkReplication').text("Back to Simulation Screen with SIM Id: " + simid);
  26. $("#lnkReplication").click(function () {
  27. var url = rootDir + "SimulationEnquiry/SimulationEnquiry?Sim_ID=" + $("#hdnSimid").val();
  28. $('#lnkReplication').attr('href', url);
  29. });
  30. })
  31. </script>
  32. <div>
  33. <span style="font-family: Arial; text-wrap: normal; font-weight: bold">
  34. <a href="#" id="lnkReplication">A
  35. </a>
  36. </span>
  37. @Html.Hidden("hdnSimid")
  38. </div>
  40. <div id="main">
  42. @* Generate divs dynamically *@
  44. @{
  45. var collection = ViewData["completeSet"];
  47. // draw only unique boxes
  48. // then take ids for from stockroom, tostockroom and path
  50. // fetch unique to stock rooms 1st
  51. var result = (from item in (IEnumerable<DataAccessLayer.Entities.SimulationDisplay>)ViewData["completeSet"]
  52. select new
  53. {
  54. TO_STOCKROOM = item.TO_STOCKROOM,
  55. }).Distinct().ToList();
  57. //draw unique divs
  58. var mapping = (from item in (IEnumerable<DataAccessLayer.Entities.SimulationDisplay>)ViewData["completeSet"]
  59. select new
  60. {
  61. FROM_STOCKROOM = item.FROM_STOCKROOM,
  62. TO_STOCKROOM = item.TO_STOCKROOM,
  63. TRANSACTION_TYPE = item.TRANSACTION_TYPE
  64. }).Distinct().ToList();
  65. int count = mapping.Count();
  67. <div id="mappingcount" style="display: none">@count</div>
  68. <div class="demo statemachine-demo" id="statemachine-demo">
  69. @* Compare From stockroom list with To stock room list *@
  70. @{
  71. //Query to fetch all from stockrooms
  72. List<string> From_stock_rooms = new List<string>();
  73. List<string> To_Stock_Rooms = new List<string>();
  74. foreach (var w in mapping)
  75. {
  76. From_stock_rooms.Add(w.FROM_STOCKROOM);
  77. }
  78. From_stock_roomsFrom_stock_rooms = From_stock_rooms.Distinct().ToList();
  80. // Query to fetch all to stockrooms
  81. foreach (var w in mapping)
  82. {
  83. To_Stock_Rooms.Add(w.TO_STOCKROOM);
  84. }
  85. To_Stock_RoomsTo_Stock_Rooms = To_Stock_Rooms.Distinct().ToList();
  87. //Compare both the lists
  88. var compare_Stocks = From_stock_rooms.Except(To_Stock_Rooms);
  90. compare_Stockscompare_Stocks= compare_Stocks.ToList();
  92. }
  95. @* Stock rooms CSS declartion *@
  96. @{ string left = "10em";
  97. string top = "15em";
  98. string[] split_left;
  99. string split_left_1st;
  100. string[] split_left_2nd;
  101. int var_left = 0;
  102. string[] split_top;
  103. string split_top_1st;
  104. string[] split_top_2nd;
  105. int var_top = 0;
  107. //To_stockrroms decalartion
  108. string left_tostockroom = "20em";
  109. string top_tostockroom = "15em";
  110. string[] split_left_tostockroom;
  111. string split_left_1st_tostockroom;
  112. string[] split_left_2nd_tostockroom;
  113. int var_left_tostockroom = 0;
  114. string[] split_top_tostockroom;
  115. string split_top_1st_tostockroom;
  116. string[] split_top_2nd_tostockroom;
  117. int var_top_tostockroom = 0;
  118. }
  119. @* This scenario will come into picture when there is any mismatch in from and to stock room *@
  120. @for(int k =0;k<compare_Stocks.Count();k++)
  121. {
  123. if(compare_Stocks.ElementAt(k)!="")
  124. {
  125. <div class="w" id="@compare_Stocks.ElementAt(k)" style="left:@left;top:@top;">@compare_Stocks.ElementAt(k)
  126. @* use this ep class when you have to allow users to make changes or connect endpoints additionaly *@
  127. @*<div class="ep"></div>*@
  128. <div class=""></div>
  129. </div>
  131. split_left = left.Split('e');
  132. // split_left_2nd = split_left_1st[0].Split('m');
  133. split_leftsplit_left_1st = split_left[0].ToString();
  134. var_left = Convert.ToInt32(split_left_1st);
  135. var_left += 13;
  136. left = Convert.ToString(var_left) + "em";
  138. split_top = top.Split('e');
  139. //split_top_2nd = split_top_1st[0].Split('m');
  140. split_topsplit_top_1st = split_top[0].ToString();
  141. var_top = Convert.ToInt32(split_top_1st);
  142. var_top += 13;
  143. top = Convert.ToString(var_top) + "em";
  144. }
  145. }
  149. @foreach (var c in result)
  150. {
  151. @*<div id="@c.FROM_STOCKROOM" style="display:none">@c.FROM_STOCKROOM</div>*@
  155. <div class="w" id="@c.TO_STOCKROOM" style="left:@left_tostockroom;top:@top_tostockroom;" >@c.TO_STOCKROOM
  156. @* use this ep class when you have to allow users to make changes or connect endpoints additionaly *@
  157. @*<div class="ep"></div>*@
  158. <div class=""></div>
  159. </div>
  161. split_left_tostockroom = left_tostockroom.Split('e');
  162. // split_left_2nd = split_left_1st[0].Split('m');
  163. split_left_1st_tostockroom = split_left_tostockroom[0].ToString();
  164. var_left_tostockroom = Convert.ToInt32(split_left_1st_tostockroom);
  165. var_left_tostockroom += 13;
  166. left_tostockroom = Convert.ToString(var_left_tostockroom) + "em";
  168. split_top_tostockroom = top.Split('e');
  169. //split_top_2nd = split_top_1st[0].Split('m');
  170. split_top_1st_tostockroom = split_top_tostockroom[0].ToString();
  171. var_top_tostockroom = Convert.ToInt32(split_top_1st_tostockroom);
  172. var_top_tostockroom += 13;
  173. top_tostockroom = Convert.ToString(var_top) + "em";
  175. }
  179. </div>
  182. int i = 1;
  183. int j = 1;
  184. foreach (var m in mapping)
  185. {
  186. <div id="FROM_STOCKROOM_@i" style="display:none">@m.FROM_STOCKROOM</div>
  188. <div id="TO_STOCKROOM_@i" style="display:none">@m.TO_STOCKROOM</div>
  189. //if (FromStockroom == empty then skip trantype, That will be treated as orphan node)
  190. if (@m.FROM_STOCKROOM != "")
  191. {
  192. <div id="TRANSACTION_TYPE_@j" style="display:none">@m.TRANSACTION_TYPE</div>
  193. j++;
  194. }
  195. i++;
  196. }
  197. var mapresult = mapping;
  199. }
  205. </div>
  208. <!-- DEP -->
  209. @* <script src="~/Scripts/JsPlumb/jquery-1.9.0.js"></script>*@
  210. <script src="~/Scripts/JsPlumb/jquery-ui-1.9.2-min.js"></script>
  211. <script src="~/Scripts/JsPlumb/jquery.ui.touch-punch.min.js"></script>
  212. <!-- /DEP -->
  214. <!-- for demo dropdown. not a jsplumb dependency -->
  215. <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  217. <!-- JS -->
  218. <!-- support lib for bezier stuff -->
  219. <script src="~/Scripts/JsPlumb/jsBezier-0.6.js"></script>
  220. <!-- jsplumb geom functions -->
  221. <script src="~/Scripts/JsPlumb/jsplumb-geom-0.1.js"></script>
  222. <!-- jsplumb util -->
  223. <script src="~/Scripts/JsPlumb/util.js"></script>
  224. <!-- base DOM adapter -->
  225. <script src="~/Scripts/JsPlumb/dom-adapter.js"></script>
  226. <!-- main jsplumb engine -->
  227. <script src="~/Scripts/JsPlumb/jsPlumb.js"></script>
  228. <!-- endpoint -->
  229. <script src="~/Scripts/JsPlumb/endpoint.js"></script>
  230. <!-- connection -->
  231. <script src="~/Scripts/JsPlumb/connection.js"></script>
  232. <!-- anchors -->
  233. <script src="~/Scripts/JsPlumb/anchors.js"></script>
  234. <!-- connectors, endpoint and overlays -->
  235. <script src="~/Scripts/JsPlumb/defaults.js"></script>
  236. <!-- bezier connectors -->
  237. <script src="~/Scripts/JsPlumb/connectors-bezier.js"></script>
  238. <!-- state machine connectors -->
  239. <script src="~/Scripts/JsPlumb/connectors-statemachine.js"></script>
  240. <!-- flowchart connectors -->
  241. <script src="~/Scripts/JsPlumb/connectors-flowchart.js"></script>
  242. <script src="~/Scripts/JsPlumb/connector-editors.js"></script>
  243. <!-- SVG renderer -->
  244. <script src="~/Scripts/JsPlumb/renderers-svg.js"></script>
  245. <!-- canvas renderer -->
  246. <script src="~/Scripts/JsPlumb/renderers-canvas.js"></script>
  247. <!-- vml renderer -->
  248. <script src="~/Scripts/JsPlumb/renderers-vml.js"></script>
  250. <!-- jquery jsPlumb adapter -->
  251. <script src="~/Scripts/JsPlumb/jquery.jsPlumb.js"></script>
  252. <!-- /JS -->
  254. <!-- demo code -->
  255. <script src="~/Scripts/JsPlumb/demo-jquery.js"></script>
  257. <script src="~/Scripts/JsPlumb/demo-list.js"></script>
Above snippet is MVC view where in, I have handled service side data with jsplumb. So, basically, based on the incoming data, its drawing the below diagram. This diagram is nothing but the data visualization diagram based on two sets of inputs. So, here user will be selecting different combinations from the two different dropdowns and then, based on that it will draw the diagram here.
data model
I hope you like it. Thanks for joining me.
Thanks,
Rahul Sahay