graph draggable

reports/static/reports/css/scldata.css

@@ -73,4 +73,17 @@ body
 	background-color: #2196F3;
 	opacity: 0.7;
 	border-radius: 50%;
+}
+
+#draggable {
+  padding: 0px;
+  position: absolute;
+  z-index: -1;
+  text-align: center;
+  /* border: 1px solid #d3d3d3; */
+  opacity: .5;
+}
+
+#draggable:hover {
+  opacity: 1;
 }
\ No newline at end of file

reports/static/reports/js/draggable.js

+function dragElement(elmnt) {
+    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    if (document.getElementById(elmnt.id + "header")) {
+        /* if present, the header is where you move the DIV from:*/
+        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+    } else {
+        /* otherwise, move the DIV from anywhere inside the DIV:*/
+        elmnt.onmousedown = dragMouseDown;
+    }
+
+    function dragMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // get the mouse cursor position at startup:
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // calculate the new cursor position:
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // set the element's new position:
+        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+    }
+
+    function closeDragElement() {
+        /* stop moving when mouse button is released:*/
+        document.onmouseup = null;
+        document.onmousemove = null;
+    }
+}
+
+function showGraph(){
+    if ($('.showChart').is(':visible')){
+        $("#draggable").css('z-index', 10);
+        $(".showChart").hide();
+        $(".hideChart").show();
+    }else{
+        $("#draggable").css('z-index', -1);
+        $(".showChart").show();
+        $(".hideChart").hide();
+    }
+}
+
+dragElement(document.getElementById("draggable"));
\ No newline at end of file

reports/templates/aside.html

@@ -155,5 +155,16 @@
             </span>
             </a>
         </li>
+        <li>
+            <a class="treeview " href="#" onclick="showGraph()">
+                <i class="fa fa-eye showChart"></i>
+                <i class="fa fa-eye-slash hideChart" style="display:none"></i>
+                <span class="showChart">Show Chart</span>
+                <span class="hideChart" style="display:none">Hidden Chart</span>
+                <span class="pull-right-container">
+                    <span class="label label-primary pull-right"></span>
+                </span>
+            </a>
+        </li>
     </ul>
 </div>
\ No newline at end of file

reports/templates/sclData.html

@@ -146,7 +146,7 @@
                     </div>
                 </div>
 
-                <div class="col-md-8">
+                <div class="col-md-6" id="draggable">
                     <!-- AREA CHART -->
                     <div class="box box-primary">
                         <div class="box-header with-border">
@@ -470,4 +470,5 @@
     <script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
     <script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script>
     <script type="text/javascript" src="{% static 'reports/js/minimap.js' %}"></script>
+    <script type="text/javascript" src="{% static 'reports/js/draggable.js' %}"></script>
 {% endblock %}