Stateless Path Drawing Based on Incoming Data

In this article we will learn about Stateless Path drawing based on incoming data.

I was recently working on an assignment wherein we needed to draw the flow of inventory movements based on the incoming data from the database. These datasets must be configured based on the routes coming from the database. Also, the case was the values coming from the database was redundant as well, so the algorithm must be smart enough to determine which route has been drawn and is being repeated, then skip that part for the next time.

For making it I used an open API by Google, then modified the built-in API based on my requirements. It's a fairly good combination of server-side and client-side projection. The following is the sample code that I used for it.

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


Figure 1: Diagram

I hope you like it. Thanks for joining me.