diff --git a/ChartsSpace/TimeLineCoordinateSystem.js b/ChartsSpace/TimeLineCoordinateSystem.js
index 5cd0abfa5..2c906b81d 100644
--- a/ChartsSpace/TimeLineCoordinateSystem.js
+++ b/ChartsSpace/TimeLineCoordinateSystem.js
@@ -92,8 +92,8 @@ function newTimeLineCoordinateSystem () {
         */
 
     point = {
-      x: (point.x - this.min.x) * this.scale.x,
-      y: maxHeight - (point.y - this.min.y) * this.scale.y
+      x: (point.x - thisObject.min.x) * thisObject.scale.x,
+      y: maxHeight - (point.y - thisObject.min.y) * thisObject.scale.y
     }
 
     return point
@@ -101,8 +101,8 @@ function newTimeLineCoordinateSystem () {
 
   function transformThisPoint2 (point) {
     point = {
-      x: (point.x - this.min.x) * this.scale.x,
-      y: (maxHeight - point.y - this.min.y) * this.scale.y
+      x: (point.x - thisObject.min.x) * thisObject.scale.x,
+      y: (maxHeight - point.y - thisObject.min.y) * thisObject.scale.y
     }
 
     return point
@@ -110,8 +110,8 @@ function newTimeLineCoordinateSystem () {
 
   function unInverseTransform (point, inverseY) {
     point = {
-      x: (point.x / this.scale.x) + this.min.x,
-      y: (inverseY - point.y) / this.scale.y + this.min.y
+      x: (point.x / thisObject.scale.x) + thisObject.min.x,
+      y: (inverseY - point.y) / thisObject.scale.y + thisObject.min.y
     }
 
     return point
@@ -119,8 +119,8 @@ function newTimeLineCoordinateSystem () {
 
   function inverseTransformUncappedY (point, inverseY) {
     point = {
-      x: (point.x - this.min.x) * this.scale.x,
-      y: (inverseY - point.y) * this.scale.y
+      x: (point.x - thisObject.min.x) * thisObject.scale.x,
+      y: (inverseY - point.y) * thisObject.scale.y
     }
 
     return point
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index db77c5505..c8b11a9c2 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -199,6 +199,33 @@ function newTimeMachine () {
     }
   }
 
+  function initializeTimeFrameScale () {
+    thisObject.timeFrameScale = newTimeFrameScale()
+    thisObject.timeFrameScale.fitFunction = thisObject.fitFunction
+    thisObject.timeFrameScale.payload = thisObject.payload.node.timeFrameScale.payload
+
+    timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Changed', function (event) {
+      let currentTimeFrame = timeFrame
+      timeFrame = event.timeFrame
+      if (timeFrame !== currentTimeFrame) {
+        for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+          let timelineChart = thisObject.timelineCharts[i]
+          if (timelineChart.timeFrameScale === undefined) {
+            timelineChart.plotterManager.setTimeFrame(timeFrame)
+          }
+        }
+      }
+    })
+
+    thisObject.timeFrameScale.initialize(timeLineCoordinateSystem, thisObject.container)
+
+    timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOver', timeFrameScaleMouseOver)
+
+    function timeFrameScaleMouseOver (event) {
+      thisObject.container.eventHandler.raiseEvent('onMouseOver', event)
+    }
+  }
+
   function getContainer (point, purpose) {
     let container
 
@@ -220,8 +247,17 @@ function newTimeMachine () {
       }
     }
 
-    for (let i = 0; i < this.timelineCharts.length; i++) {
-      container = this.timelineCharts[i].getContainer(point)
+    if (thisObject.timeFrameScale !== undefined) {
+      container = thisObject.timeFrameScale.getContainer(point)
+      if (container !== undefined) {
+        if (container.isForThisPurpose(purpose)) {
+          return container
+        }
+      }
+    }
+
+    for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+      container = thisObject.timelineCharts[i].getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           if (thisObject.container.frame.isThisPointHere(point) === true) {
@@ -269,7 +305,7 @@ function newTimeMachine () {
       let node = thisObject.payload.node.timelineCharts[j]
       let timelineChart = timelineChartsMap.get(node.id)
       if (timelineChart === undefined) {
-              /* The timeline chart node is new, thus we need to initialize a new timelineChart */
+              /* The timeline timelineChart node is new, thus we need to initialize a new timelineChart */
         initializeTimelineChart(node, syncWithDesignerLoop)
       } else {
               /* The time machine already exists, we tag it as existing at the current loop. */
@@ -299,7 +335,7 @@ function newTimeMachine () {
       timelineChartsMap.set(node.id, timelineChart)
       timelineChart.payload.uiObject.setValue('Loading...')
 
-      /* Setting up the new timeline chart. */
+      /* Setting up the new timeline timelineChart. */
       timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
       timelineChart.container.fitFunction = thisObject.container.fitFunction
       timelineChart.container.frame.height = thisObject.container.frame.height
@@ -348,25 +384,25 @@ function newTimeMachine () {
     }
 
     for (let i = 0; i < thisObject.timelineCharts.length; i++) {
-      let chart = thisObject.timelineCharts[i]
-      chart.physics()
+      let timelineChart = thisObject.timelineCharts[i]
+      timelineChart.physics()
     }
   }
 
   function drawBackground () {
     if (thisObject.container.frame.isInViewPort()) {
-      for (let i = 0; i < this.timelineCharts.length; i++) {
-        let chart = this.timelineCharts[i]
-        chart.drawBackground()
+      for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+        let timelineChart = thisObject.timelineCharts[i]
+        timelineChart.drawBackground()
       }
     }
   }
 
   function draw () {
     if (thisObject.container.frame.isInViewPort()) {
-      for (let i = 0; i < this.timelineCharts.length; i++) {
-        let chart = this.timelineCharts[i]
-        chart.draw()
+      for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+        let timelineChart = thisObject.timelineCharts[i]
+        timelineChart.draw()
       }
 
       if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() }
diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index 457f858c5..993752e17 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -16,6 +16,7 @@ function newTimelineChart () {
     fitFunction: undefined,
     timeFrameScale: undefined,
     payload: undefined,
+    plotterManager: undefined,
     physics: physics,
     drawBackground: drawBackground,
     draw: draw,
@@ -30,7 +31,6 @@ function newTimelineChart () {
 
   let productsPanel
 
-  let plotterManager
   let exchange
   let market
 
@@ -69,8 +69,8 @@ function newTimelineChart () {
     thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSuscriptionId)
 
-    plotterManager.finalize()
-    plotterManager = undefined
+    thisObject.plotterManager.finalize()
+    thisObject.plotterManager = undefined
 
     canvas.panelsSpace.destroyPanel(productsPanelHandle)
 
@@ -109,15 +109,15 @@ function newTimelineChart () {
       onZoomChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
 
        /* Initialize the Plotter Manager */
-      plotterManager = newPlottersManager()
+      thisObject.plotterManager = newPlottersManager()
 
-      plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
+      thisObject.plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
 
-      plotterManager.container.frame.position.x = 0
-      plotterManager.container.frame.position.y = 0
+      thisObject.plotterManager.container.frame.position.x = 0
+      thisObject.plotterManager.container.frame.position.y = 0
 
-      plotterManager.fitFunction = thisObject.fitFunction
-      plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady)
+      thisObject.plotterManager.fitFunction = thisObject.fitFunction
+      thisObject.plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady)
 
       function onPlotterManagerReady (err) {
         if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
@@ -171,7 +171,7 @@ function newTimelineChart () {
       let currentTimeFrame = timeFrame
       timeFrame = event.timeFrame
       if (timeFrame !== currentTimeFrame) {
-        plotterManager.setTimeFrame(timeFrame)
+        thisObject.plotterManager.setTimeFrame(timeFrame)
       }
     })
 
@@ -224,7 +224,7 @@ function newTimelineChart () {
 
     datetime = newDate
 
-    plotterManager.setDatetime(datetime)
+    thisObject.plotterManager.setDatetime(datetime)
   }
 
   function getContainer (point) {
@@ -284,7 +284,7 @@ function newTimelineChart () {
         window.CHART_ON_FOCUS = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
       }
       drawChartsBackground()
-      plotterManager.draw()
+      thisObject.plotterManager.draw()
     }
   }
 
diff --git a/Plotter.js b/Plotter.js
index a0cde53cc..52d0110d4 100644
--- a/Plotter.js
+++ b/Plotter.js
@@ -168,8 +168,8 @@ function newPlotter () {
     try {
       let container
       /* First we check if this point is inside this space. */
-      if (this.container.frame.isThisPointHere(point) === true) {
-        return this.container
+      if (thisObject.container.frame.isThisPointHere(point) === true) {
+        return thisObject.container
       } else {
       /* This point does not belong to this space. */
         return undefined
@@ -222,7 +222,7 @@ function newPlotter () {
 
   function draw () {
     try {
-      this.container.frame.draw()
+      thisObject.container.frame.draw()
       plotChart()
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] draw -> err = ' + err.stack) }
diff --git a/SplashScreen.js b/SplashScreen.js
index 38f75d5ef..c73dcad85 100644
--- a/SplashScreen.js
+++ b/SplashScreen.js
@@ -143,14 +143,14 @@ function newSplashScreen () {
 
         /* First we check if this point is inside this space. */
 
-    if (this.container.frame.isThisPointHere(point) === true) {
+    if (thisObject.container.frame.isThisPointHere(point) === true) {
             /* Now we see which is the inner most container that has it */
 
             // add validation of inner most containers here.
 
             /* The point does not belong to any inner container, so we return the current container. */
 
-      return this.container
+      return thisObject.container
     } else {
             /* This point does not belong to this space. */