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