specifying visible region with plot div attribute

Author: dgrechka

RELEASE_NOTES.md

@@ -1,3 +1,9 @@
+### 1.5.16 (December 13, 2018)
+
+New features:
+ - "data-idd-visible-region" plot attribute can now define the visible are in data coordinates in format "xmin xmax ymin ymax". Specifying the attribute disables fit to view
+ - "data-idd-padding" plot attribute can now override the padding (in pixels) added to the data region during calculation of visible region in case of active "fit to view" mode.
+
 ### 1.5.15 (December 10, 2018)
 
 New features:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interactive-data-display",
-  "version": "1.5.15",
+  "version": "1.5.16",
   "license": "Apache-2.0",
   "homepage": "https://github.com/predictionmachines/InteractiveDataDisplay/wiki",
   "description": "A JavaScript visualization library for dynamic data",

samples/Visible region control.html

@@ -14,14 +14,13 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> 
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script> 
-    <script src="../dist/idd_knockout.js"></script>
+    <script src="../dist/idd.js"></script>
 
     <script type="text/javascript">
         $(document).ready(function () {
             var plot1 = InteractiveDataDisplay.asPlot($("#figure1"));            
             var plot2 = InteractiveDataDisplay.asPlot($("#figure2"));            
-            //var plot3 = InteractiveDataDisplay.asPlot($("#figure3"));
+            var plot3 = InteractiveDataDisplay.asPlot($("#figure3"));
         });
     </script>
 </head>
@@ -76,6 +75,31 @@ <h3>Zero padding</h3>
             <div id="bottom_axis2" data-idd-axis="numeric" data-idd-placement="bottom" style="position: relative;"></div>
             <div id="left_axis2" data-idd-axis="numeric" data-idd-placement="left" style="position: relative;"></div>
         </div>
+
+        <h3>Visible region is set to x=[0.5;1.0] y=[0.2; 0.8]</h3>
+        <div id="figure3" data-idd-plot="figure" style="width: 400px; height: 300px; float:left"
+            data-idd-navigation-enabled="false" data-idd-legend-enabled="true" data-idd-padding="30" data-idd-visible-region="0.5 1.0 0.2 0.8">
+
+            <div id="grid3" data-idd-plot='grid' data-idd-placement='center' data-idd-style='stroke: DarkGray; thickness: 1px;'
+                data-idd-xaxis='bottom_axis3' data-idd-yaxis='left_axis3'></div>
+
+            <div data-idd-plot="polyline" data-idd-style="stroke: red; thickness: 3" id="red line">
+                x   y
+                0   0
+                1   1
+                2   2
+            </div>
+            <div data-idd-plot="polyline" data-idd-style="stroke: green; thickness: 3" id="green line">
+                x   y
+                0   1
+                1   0
+                2   2
+            </div>
+
+            <div id="bottom_axis3" data-idd-axis="numeric" data-idd-placement="bottom" style="position: relative;"></div>
+            <div id="left_axis3" data-idd-axis="numeric" data-idd-placement="left" style="position: relative;"></div>
+        </div>
+
     </div>
 
 

src/idd/idd.base.js

@@ -280,6 +280,8 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
 
         var _plotRect;
 
+        // reading property overrides from attributes
+        // Note: data-idd-visible-region attribute is handled at the end of the constructor, as it needs more plot objects to be defined and valid 
         if (div) {
             _name = div.attr("data-idd-name") || div.attr("id") || "";
             if(div.attr("data-idd-ignored-by-fit-to-view")) {
@@ -1290,6 +1292,34 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
             }
         };
 
+        if(div) {
+            if(div.attr("data-idd-visible-region")) {
+                var regionStr = div.attr("data-idd-visible-region")
+                div.removeAttr("data-idd-ignored-by-fit-to-view")
+                var values = regionStr.split(' ')
+                if(values.length != 4) 
+                    throw "data-idd-visible-region must contain exactly 4 numbers (xmin,xmax,ymin,ymax) separated by single space"
+                var xmin = Number(values[0])
+                var xmax = Number(values[1])
+                var ymin = Number(values[2])
+                var ymax = Number(values[3])
+                if(xmin>xmax)
+                    throw "data-idd-visible-region attribute: xmax is less than xmin"
+                if(ymin>ymax)
+                    throw "data-idd-visible-region attribute: ymax is less than ymin"
+                
+                var dataToPlotX = this.xDataTransform && this.xDataTransform.dataToPlot;
+                var dataToPlotY = this.yDataTransform && this.yDataTransform.dataToPlot;
+
+                var plotXmin = dataToPlotX ? dataToPlotX(xmin) : xmin
+                var plotXmax = dataToPlotX ? dataToPlotX(xmax) : xmax
+                var plotYmin = dataToPlotY ? dataToPlotY(ymin) : ymin
+                var plotYmax = dataToPlotY ? dataToPlotY(ymax) : ymax
+                var plotRect = {x:plotXmin, width: plotXmax - plotXmin, y:plotYmin, height: plotYmax - plotYmin}
+                setVisibleRegion(plotRect) // this call will disable fit to view
+            }
+        }
+
         //Disables IsAutoFitEnabled and fits all visible objects into screen with padding
         this.fitToView = function () {
             if (!_isMaster) {