diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo
index b320e8b42..4699f6add 100644
Binary files a/.vs/AAWebPlatform/v15/.suo and b/.vs/AAWebPlatform/v15/.suo differ
diff --git a/AAWebPlatform.njsproj b/AAWebPlatform.njsproj
index 0fb5afed4..e082539ca 100644
--- a/AAWebPlatform.njsproj
+++ b/AAWebPlatform.njsproj
@@ -89,7 +89,7 @@
     <Compile Include="Panels\CurrentVolumePanel.js" />
     <Compile Include="Panels\OrderBookPanel.js" />
     <Compile Include="Physics.js" />
-    <Compile Include="PlotArea.js" />
+    <Compile Include="TimeLineCoordinateSystem.js" />
     <Compile Include="PriceChart.js" />
     <Compile Include="Resistance.js" />
     <Compile Include="FileServer.js" />
diff --git a/Balls.js b/Balls.js
index 182319819..50a83e64f 100644
--- a/Balls.js
+++ b/Balls.js
@@ -3,7 +3,7 @@
 
 function updateBallsTargets() {
 
-    /* Whenever there is a change in the currentZoom level, all targets needs to be recalculated in order to fit in the new plotArea. */
+    /* Whenever there is a change in the currentZoom level, all targets needs to be recalculated in order to fit in the new timeLineCoordinateSystem. */
 
     for (var i = 0; i < balls.length; i++) {
 
diff --git a/ChartGrid.js b/ChartGrid.js
index 0d208f2e2..9601f03de 100644
--- a/ChartGrid.js
+++ b/ChartGrid.js
@@ -9,7 +9,7 @@
     return chartGrid;
 
 
-    function draw(container, plotArea) {
+    function draw(container, timeLineCoordinateSystem) {
 
         let periods = [];
         let boxes = [];
@@ -17,7 +17,7 @@
 
         const basePeriod = {
             x: 8 * 60 * 60 * 1000,
-            y: plotArea.max.y / 1000 / CHART_ASPECT_RATIO
+            y: timeLineCoordinateSystem.max.y / 1000 / CHART_ASPECT_RATIO
         };
 
         let period = {
@@ -75,7 +75,7 @@
             let currentValue = box.topLeft;
 
             currentValue = unTransformThisPoint(currentValue, container);
-            currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
+            currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
 
             /* We must compare the current value on the current period, against the next period, to know which cell we are in. */
 
@@ -139,7 +139,7 @@
             let currentValue = box.topLeft;
 
             currentValue = unTransformThisPoint(currentValue, container);
-            currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
+            currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
 
             /* We must compare the current value on the current period, against the next period, to know which cell we are in. */
 
@@ -310,7 +310,7 @@
             let currentValue = box.topLeft;
 
             currentValue = unTransformThisPoint(currentValue, container);
-            currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
+            currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
 
             /* We must compare the current value on the current period, against the next period, to know which cell we are in. */
 
@@ -357,7 +357,7 @@
             let currentValue = box.topLeft;
 
             currentValue = unTransformThisPoint(currentValue, container);
-            currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
+            currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
 
             let date = new Date(currentValue.x);
 
@@ -385,7 +385,7 @@
             let currentValue = box.topLeft;
 
             currentValue = unTransformThisPoint(currentValue, container);
-            currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
+            currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
 
             let date = new Date(currentValue.x);
 
@@ -411,7 +411,7 @@
             };
 
             visiblePoint1 = unTransformThisPoint(visiblePoint1, container);
-            visiblePoint1 = plotArea.unInverseTransform(visiblePoint1, container.frame.height);
+            visiblePoint1 = timeLineCoordinateSystem.unInverseTransform(visiblePoint1, container.frame.height);
 
             let visiblePoint2 = {
                 x: viewPort.visibleArea.bottomRight.x,
@@ -419,7 +419,7 @@
             };
 
             visiblePoint2 = unTransformThisPoint(visiblePoint2, container);
-            visiblePoint2 = plotArea.unInverseTransform(visiblePoint2, container.frame.height);
+            visiblePoint2 = timeLineCoordinateSystem.unInverseTransform(visiblePoint2, container.frame.height);
 
             startingPoint = {
                 x: Math.trunc(visiblePoint1.x / periodWidth) * periodWidth,
@@ -464,7 +464,7 @@
 
             for (var j = startingPoint.y; j <= endingPoint.y + periodHeight; j = j + periodHeight) {
 
-                if (j >= 0 && j <= plotArea.max.y) {
+                if (j >= 0 && j <= timeLineCoordinateSystem.max.y) {
 
                     let point1 = {
                         x: visiblePoint1.x,
@@ -476,8 +476,8 @@
                         y: j
                     };
 
-                    point1 = plotArea.inverseTransform(point1, container.frame.height);
-                    point2 = plotArea.inverseTransform(point2, container.frame.height);
+                    point1 = timeLineCoordinateSystem.inverseTransform(point1, container.frame.height);
+                    point2 = timeLineCoordinateSystem.inverseTransform(point2, container.frame.height);
 
                     point1 = transformThisPoint(point1, container);
                     point2 = transformThisPoint(point2, container);
@@ -537,11 +537,11 @@
 
                 let point4 = {
                     x: i,
-                    y: plotArea.max.y
+                    y: timeLineCoordinateSystem.max.y
                 };
 
-                point3 = plotArea.inverseTransform(point3, container.frame.height);
-                point4 = plotArea.inverseTransform(point4, container.frame.height);
+                point3 = timeLineCoordinateSystem.inverseTransform(point3, container.frame.height);
+                point4 = timeLineCoordinateSystem.inverseTransform(point4, container.frame.height);
 
                 point3 = transformThisPoint(point3, container);
                 point4 = transformThisPoint(point4, container);
diff --git a/ChartUtilities.js b/ChartUtilities.js
index e652f8bf9..558d0fc99 100644
--- a/ChartUtilities.js
+++ b/ChartUtilities.js
@@ -150,7 +150,7 @@ function recalculatePeriod(zoomLevel) {
 }
 
 
-function checkIfMoreTradesAreNeeded(trades, container, plotArea, marketTrades, callBackFunction) {
+function checkIfMoreTradesAreNeeded(trades, container, timeLineCoordinateSystem, marketTrades, callBackFunction) {
 
     /* 
 
@@ -174,10 +174,10 @@ function checkIfMoreTradesAreNeeded(trades, container, plotArea, marketTrades, c
         y: 0
     };
 
-    firstTradePoint = plotArea.inverseTransform(firstTradePoint, container.frame.height);
+    firstTradePoint = timeLineCoordinateSystem.inverseTransform(firstTradePoint, container.frame.height);
     firstTradePoint = transformThisPoint(firstTradePoint, container);
 
-    lastTradePoint = plotArea.inverseTransform(lastTradePoint, container.frame.height);
+    lastTradePoint = timeLineCoordinateSystem.inverseTransform(lastTradePoint, container.frame.height);
     lastTradePoint = transformThisPoint(lastTradePoint, container);
 
     let totalDistance = lastTradePoint.x - firstTradePoint.x;  // Is the screen distance between the first and last trade.
diff --git a/OrderBookDepthChart.js b/OrderBookDepthChart.js
index ce4495124..401b4fb9e 100644
--- a/OrderBookDepthChart.js
+++ b/OrderBookDepthChart.js
@@ -7,7 +7,7 @@ function newOrderBookDephChart() {
 
     */
 
-    var plotArea = newPlotArea();
+    var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
 
     var orderBookDephChart = {
         addOrder: addOrder,
@@ -182,7 +182,7 @@ function newOrderBookDephChart() {
             };
 
             var minBasePoint = {
-                x: (bidPoints[0].rate - plotArea.min.x) * plotArea.scale.x,  // We take the first Order Rate on the array for this.
+                x: (bidPoints[0].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,  // We take the first Order Rate on the array for this.
                 y: orderBookDephChart.container.frame.height * 5 / 7
             };
 
@@ -200,13 +200,13 @@ function newOrderBookDephChart() {
 
             for (var i = 0; i < bidPoints.length; i++) {
 
-                if (bidPoints[i].rate >= plotArea.min.x && bidPoints[i].rate <= plotArea.max.x) {
+                if (bidPoints[i].rate >= timeLineCoordinateSystem.min.x && bidPoints[i].rate <= timeLineCoordinateSystem.max.x) {
 
                     progressiveSum = progressiveSum + bidPoints[i].amountSum;
 
                     point = {
-                        x: (bidPoints[i].rate - plotArea.min.x) * plotArea.scale.x,
-                        y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * plotArea.scale.y
+                        x: (bidPoints[i].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                        y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
                     };
 
                     var rawPosition = {
@@ -243,12 +243,12 @@ function newOrderBookDephChart() {
             /* We calculate the first point of the chart */
 
             var maxBasePoint = {
-                x: (plotArea.max.x - plotArea.min.x) * plotArea.scale.x, 
+                x: (timeLineCoordinateSystem.max.x - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x, 
                 y: orderBookDephChart.container.frame.height * 5 / 7
             };
 
             var minBasePoint = {
-                x: (askPoints[0].rate - plotArea.min.x) * plotArea.scale.x,  // We take the first Order Rate on the array for this.
+                x: (askPoints[0].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,  // We take the first Order Rate on the array for this.
                 y: orderBookDephChart.container.frame.height * 5 / 7
             };
 
@@ -265,13 +265,13 @@ function newOrderBookDephChart() {
 
             for (var i = 0; i < askPoints.length; i++) {
 
-                if (askPoints[i].rate >= plotArea.min.x && askPoints[i].rate <= plotArea.max.x) {
+                if (askPoints[i].rate >= timeLineCoordinateSystem.min.x && askPoints[i].rate <= timeLineCoordinateSystem.max.x) {
 
                     progressiveSum = progressiveSum + askPoints[i].amountSum;
 
                     point = {
-                        x: (askPoints[i].rate - plotArea.min.x) * plotArea.scale.x,
-                        y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * plotArea.scale.y
+                        x: (askPoints[i].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                        y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
                     };
 
                     point = transformThisPoint(point, orderBookDephChart.container);
@@ -300,15 +300,15 @@ function newOrderBookDephChart() {
 
     function drawAxis() {
 
-        var step = (plotArea.max.x - plotArea.min.x) / 10;
+        var step = (timeLineCoordinateSystem.max.x - timeLineCoordinateSystem.min.x) / 10;
 
         var decimals;
 
-        /* Lets identify how many decimals are needed to be displayed. To do that we will chekck when is the first time that two consecutives points in the plotArea are different. */
+        /* Lets identify how many decimals are needed to be displayed. To do that we will chekck when is the first time that two consecutives points in the timeLineCoordinateSystem are different. */
 
         for (var j = 0; j < 10; j++) {
 
-            var diff = (plotArea.min.x + step * 2).toFixed(j) - (plotArea.min.x + step * 1).toFixed(j);
+            var diff = (timeLineCoordinateSystem.min.x + step * 2).toFixed(j) - (timeLineCoordinateSystem.min.x + step * 1).toFixed(j);
 
             if (diff !== 0 && decimals === undefined) {
                 decimals = j;
@@ -318,7 +318,7 @@ function newOrderBookDephChart() {
         for (var i = 1; i < 10 ; i++) {
 
             var point = {
-                x: plotArea.min.x + step * i,
+                x: timeLineCoordinateSystem.min.x + step * i,
                 y: orderBookDephChart.container.frame.height * 6 / 7
             };
 
@@ -335,7 +335,7 @@ function newOrderBookDephChart() {
 
             /* Now we transform x on the actual coordinate on the canvas. */
 
-            point.x = (point.x - plotArea.min.x) * plotArea.scale.x;  // Now x represent a coordinate on the canvas.
+            point.x = (point.x - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x;  // Now x represent a coordinate on the canvas.
 
             point = orderBookDephChart.container.frame.frameThisPoint(point);
             point = orderBookDephChart.container.displacement.displaceThisPoint(point);
@@ -349,7 +349,7 @@ function newOrderBookDephChart() {
 
     function recalculateScale() {
 
-        /* Since the range of the data might change, we must calculate the plotArea everytime new data arrives. */
+        /* Since the range of the data might change, we must calculate the timeLineCoordinateSystem everytime new data arrives. */
 
         var minBidRate = bidPoints[bidPoints.length - 1];
         var maxBidRate = bidPoints[0];
@@ -452,7 +452,7 @@ function newOrderBookDephChart() {
 
         } 
 
-        plotArea.initialize(
+        timeLineCoordinateSystem.initialize(
             minValue,
             maxValue,
             orderBookDephChart.container.frame.width,
diff --git a/Panels/OrderBookPanel.js b/Panels/OrderBookPanel.js
index 5e26c012b..feb434e27 100644
--- a/Panels/OrderBookPanel.js
+++ b/Panels/OrderBookPanel.js
@@ -20,7 +20,7 @@ function newOrderBookPanel() {
     let currentOrderBook;
     let server;
 
-    var plotArea = newPlotArea();
+    var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
 
     return orderBookPanel;
 
@@ -142,7 +142,7 @@ function newOrderBookPanel() {
         let askPoints = currentOrderBook[0];
         let position;
 
-        /* Since the range of the data might change, we must calculate the plotArea everytime new data arrives. */
+        /* Since the range of the data might change, we must calculate the timeLineCoordinateSystem everytime new data arrives. */
 
         var minBidRate = bidPoints[bidPoints.length - 1];
         var maxBidRate = bidPoints[0];
@@ -272,7 +272,7 @@ function newOrderBookPanel() {
 
         }
 
-        plotArea.initialize(
+        timeLineCoordinateSystem.initialize(
             minValue,
             maxValue,
             orderBookPanel.container.frame.width,
@@ -308,7 +308,7 @@ function newOrderBookPanel() {
             };
 
             var minBasePoint = {
-                x: (position.rate - plotArea.min.x) * plotArea.scale.x,  // We take the first Order Rate on the array for this.
+                x: (position.rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,  // We take the first Order Rate on the array for this.
                 y: orderBookPanel.container.frame.height * 5 / 7
             };
 
@@ -331,13 +331,13 @@ function newOrderBookPanel() {
                     amount: bidPoints[i][1]
                 };
 
-                if (position.rate >= plotArea.min.x && position.rate <= plotArea.max.x) {
+                if (position.rate >= timeLineCoordinateSystem.min.x && position.rate <= timeLineCoordinateSystem.max.x) {
 
                     progressiveSum = progressiveSum + position.amount;
 
                     point = {
-                        x: (position.rate - plotArea.min.x) * plotArea.scale.x,
-                        y: orderBookPanel.container.frame.height * 5 / 7 - progressiveSum * plotArea.scale.y
+                        x: (position.rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                        y: orderBookPanel.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
                     };
 
                     point = orderBookPanel.container.frame.frameThisPoint(point);
@@ -372,12 +372,12 @@ function newOrderBookPanel() {
             /* We calculate the first point of the chart */
 
             var maxBasePoint = {
-                x: (plotArea.max.x - plotArea.min.x) * plotArea.scale.x,
+                x: (timeLineCoordinateSystem.max.x - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
                 y: orderBookPanel.container.frame.height * 5 / 7
             };
 
             var minBasePoint = {
-                x: (position.rate - plotArea.min.x) * plotArea.scale.x,  // We take the first Order Rate on the array for this.
+                x: (position.rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,  // We take the first Order Rate on the array for this.
                 y: orderBookPanel.container.frame.height * 5 / 7
             };
 
@@ -399,13 +399,13 @@ function newOrderBookPanel() {
                     amount: askPoints[i][1]
                 };
 
-                if (position.rate >= plotArea.min.x && position.rate <= plotArea.max.x) {
+                if (position.rate >= timeLineCoordinateSystem.min.x && position.rate <= timeLineCoordinateSystem.max.x) {
 
                     progressiveSum = progressiveSum + position.amount;
 
                     point = {
-                        x: (position.rate - plotArea.min.x) * plotArea.scale.x,
-                        y: orderBookPanel.container.frame.height * 5 / 7 - progressiveSum * plotArea.scale.y
+                        x: (position.rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                        y: orderBookPanel.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
                     };
 
                     point = orderBookPanel.container.frame.frameThisPoint(point);
diff --git a/PriceChart.js b/PriceChart.js
index 984ef0bb4..3c44f52e6 100644
--- a/PriceChart.js
+++ b/PriceChart.js
@@ -3,7 +3,7 @@ function newPriceChart() {
 
     var trades = [];
 
-    var plotArea = newPlotArea();
+    var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
 
     var datetime;
     var datetimeRange;
@@ -134,7 +134,7 @@ function newPriceChart() {
 
         }
 
-        plotArea.initialize(
+        timeLineCoordinateSystem.initialize(
             minValue,
             maxValue,
             priceChart.container.frame.width,
@@ -149,8 +149,8 @@ function newPriceChart() {
         if (trades.length > 0) {
 
             var firstPoint = {
-                x: (trades[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
-                y: priceChart.container.frame.height - (trades[0].rate - plotArea.min.y) * plotArea.scale.y
+                x: (trades[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                y: priceChart.container.frame.height - (trades[0].rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
             };
 
             firstPoint = transformThisPoint(firstPoint, priceChart.container);
@@ -162,8 +162,8 @@ function newPriceChart() {
                 var trade = trades[i];
 
                 point = {
-                    x: (trade.datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
-                    y: priceChart.container.frame.height - (trade.rate - plotArea.min.y) * plotArea.scale.y
+                    x: (trade.datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                    y: priceChart.container.frame.height - (trade.rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
                 };
 
                 point = transformThisPoint(point, priceChart.container);
diff --git a/SpreadChart.js b/SpreadChart.js
index dd4b6e9b5..89e6b78bd 100644
--- a/SpreadChart.js
+++ b/SpreadChart.js
@@ -5,7 +5,7 @@ function newSpreadChart() {
     var sells = [];
     var buys = [];
 
-    var plotArea = newPlotArea();
+    var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
 
     var datetime;
     var datetimeRange;
@@ -137,7 +137,7 @@ function newSpreadChart() {
 
         }
 
-        plotArea.initialize(
+        timeLineCoordinateSystem.initialize(
             minValue,
             maxValue,
             spreadChart.container.frame.width,
@@ -170,14 +170,14 @@ function newSpreadChart() {
             let point;
 
             let firstPoint = {
-                x: (sells[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
-                y: spreadChart.container.frame.height - (sells[0].rate - plotArea.min.y) * plotArea.scale.y
+                x: (sells[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                y: spreadChart.container.frame.height - (sells[0].rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
             };
 
             firstPoint = transformThisPoint(firstPoint, spreadChart.container);
 
             let seconddPoint = {
-                x: (sells[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
+                x: (sells[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
                 y: spreadChart.container.frame.height
             };
 
@@ -196,8 +196,8 @@ function newSpreadChart() {
                 let sell = sells[i];
 
                 point = {
-                    x: (sell.datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
-                    y: spreadChart.container.frame.height - (sell.rate - plotArea.min.y) * plotArea.scale.y
+                    x: (sell.datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                    y: spreadChart.container.frame.height - (sell.rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
                 };
 
                 thirdPoint = {
@@ -227,14 +227,14 @@ function newSpreadChart() {
         if (buys.length > 0) {
 
             let firstPoint = {
-                x: (buys[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
-                y: spreadChart.container.frame.height - (buys[0].rate - plotArea.min.y) * plotArea.scale.y
+                x: (buys[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                y: spreadChart.container.frame.height - (buys[0].rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
             };
 
             firstPoint = transformThisPoint(firstPoint, spreadChart.container);
 
             let seconddPoint = {
-                x: (buys[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
+                x: (buys[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
                 y: 0
             };
 
@@ -254,8 +254,8 @@ function newSpreadChart() {
                 let buy = buys[i];
 
                 point = {
-                    x: (buy.datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
-                    y: spreadChart.container.frame.height - (buy.rate - plotArea.min.y) * plotArea.scale.y
+                    x: (buy.datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
+                    y: spreadChart.container.frame.height - (buy.rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
                 };
 
                 thirdPoint = {
diff --git a/PlotArea.js b/TimeLineCoordinateSystem.js
similarity index 60%
rename from PlotArea.js
rename to TimeLineCoordinateSystem.js
index 75cafd471..631faad4e 100644
--- a/PlotArea.js
+++ b/TimeLineCoordinateSystem.js
@@ -1,13 +1,15 @@
 /*
 
-The Plot Area object is responsible for defining the area of a data set that is going to be plotted and
-to the scales that actual values must be multiplied by in order to fit into a certain space.
+This Object object is responsible for defining the coordinate system in a TimeLine.
+
+The scale on the X axis depends on the time.
+The scale on the Y axis depends on the data that wants to be plotted. Usually we need the Max amount on that data to generate a proper scale.
 
 */
 
-function newPlotArea() {
+function newTimeLineCoordinateSystem() {
 
-    var plotArea = {
+    var thisObject = {
         min: undefined,                     
         max: undefined,                     
         scale: undefined, 
@@ -35,44 +37,44 @@ function newPlotArea() {
         y: 0
     };
 
-    plotArea.min = min;
-    plotArea.max = max;
-    plotArea.scale = scale;
+    thisObject.min = min;
+    thisObject.max = max;
+    thisObject.scale = scale;
 
-    return plotArea;
+    return thisObject;
 
     function initialize(minValue, maxValue, maxWidth, maxHeight) {
 
         /* Defines the min and max value of rate that we are going to transport to the available screen at the center position. */
 
-        plotArea.min.x = minValue.x; // * 0.999; // 0.1% less
-        plotArea.max.x = maxValue.x; // * 1.001; // 0.1% more
+        thisObject.min.x = minValue.x; // * 0.999; // 0.1% less
+        thisObject.max.x = maxValue.x; // * 1.001; // 0.1% more
 
-        plotArea.min.y = minValue.y; // * 0.999; // 0.1% less
-        plotArea.max.y = maxValue.y; // * 1.001; // 0.1% more
+        thisObject.min.y = minValue.y; // * 0.999; // 0.1% less
+        thisObject.max.y = maxValue.y; // * 1.001; // 0.1% more
 
         /* Defines the initial Zoom level at center position. */
 
-        plotArea.scale.x = maxWidth / (plotArea.max.x - plotArea.min.x);
-        plotArea.scale.y = maxHeight / (plotArea.max.y - plotArea.min.y);
+        thisObject.scale.x = maxWidth / (thisObject.max.x - thisObject.min.x);
+        thisObject.scale.y = maxHeight / (thisObject.max.y - thisObject.min.y);
 
     }
 
     function initializeX(minValue, maxValue, maxWidth) {
 
-        plotArea.min.x = minValue.x; // * 0.999; // 0.1% less
-        plotArea.max.x = maxValue.x; // * 1.001; // 0.1% more
+        thisObject.min.x = minValue.x; // * 0.999; // 0.1% less
+        thisObject.max.x = maxValue.x; // * 1.001; // 0.1% more
 
-        plotArea.scale.x = maxWidth / (plotArea.max.x - plotArea.min.x);
+        thisObject.scale.x = maxWidth / (thisObject.max.x - thisObject.min.x);
 
     }
 
     function initializeY(minValue, maxValue, maxHeight) {
 
-        plotArea.min.y = minValue.y; // * 0.999; // 0.1% less
-        plotArea.max.y = maxValue.y; // * 1.001; // 0.1% more
+        thisObject.min.y = minValue.y; // * 0.999; // 0.1% less
+        thisObject.max.y = maxValue.y; // * 1.001; // 0.1% more
 
-        plotArea.scale.y = maxHeight / (plotArea.max.y - plotArea.min.y);
+        thisObject.scale.y = maxHeight / (thisObject.max.y - thisObject.min.y);
 
     }
 
diff --git a/TimelineChart.js b/TimelineChart.js
index 76131d079..131dfe2c4 100644
--- a/TimelineChart.js
+++ b/TimelineChart.js
@@ -5,7 +5,7 @@ function newTimelineChart() {
 
     let activePlotters = [];
 
-    let plotArea = newPlotArea();
+    let timeLineCoordinateSystem = newTimeLineCoordinateSystem();
 
     let timePeriod = INITIAL_TIME_PERIOD;
     let datetime = INITIAL_DATE;
@@ -310,7 +310,7 @@ function newTimelineChart() {
         };
 
         center = unTransformThisPoint(center, timelineChart.container);
-        center = plotArea.unInverseTransform(center, timelineChart.container.frame.height);
+        center = timeLineCoordinateSystem.unInverseTransform(center, timelineChart.container.frame.height);
 
         let newDate = new Date(0);
         newDate.setUTCSeconds(center.x / 1000);
@@ -376,7 +376,7 @@ function newTimelineChart() {
 
             drawBackground();
 
-            chartGrid.draw(timelineChart.container, plotArea);
+            chartGrid.draw(timelineChart.container, timeLineCoordinateSystem);
 
             for (var i = 0; i < activePlotters.length; i++) {
 
@@ -400,7 +400,7 @@ function newTimelineChart() {
         };
 
 
-        plotArea.initialize(
+        timeLineCoordinateSystem.initialize(
             minValue,
             maxValue,
             timelineChart.container.frame.width,
diff --git a/Utilities.js b/Utilities.js
index 438ab31c6..6daf1683e 100644
--- a/Utilities.js
+++ b/Utilities.js
@@ -45,10 +45,10 @@ function pad(str, max) {
     return str.length < max ? pad("0" + str, max) : str;
 }
 
-function getDateFromPoint(point, container, plotArea) {
+function getDateFromPoint(point, container, timeLineCoordinateSystem) {
 
     point = unTransformThisPoint(point, container);
-    point = plotArea.unInverseTransform(point, container.frame.height);
+    point = timeLineCoordinateSystem.unInverseTransform(point, container.frame.height);
 
     let date = new Date(point.x);
 
@@ -56,19 +56,19 @@ function getDateFromPoint(point, container, plotArea) {
 }
 
 
-function getRateFromPoint(point, container, plotArea) {
+function getRateFromPoint(point, container, timeLineCoordinateSystem) {
 
     point = unTransformThisPoint(point, container);
-    point = plotArea.unInverseTransform(point, container.frame.height);
+    point = timeLineCoordinateSystem.unInverseTransform(point, container.frame.height);
 
     return point.y;
 }
 
 
-function getMilisecondsFromPoint(point, container, plotArea) {
+function getMilisecondsFromPoint(point, container, timeLineCoordinateSystem) {
 
     point = unTransformThisPoint(point, container);
-    point = plotArea.unInverseTransform(point, container.frame.height);
+    point = timeLineCoordinateSystem.unInverseTransform(point, container.frame.height);
 
     return point.x;
 }
diff --git a/ViewPort.js b/ViewPort.js
index 930aa9cdd..3011318a2 100644
--- a/ViewPort.js
+++ b/ViewPort.js
@@ -142,7 +142,7 @@ function newViewPort() {
 
    }
 
-   function displaceToDatetime(datetime, plotArea) {
+   function displaceToDatetime(datetime, timeLineCoordinateSystem) {
 
 
        targetOffset.x = targetOffset.x + displaceVector.x;
diff --git a/index.html b/index.html
index 972fd2dae..592596d95 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
     <script type="text/javascript" src="Physics.js"></script>
     <script type="text/javascript" src="Zoom.js"></script>
     <script type="text/javascript" src="Displace.js"></script>
-    <script type="text/javascript" src="PlotArea.js"></script>
+    <script type="text/javascript" src="TimeLineCoordinateSystem.js"></script>
     <script type="text/javascript" src="Utilities.js"></script>
     <script type="text/javascript" src="ViewPort.js"></script>
     <script type="text/javascript" src="AggregatedOrdersArray.js"></script>
diff --git a/temp.js b/temp.js
index 55b9e3634..7b0834ae6 100644
--- a/temp.js
+++ b/temp.js
@@ -17,7 +17,7 @@ function newOrderBookChart() {
         setDatetime: setDatetime,
         isInitialized: false,
         container: undefined,
-        plotArea: undefined,
+        timeLineCoordinateSystem: undefined,
         draw: draw,
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
         initialize: initialize
@@ -119,12 +119,12 @@ function newOrderBookChart() {
 
         */
 
-        /* Since the range of the data might change, we must calculate the plotArea everytime new data arrives. */
+        /* Since the range of the data might change, we must calculate the timeLineCoordinateSystem everytime new data arrives. */
 
-        var plotArea = newPlotArea();
-        orderBookChart.plotArea = plotArea;
+        var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
+        orderBookChart.timeLineCoordinateSystem = timeLineCoordinateSystem;
 
-        orderBookChart.plotArea.initialize(
+        orderBookChart.timeLineCoordinateSystem.initialize(
             orderBookChart.orderBook.server.orderBookStatistics.resultSet["row 1"].MIN_Rate,
             orderBookChart.orderBook.server.orderBookStatistics.resultSet["row 2"].MAX_Rate,
             orderBookChart.container.frame.width
@@ -194,12 +194,12 @@ function newOrderBookChart() {
             /* We calculate the first points of the chart. These are not points representing orders, but the lower part of the hill plotted. */
 
             var maxBasePoint = {
-                x: (orderBookBidsChartPoints[orderBookBidsChartPoints.length - 1][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.plotArea.x,  // We take the first Order Rate on the array for this.
+                x: (orderBookBidsChartPoints[orderBookBidsChartPoints.length - 1][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,  // We take the first Order Rate on the array for this.
                 y: orderBookChart.container.frame.height * 5 / 7
             };
 
             var minBasePoint = {
-                x: (orderBookBidsChartPoints[0][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.x,  // We take the first Order Rate on the array for this.
+                x: (orderBookBidsChartPoints[0][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.x,  // We take the first Order Rate on the array for this.
                 y: orderBookChart.container.frame.height * 5 / 7
             };
 
@@ -230,7 +230,7 @@ function newOrderBookChart() {
                 sumY = sumY + orderBookBidsChartPoints[i][1];
 
                 var point = {
-                    x: (orderBookBidsChartPoints[i][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.plotArea.x,
+                    x: (orderBookBidsChartPoints[i][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,
                     y: orderBookChart.container.frame.height * 5 / 7 - sumY
                 };
 
@@ -279,12 +279,12 @@ function newOrderBookChart() {
             /* We calculate the first point of the chart */
 
             var maxBasePoint = {
-                x: (orderBookAsksChartPoints[orderBookAsksChartPoints.length - 1][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.plotArea.x,  // We take the first Order Rate on the array for this.
+                x: (orderBookAsksChartPoints[orderBookAsksChartPoints.length - 1][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,  // We take the first Order Rate on the array for this.
                 y: orderBookChart.container.frame.height * 5 / 7
             };
 
             var minBasePoint = {
-                x: (orderBookAsksChartPoints[0][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.plotArea.x,  // We take the first Order Rate on the array for this.
+                x: (orderBookAsksChartPoints[0][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,  // We take the first Order Rate on the array for this.
                 y: orderBookChart.container.frame.height * 5 / 7
             };
 
@@ -315,7 +315,7 @@ function newOrderBookChart() {
                 sumY = sumY + orderBookAsksChartPoints[i][1];
 
                 var point = {
-                    x: (orderBookAsksChartPoints[i][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.plotArea.x,
+                    x: (orderBookAsksChartPoints[i][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,
                     y: orderBookChart.container.frame.height * 5 / 7 - sumY
                 };
 
@@ -352,15 +352,15 @@ function newOrderBookChart() {
 
     function drawXAxis() {
 
-        var step = (orderBookChart.plotArea.max.x - orderBookChart.plotArea.min.x) / 20;
+        var step = (orderBookChart.timeLineCoordinateSystem.max.x - orderBookChart.timeLineCoordinateSystem.min.x) / 20;
 
         var decimals;
 
-        /* Lets identify how many decimals are needed to be displayed. To do that we will chekck when is the first time that two consecutives points in the plotArea are different. */
+        /* Lets identify how many decimals are needed to be displayed. To do that we will chekck when is the first time that two consecutives points in the timeLineCoordinateSystem are different. */
 
         for (var j = 0; j < 10; j++) {
 
-            var diff = (orderBookChart.plotArea.min.x + step * 2).toFixed(j) - (orderBookChart.plotArea.min.x + step * 1).toFixed(j);
+            var diff = (orderBookChart.timeLineCoordinateSystem.min.x + step * 2).toFixed(j) - (orderBookChart.timeLineCoordinateSystem.min.x + step * 1).toFixed(j);
 
             if (diff !== 0 && decimals === undefined) {
                 decimals = j;
@@ -370,7 +370,7 @@ function newOrderBookChart() {
         for (var i = 1; i < 20; i++) {
 
             var point = {
-                x: orderBookChart.plotArea.min.x + step * i,
+                x: orderBookChart.timeLineCoordinateSystem.min.x + step * i,
                 y: orderBookChart.container.frame.height * 6 / 7
             };
 
@@ -387,7 +387,7 @@ function newOrderBookChart() {
 
             /* Now we transform x on the actual coordinate on the canvas. */
 
-            point.x = (point.x - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.scale.x;  // Now x represent a coordinate on the canvas.
+            point.x = (point.x - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.scale.x;  // Now x represent a coordinate on the canvas.
 
             point = orderBookChart.container.frame.frameThisPoint(point);
             point = orderBookChart.container.displacement.displaceThisPoint(point);
@@ -672,7 +672,7 @@ function newOrderBookChart() {
             /* Position of the ball without displacement or zoon. */
 
             var rawPosition = {
-                x: (order.rate - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.scale.x,
+                x: (order.rate - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.scale.x,
                 y: orderBookChart.container.frame.height * 5 / 7
             };
 
@@ -729,7 +729,7 @@ function newOrderBookChart() {
         /* This function is used to create new balls, representing labels of each point on the chart. */
 
         var rawPosition = {
-            x: (rate - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.scale.x,
+            x: (rate - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.scale.x,
             y: orderBookChart.container.frame.height * 5 / 7
         };