diff --git a/Websites/SharePrices/SharePrices.v12.suo b/Websites/SharePrices/SharePrices.v12.suo
index 3847ce3..f1e3c4e 100644
Binary files a/Websites/SharePrices/SharePrices.v12.suo and b/Websites/SharePrices/SharePrices.v12.suo differ
diff --git a/Websites/SharePrices/SharePrices/FlotTest.html b/Websites/SharePrices/SharePrices/FlotTest.html
deleted file mode 100644
index 00d6281..0000000
--- a/Websites/SharePrices/SharePrices/FlotTest.html
+++ /dev/null
@@ -1,198 +0,0 @@
-﻿<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <title>Flot test</title>
-    <script src="scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.time.min.js" type="text/javascript"></script>
-    <script src="scripts/FlotGaps.js" type="text/javascript"></script>
-  <style>
-    table {
-      border-collapse: collapse;
-    }
-    td {
-      border: 1px solid black;
-      border-spacing: 1px;
-      padding: 0;
-    }
-    .pcLabel {
-      /*position: absolute;*/
-      width: 100px;
-      background-color: transparent;
-      text-align: center;
-      /*border: 1px solid green;*/
-    }
-    .pcBackground {
-      position: absolute;
-      background-color: lightgrey;
-      z-index:-1;
-    }
-  </style>
-</head>
-<body>
-  <div>
-    <table>
-      <tr>
-        <td>Col1</td>
-        <td>Col2</td>
-        <td>Col3</td>
-        <td>Col4</td>
-        <td>Col5</td>
-        <td>Col6</td>
-        <td>Col7</td>
-        <td>Col8</td>
-        <td>Col9</td>
-      </tr>
-      <tr>
-        <td>Value Col 1</td>
-        <td>Value Col 2</td>
-        <td>Value Col 3</td>
-        <td>Value Col 4</td>
-        <td>Value Col 5</td>
-        <td>Value Col 6</td>
-        <td>Value Col 7</td>
-        <td>Value Col 8</td>
-        <td>Value Col 9</td>
-      </tr>
-      <tr>
-        <td>Value Col 1</td>
-        <td>
-          <div class="pcBackground" style="width:30px;">&nbsp;</div>
-          <div class="pcLabel">30%</div>
-        </td>
-        <td>
-          <div class="pcBackground" style="width:60px;">&nbsp;</div>
-          <div class="pcLabel">60%</div>
-        </td>
-        <td>
-          <div class="pcBackground" style="width:90px;">&nbsp;</div>
-          <div class="pcLabel">90%</div>
-        </td>
-        <td>Value Col 5</td>
-        <td>Value Col 6</td>
-        <td>Value Col 7</td>
-        <td>Value Col 8</td>
-        <td>Value Col 9</td>
-      </tr>
-      <tr>
-        <td>Value Col 1</td>
-        <td>Value Col 2</td>
-        <td>Value Col 3</td>
-        <td>Value Col 4</td>
-        <td>Value Col 5</td>
-        <td>Value Col 6</td>
-        <td>Value Col 7</td>
-        <td>Value Col 8</td>
-        <td>Value Col 9</td>
-      </tr>
-    </table>
-  </div>
-  <div id="chartDiv" style="width:800px; height: 200px;"></div>
-  <div id="chartDiv2" style="width:800px; height: 200px;"></div>
-
-  <script type="text/javascript">
-    Date.prototype.yyyymmddhhmmss = function () {
-      var yyyy = this.getFullYear().toString();
-      var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based         
-      var dd = this.getDate().toString();
-      var hh = this.getHours().toString();
-      var nn = this.getMinutes().toString();
-      var ss = this.getSeconds().toString();
-      return yyyy + '-' + (mm[1] ? mm : "0" + mm[0]) + '-' + (dd[1] ? dd : "0" + dd[0]) + " " + (hh[1] ? hh : "0" + hh[0]) + ":" + (nn[1] ? nn : "0" + nn[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
-    };
-    var timespans = { oneSecond: 1000, oneMinute: 60 * 1000, oneHour: 60 * 60 * 1000, oneDay: 24 * 60 * 60 * 1000, oneWeek: 7 * 24 * 60 * 60 * 1000, oneMonth: 31 * 24 * 60 * 60 * 1000 };
-    function z(dt) {
-      return new Date(dt).yyyymmddhhmmss();
-    };
-    
-    function generateData1() {
-      let series = [];
-      let baseDate = new Date('2020-06-15').getTime();
-      for (let w = 0; w < 2; w++) {
-        let price = 1;
-        for (let d = 0; d < 5; d++) {
-          if (series.length > 0) { series.push([null, null]) };
-          for (let h = 9; h < 18; h += 2) {
-            series.push([baseDate + (w * timespans.oneWeek) + (d * timespans.oneDay) + (h * timespans.oneHour), price++]);
-          }
-        }
-      }
-      return [series];
-    }
-    function generateData2() {
-      let series = [];
-      let baseDate = new Date('2020-06-15').getTime();
-      for (let w = 0; w < 4; w++) {
-        let price = 1;
-        for (let d = 0; d < 5; d++) {
-          if (series.length > 0) { series.push([null, null]) };
-          for (let h = 9; h < 18; h++) {
-            series.push([baseDate + (w * timespans.oneWeek) + (d * timespans.oneDay) + (h * timespans.oneHour), price++]);
-          }
-        }
-      }
-      return [series];
-    }
-
-    function drawChart() {
-      let cd1 = generateData1();
-      let mygapMap = generateChartGapMap(cd1[0], timespans.oneHour);
-      $.plot($("#chartDiv"), cd1, {
-        points: { show: false },
-        lines: { show: true },
-        grid: { hoverable: true },
-        xaxis: {
-          mode: "time",
-          timezone: 'browser',
-          transform: function (v) {
-            return mapChartXValue(v, mygapMap);
-          },
-          inverseTransform: function (v) { return unmapChartXValue(v, mygapMap); }
-        }
-      });
-      $("<div id='tooltip'></div>").css({ position: "absolute", display: "none", border: "1px solid #fdd", padding: "2px", "background-color": "#fee", opacity: 0.80 }).appendTo("body");
-      $("#chartDiv").bind("plothover", function (event, pos, item) {
-        if (!pos.x || !pos.y) { return; }
-        if (item) {
-          let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
-          let y = item.datapoint[1].toFixed(2);
-          $("#tooltip").html(x + " = " + y).css({ top: item.pageY + 5, left: item.pageX + 5 }).fadeIn(200);
-        } else {
-          $("#tooltip").hide();
-        }
-      });
-      
-
-
-      let cd2 = generateData2();
-      let mygapMap2 = generateChartGapMap(cd2[0], timespans.oneHour);
-      $.plot($("#chartDiv2"), cd2, {
-        points: { show: false },
-        lines: { show: true },
-        grid: { hoverable: true },
-        xaxis: {
-          mode: "time",
-          timezone: 'browser',
-          transform: function (v) {
-            return mapChartXValue(v, mygapMap2);
-          },
-          inverseTransform: function (v) { return unmapChartXValue(v, mygapMap2); }
-        }
-      });
-      $("#chartDiv2").bind("plothover", function (event, pos, item) {
-        if (!pos.x || !pos.y) { return; }
-        if (item) {
-          let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
-          let y = item.datapoint[1].toFixed(2);
-          $("#tooltip").html(x + " = " + y).css({ top: item.pageY + 5, left: item.pageX + 5 }).fadeIn(200);
-        } else {
-          $("#tooltip").hide();
-        }
-      });
-      
-    }
-
-    $(document).ready(function () { drawChart(); });
-  </script>
-</body>
-</html>
diff --git a/Websites/SharePrices/SharePrices/HighchartsTest.aspx b/Websites/SharePrices/SharePrices/HighchartsTest.aspx
index 5e38784..5d9a0c3 100644
--- a/Websites/SharePrices/SharePrices/HighchartsTest.aspx
+++ b/Websites/SharePrices/SharePrices/HighchartsTest.aspx
@@ -5,7 +5,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title></title>
-  <script src="scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
+  <script src="scripts/jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
   <script src="scripts/highcharts_9.3.1/highcharts.js" type="text/javascript"></script>
 </head>
 <body>
diff --git a/Websites/SharePrices/SharePrices/SharePrices.aspx b/Websites/SharePrices/SharePrices/SharePrices.aspx
index 3189cc8..1ed237a 100644
--- a/Websites/SharePrices/SharePrices/SharePrices.aspx
+++ b/Websites/SharePrices/SharePrices/SharePrices.aspx
@@ -9,21 +9,21 @@
     <link rel="stylesheet" href="SharePricesStyles.css" type="text/css" />
     <link rel="stylesheet" href="SharePricesModal.css" type="text/css" />
     <link rel="stylesheet" href="jquery-ui.css" type="text/css" />
-    <script src="scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
-    <script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.axislabels.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.downsample.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.crosshair.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.selection.min.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.time.min.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.tooltip.js" type="text/javascript"></script>
-    <script src="scripts/jquery.flot.pie.js" type="text/javascript"></script>
+    <script src="scripts/jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
+    <script src="scripts/jquery/jquery-ui.min.js" type="text/javascript"></script>
+    <script src="scripts/flot/jquery.flot.js" type="text/javascript"></script>
+    <script src="scripts/flot/jquery.flot.axislabels.js" type="text/javascript"></script>
+    <script src="scripts/flot/jquery.flot.downsample.js" type="text/javascript"></script>
+    <script src="scripts/flot/jquery.flot.crosshair.js" type="text/javascript"></script>
+    <script src="scripts/flot/jquery.flot.selection.min.js" type="text/javascript"></script>
+    <script src="scripts/flot/jquery.flot.time.min.js" type="text/javascript"></script>
+    <script src="scripts/flot/jquery.flot.tooltip.js" type="text/javascript"></script>
+    <script src="scripts/flot/jquery.flot.pie.js" type="text/javascript"></script>
     <script src="scripts/js.cookie-2.2.1.min.js" type="text/javascript"></script>
     <script src="scripts/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
     <script src="scripts/tablesorter/jquery.tablesorter.widgets.js" type="text/javascript"></script>
-    <script src="scripts/jquery.marquee.min.js" type="text/javascript"></script>
-    <script src="scripts/SharePrices.js" type="text/javascript"></script>
+    <script src="scripts/jquery/jquery.marquee.min.js" type="text/javascript"></script>
+    <script src="scripts/SharePrices.js" type="module"></script>
     <script src="scripts/FlotGaps.js" type="text/javascript"></script>
 
     <!--<script src="scripts/highcharts_9.3.1/highcharts.js" type="text/javascript"></script>!--
@@ -41,7 +41,7 @@
           <a id="navCurrentHoldings" onclick="showTab(this);" data-div="holdingsDiv">Holdings</a>
           <a id="navAccounts" onclick="showTab(this);" data-div="accountsDiv">Accounts</a>
           <a id="navAnal" onclick="showTab(this);" data-div="analDiv">Analysis</a>
-          <a id="navHist" onclick="showTab(this); refreshHistoryChart();" data-div="histDiv">History</a>
+          <a id="navHist" onclick="showTab(this); importedFunctions.refreshHistoryChart();" data-div="histDiv">History</a>
           <a id="navLog" onclick="showTab(this);" data-div="logDiv">Log</a>
         </td>
         <td style="width: 30%; text-align: center;">
@@ -66,7 +66,7 @@
       <div>
         <label for="displayAsPercent">Display as percent</label><input type="checkbox" name="displayAsPercent" id="displayAsPercent" onclick="handleClick(this)"/>
         <label for="excludeNoHoldings">Hide shares with no holdings</label><input type="checkbox" name="excludeNoHoldings" id="excludeNoHoldings" onclick="handleClick(this)"/>
-        <button onclick="showModalDialog_AddInstrument()">Add Instrument</button>
+        <button onclick="importedFunctions.showModalDialog_AddInstrument()">Add Instrument</button>
       </div>
       <div id="chartsDiv">Charts</div>
     </div>
@@ -140,6 +140,57 @@
   </div>
   <div id="chartTooltip" class="chart-tooltip"></div>
   <script>
+    let importedFunctions = {};
+    function showTab(tab) {
+      //$('.navbar>a').removeClass('activenav');
+      $('.navbar').find('.activenav').removeClass('activenav');
+      $('#' + tab.id).addClass('activenav');
+
+      //$('#mainDiv>div').removeClass('activetab').addClass('inactivetab');
+      $('.tabParent.activeTab').removeClass('activeTab');
+      //$('#' + $(tab).attr('data-div')).removeClass('inactivetab').addClass('activetab');
+      $('#' + $(tab).attr('data-div')).parent().addClass('activeTab');
+
+      Cookies.set('activeTab', tab.id, { 'sameSite': 'strict' });
+    }
+    function handleClick(checkbox) {
+      Cookies.set(checkbox.id, checkbox.checked, { 'sameSite': 'strict' });
+
+      switch (checkbox.id) {
+        /*case 'showBreakevenLine':
+          redrawAllSharesCharts();
+          break;*/
+        case 'displayAsPercent':
+          redrawAllSharesCharts();
+          break;
+        case 'excludeNoHoldings':
+          createSharesTable();
+          redrawAllSharesCharts();
+          break;
+        /*case 'showPreviousHoldings':
+          redrawAllSharesCharts();
+          break;*/
+        case 'groupBySymbol':
+          $("#tbMainHoldings").html(''); //Empty the table body to make sure no duplicate rows are created
+          //updateHoldingsTable();
+          tablesUpdateTimings.updateNeeded = true;
+          tablesUpdateTimings.lastUpdate = 0;
+          break;
+        case 'hideEmptyAccounts':
+          break;
+      }
+    }
+  </script>
+  <script type="module">
+    import { getInstruments, refreshHistoryChart, showModalDialog_AddInstrument, showModalDialog_AddHolding, showModalDialog_FullScreenChart, showModalDialog_SoldHolding } from "./scripts/SharePrices.js";
+    importedFunctions = {
+      showModalDialog_AddInstrument: showModalDialog_AddInstrument,
+      showModalDialog_AddHolding: showModalDialog_AddHolding,
+      showModalDialog_FullScreenChart: showModalDialog_FullScreenChart,
+      refreshHistoryChart: refreshHistoryChart,
+      showModalDialog_SoldHolding: showModalDialog_SoldHolding
+    }
+
     function initPage() {
       let c = Cookies.get('activeTab');
       let t = $('#' + c);
@@ -167,45 +218,6 @@
 
       getInstruments();
     }
-    function showTab(tab) {
-      //$('.navbar>a').removeClass('activenav');
-      $('.navbar').find('.activenav').removeClass('activenav');
-      $('#' + tab.id).addClass('activenav');
-
-      //$('#mainDiv>div').removeClass('activetab').addClass('inactivetab');
-      $('.tabParent.activeTab').removeClass('activeTab');
-      //$('#' + $(tab).attr('data-div')).removeClass('inactivetab').addClass('activetab');
-      $('#' + $(tab).attr('data-div')).parent().addClass('activeTab');
-
-      Cookies.set('activeTab', tab.id, {'sameSite': 'strict'});
-    }
-    function handleClick(checkbox) {
-      Cookies.set(checkbox.id, checkbox.checked, {'sameSite': 'strict'});
-      
-      switch (checkbox.id) {
-        /*case 'showBreakevenLine':
-          redrawAllSharesCharts();
-          break;*/
-        case 'displayAsPercent':
-          redrawAllSharesCharts();
-          break;
-        case 'excludeNoHoldings':
-          createSharesTable();
-          redrawAllSharesCharts();
-          break;
-        /*case 'showPreviousHoldings':
-          redrawAllSharesCharts();
-          break;*/
-        case 'groupBySymbol':
-          $("#tbMainHoldings").html(''); //Empty the table body to make sure no duplicate rows are created
-          //updateHoldingsTable();
-          tablesUpdateTimings.updateNeeded = true;
-          tablesUpdateTimings.lastUpdate = 0;
-          break;
-        case 'hideEmptyAccounts':
-          break;
-      }
-    }
     $(document).ready(initPage());
   </script>
 </body>
diff --git a/Websites/SharePrices/SharePrices/SharePrices.vbproj b/Websites/SharePrices/SharePrices/SharePrices.vbproj
index 7e94762..db24aad 100644
--- a/Websites/SharePrices/SharePrices/SharePrices.vbproj
+++ b/Websites/SharePrices/SharePrices/SharePrices.vbproj
@@ -87,7 +87,6 @@
     <Content Include="icons\Breakeven_Off.png" />
     <Content Include="icons\Breakeven.png" />
     <Content Include="icons\favicon.ico" />
-    <Content Include="FlotTest.html" />
     <Content Include="HtmlPage1.html" />
     <Content Include="icons\Bin.png" />
     <Content Include="icons\Cog.png" />
@@ -246,24 +245,26 @@
     <Content Include="scripts\highcharts_9.3.1\modules\wordcloud.src.js" />
     <Content Include="scripts\highcharts_9.3.1\modules\xrange.js" />
     <Content Include="scripts\highcharts_9.3.1\modules\xrange.src.js" />
-    <Content Include="scripts\jquery-3.5.1.min.js" />
-    <Content Include="scripts\jquery-ui.min.js" />
-    <Content Include="scripts\jquery.flot.axislabels.js" />
-    <Content Include="scripts\jquery.flot.crosshair.js" />
-    <Content Include="scripts\jquery.flot.downsample.js" />
-    <Content Include="scripts\jquery.flot.js" />
-    <Content Include="scripts\jquery.flot.pie.js" />
-    <Content Include="scripts\jquery.flot.selection.min.js" />
-    <Content Include="scripts\jquery.flot.time.min.js" />
-    <Content Include="scripts\jquery.flot.tooltip.js" />
-    <Content Include="scripts\jquery.marquee.min.js" />
+    <Content Include="scripts\jquery\jquery-3.5.1.min.js" />
+    <Content Include="scripts\jquery\jquery-ui.min.js" />
+    <Content Include="scripts\flot\jquery.flot.axislabels.js" />
+    <Content Include="scripts\flot\jquery.flot.crosshair.js" />
+    <Content Include="scripts\flot\jquery.flot.downsample.js" />
+    <Content Include="scripts\flot\jquery.flot.js" />
+    <Content Include="scripts\flot\jquery.flot.pie.js" />
+    <Content Include="scripts\flot\jquery.flot.selection.min.js" />
+    <Content Include="scripts\flot\jquery.flot.time.min.js" />
+    <Content Include="scripts\flot\jquery.flot.tooltip.js" />
+    <Content Include="scripts\jquery\jquery.marquee.min.js" />
     <Content Include="scripts\js.cookie-2.2.1.min.js" />
     <Content Include="scripts\SharePrices.js" />
+    <Content Include="scripts\SharePrices_Charts.js" />
     <Content Include="scripts\tablesorter\dragtable.mod.css" />
     <Content Include="scripts\tablesorter\filter.formatter.css" />
     <Content Include="scripts\tablesorter\highlights.css" />
     <Content Include="scripts\tablesorter\jquery.tablesorter.js" />
     <Content Include="scripts\tablesorter\jquery.tablesorter.widgets.js" />
+    <Content Include="scripts\SharePrices_Common.js" />
     <Content Include="scripts\tablesorter\theme.black-ice.css" />
     <Content Include="scripts\tablesorter\theme.blue.css" />
     <Content Include="scripts\tablesorter\theme.bootstrap.css" />
diff --git a/Websites/SharePrices/SharePrices/scripts/SharePrices.js b/Websites/SharePrices/SharePrices/scripts/SharePrices.js
index 8832e19..0a2e63e 100644
--- a/Websites/SharePrices/SharePrices/scripts/SharePrices.js
+++ b/Websites/SharePrices/SharePrices/scripts/SharePrices.js
@@ -1,6 +1,14 @@
 ﻿// @ts-check
+
+import {generateAxisBreaks, getProfitOrLoss, timespans} from "./SharePrices_Common.js";
+import {createLongChart, createMidChart, createShortChart, createSingleDayChart, createChart_Flot, 
+        createChart, createFullScreenChart, createFullScreenChart_Flot, createFullScreenComparisonChart, 
+        createFullScreenComparisonChart_Flot} from "./SharePrices_Charts.js";
+
+
 'use strict';
-var timespans = { oneSecond: 1000, oneMinute: 60 * 1000, oneHour: 60 * 60 * 1000, oneDay: 24 * 60 * 60 * 1000, oneWeek: 7 * 24 * 60 * 60 * 1000, oneMonth: 31 * 24 * 60 * 60 * 1000 };
+
+//var timespans = { oneSecond: 1000, oneMinute: 60 * 1000, oneHour: 60 * 60 * 1000, oneDay: 24 * 60 * 60 * 1000, oneWeek: 7 * 24 * 60 * 60 * 1000, oneMonth: 31 * 24 * 60 * 60 * 1000 };
 var fetchIntervalDaily = 12 * timespans.oneHour;
 var fetchIntervalIntraday = 4 * timespans.oneHour;
 var fetchIntervalSingleDay = 2 * timespans.oneMinute;
@@ -349,13 +357,13 @@ function formatAmount(amount, currency, decimals) {
     return '';
   }
 }
-function getProfitOrLoss(BasePrice, CurrentPrice, ShowPercent) {
+/*function getProfitOrLoss(BasePrice, CurrentPrice, ShowPercent) {
   //let priceMovement = (CurrentPrice - BasePrice).toFixed(2);
   let priceMovement = (CurrentPrice - BasePrice).autoDP();
   let percentMovement = (((CurrentPrice / BasePrice) - 1) * 100).toFixed(1) + '%';
   if (percentMovement[0] == '-') percentMovement = percentMovement.substring(1);
   return '<span class="' + (CurrentPrice < BasePrice ? 'loss' : 'profit') + '">' + (CurrentPrice < BasePrice ? '' : '+') + priceMovement + (ShowPercent ? ' (' + percentMovement + ')' : '') + '</span>';
-}
+}*/
 function createCategoryAggregator() {
   let aggregator = {
     data: [],
@@ -379,30 +387,8 @@ function createCategoryAggregator() {
   };
   return aggregator;
 }
-function generateAxisBreaks(data, maxGapSize, breakSize) {
-  let breaks = [];
-  if (data.length > 1) {
-    let previousX = data[0][0];
 
-    for (let i = 1; i < data.length; i++) {
-      if (data[i][0] != null && data[i][1] != null) {
-        let currentX = data[i][0];
-        if (currentX - previousX > maxGapSize) {
-          let newBreak = {
-            from: previousX,
-            to: currentX,
-            breakSize: breakSize
-          };
-          breaks.push(newBreak);
-        }
-        previousX = currentX;
-      }
-    }
-  }
-  return breaks;
-}
-
-function getInstruments() {
+export function getInstruments() {
   try {
     //logInfo('getInstruments()');
     initialPageTitle = document.title;
@@ -493,7 +479,7 @@ function createSharesTableRow(instrument) {
           totalUnits += h.NoUnits;
           totalPrice += (h.NoUnits * h.PurchasePricePerUnit);
           totalPriceGBP += h.BookCostGBP;
-          t += '<tr><td><span class="deletebutton" onclick="showModalDialog_SoldHolding(' + h.HoldingID + ')">&times;</span>' + h.AccountName + '</td>' +
+          t += '<tr><td><span class="deletebutton" onclick="importedFunctions.showModalDialog_SoldHolding(' + h.HoldingID + ')">&times;</span>' + h.AccountName + '</td>' +
                    '<td>' + new Date(h.PurchaseDate).yyyymmdd() + '</td>' +
                    '<td class="num">' + formatAmount(h.PurchasePricePerUnit, '', 2) + '</td>' +
                    //'<td class="num">' + formatAmount(h.NoUnits, '', 0) + '</td>' +
@@ -544,12 +530,12 @@ function createSharesTableRow(instrument) {
   return '<td><span alt="' + instrument.InstrumentName + '" class="instrumentName">' + instrument.DisplayName + '</span><br>' + //'<td><span class="instrumentName">' + instrument.InstrumentName + '</span><br>' +
            '<a target="_blank" href="https://uk.finance.yahoo.com/quote/' + instrument.Symbol + '">' + instrument.Symbol + '</a>&nbsp;&nbsp;' +
            //'<span class="addHolding" data-symbol="' + instrument.Symbol + '">+</span><div class="spacer"></div>' +
-           '<img src="icons/Plus.png" alt="Add Holding" width="16" height="16" onclick="showModalDialog_AddHolding(' + "'" + instrument.Symbol + "'" + ')" />&nbsp;&nbsp;' +
+           '<img src="icons/Plus.png" alt="Add Holding" width="16" height="16" onclick="importedFunctions.showModalDialog_AddHolding(' + "'" + instrument.Symbol + "'" + ')" />&nbsp;&nbsp;' +
            '<img src="icons/UpArrow.png" alt="Move Instrument Up" width="16" height="16" onclick="moveInstrumentUp(' + "'" + instrument.Symbol + "'" + ')" />&nbsp;' +
            '<img src="icons/DownArrow.png" alt="Move Instrument Up" width="16" height="16" onclick="moveInstrumentDown(' + "'" + instrument.Symbol + "'" + ')" />&nbsp;&nbsp;' +
            '<img src="' + breakevenIcon + '" class="breakeven-button" alt="Show Breakeven Line" width="16" height="16" onclick="toggleBreakevenLine(' + "'" + instrument.Symbol + "'" + ')" />&nbsp;&nbsp;' +
            '<img src="' + previousHoldingsIcon + '" alt="Show Previous Holdings" width="16" height="16" onclick="togglePreviousHoldings(' + "'" + instrument.Symbol + "'" + ')" />&nbsp;&nbsp;' +
-           '<img src="icons/Chart.png" alt="Full Screen Chart" width="16" height="16" onclick="showModalDialog_FullScreenChart(' + "'" + instrument.Symbol + "'" + ')" />' +
+           '<img src="icons/Chart.png" alt="Full Screen Chart" width="16" height="16" onclick="importedFunctions.showModalDialog_FullScreenChart(' + "'" + instrument.Symbol + "'" + ')" />' +
 
            getHoldingsTable(instrument) +
            '<div class="price-summary" id="divCurrentValue' + dispOrder + '">' + getCurrentValueContent(instrument) + '</div>' +
@@ -773,1232 +759,6 @@ function redrawShareRowCharts(instrument) {
   createShortChart(instrument);
   createSingleDayChart(instrument);
 }
-function createLongChart(Instrument) {
-  let rowNo = Instrument.DisplayOrder;
-  let ytdStartDate = new Date(new Date().getFullYear(), 0, 1).getTime();
-
-  // Set start date to 2020-01-01 to include pre-pandemic prices
-  ytdStartDate = new Date("2020-01-01T00:00:00");
-
-  let ytdEndDate = new Date().getTime();
-  //if (Instrument.LongChart) {
-  try { Instrument.LongChart.destroy(); } catch (ex) { }
-  Instrument.LongChart = createChart(Instrument, ytdStartDate, ytdEndDate, 'divLongChart' + rowNo.toString(), 'divLongSummary' + rowNo.toString());
-}
-function createMidChart(Instrument) {
-  let rowNo = Instrument.DisplayOrder;
-  let quarterStartDate = new Date().setHours(0, 0, 0) - (timespans.oneMonth * 3);
-  let quarterEndDate = new Date().getTime();
-  try { Instrument.MidChart.destroy(); } catch (ex) { }
-  Instrument.MidChart = createChart(Instrument, quarterStartDate, quarterEndDate, 'divMidChart' + rowNo.toString(), 'divMidSummary' + rowNo.toString());
-}
-function createShortChart(Instrument) {
-  let rowNo = Instrument.DisplayOrder;
-  let fortnightStartDate = new Date().setHours(0, 0, 0) - (timespans.oneWeek * 2);
-  let fortnightEndDate = new Date().getTime();
-  try { Instrument.ShortChart.destroy(); } catch (ex) { }
-  Instrument.ShortChart = createChart(Instrument, fortnightStartDate, fortnightEndDate, 'divShortChart' + rowNo.toString(), 'divShortSummary' + rowNo.toString());
-}
-function createSingleDayChart(Instrument) {
-  let rowNo = Instrument.DisplayOrder;
-  let dayStartDate = 0;
-  let dayEndDate = 0;
-  let dt = new Date().getTime();
-  dayStartDate = Instrument.SingleDayStartDate;
-  dayEndDate = Instrument.SingleDayEndDate;
-  let previousClose = Instrument.SingleDayPreviousClose;
-
-  try { Instrument.SingleDayChart.destroy(); } catch (ex) { }
-
-  Instrument.SingleDayChart = createChart(Instrument, dayStartDate, dayEndDate, 'divDayChart' + rowNo.toString(), 'divDaySummary' + rowNo.toString(), previousClose);
-  //createChart_Flot(Instrument, dayStartDate, dayEndDate, 'divDayFlotChart' + rowNo.toString(), 'divDaySummary' + rowNo.toString(), previousClose);
-}
-function createChart_Flot(Instrument, startDate, endDate, chartContainerID, summaryContainerID, previousClose) {
-  function getChartDataSubset(Instrument, dateFrom, dateTo) {
-    let result = [];
-    //Single day data can be passed direct
-    if (dateTo - dateFrom <= timespans.oneDay) {
-      result = Instrument.SingleDayData;
-      //return Instrument.SingleDayData;
-    } else {
-      //Anything over one month should only use daily data
-      if (dateTo - dateFrom > (timespans.oneMonth + (timespans.oneDay*4))) {
-        for (let i = 0; i < Instrument.DailyData.length; i++) {
-          let quote = Instrument.DailyData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            result.push(quote);
-          }
-        }
-      } else {
-        //Get all in-date-range intraday data
-        let foundDates = { min: new Date().getTime(), max: 0 }
-        for (let i = 0; i < Instrument.IntradayData.length; i++) {
-          let quote = Instrument.IntradayData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
-            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
-            result.push(quote);
-          }
-        }
-        //Back-fill with daily data if the intraday data doesn't cover the whole date range
-        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
-        if (minFoundDate > dateFrom) {
-          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
-            let quote = Instrument.DailyData[i];
-            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
-              result.unshift(quote);
-            }
-          }
-        }
-      }
-    }
-    return result;
-  }
-  function getBreakevenLine(Instrument, dateFrom, dateTo) {
-    let result = [];
-    let currentPrice = 0;
-    for (let i = 0; i < Instrument.HoldingsHistory.length; i++) {
-      let h = Instrument.HoldingsHistory[i];
-      if (currentPrice > 0) { result.push([h.DT - 1, currentPrice]) };
-      if (h.TotalUnits > 0) {
-        currentPrice = h.TotalCost / h.TotalUnits;
-        result.push([h.DT, (h.TotalCost / h.TotalUnits)]);
-      } else {
-        currentPrice = 0;
-        result.push([h.DT, null]);
-      }
-    }
-    if (currentPrice > 0) {
-      result.push([dateTo, currentPrice]);
-    }
-
-    //Remove all points before the start of the date range
-    let i = result.length - 1;
-    while (i >= 0 && result[i][0] >= startDate) i--;
-    while (i > 0) { result.shift(); i--; }
-    
-    return result;
-  }
-  function transformAndSummariseChartData(cd) {
-    let seriesData = [];
-    //Find the first entry within the date range
-    let x = 0;
-    let summaryData = {
-      StartDT: cd[x].DT,
-      EndDT: cd[cd.length - 1].DT,
-      Open: cd[x].open,
-      High: cd[x].high,
-      HighDT: cd[x].DT,
-      Low: cd[x].low,
-      LowDT: cd[x].DT,
-      Close: cd[cd.length - 1].close
-    };
-    while (x < cd.length && cd[x].DT < startDate) {
-      summaryData.StartDT = cd[x].DT;
-      summaryData.EndDT = cd[cd.length - 1].DT;
-      summaryData.Open = cd[x].open;
-      summaryData.High = cd[x].high;
-      summaryData.HighDT = cd[x].DT;
-      summaryData.Low = cd[x].low;
-      summaryData.LowDT = cd[x].DT;
-      summaryData.Close = cd[cd.length - 1].close;
-      x++;
-    };
-    let basePrice = (!previousClose) ? summaryData.Open : previousClose;
-    for (let i = 0; i < cd.length; i++) {
-      let entry = cd[i];
-      if (summaryData.High < entry.high) {
-        summaryData.High = entry.high;
-        summaryData.HighDT = cd[x].DT;
-      }
-      if (summaryData.Low > entry.low) {
-        summaryData.Low = entry.low;
-        summaryData.LowDT = cd[x].DT;
-      }
-      if (i >= x) {
-        if (priceType == 'percent') {
-          seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
-        } else {
-          seriesData.push([entry.DT, entry.close]);
-        }
-      }
-    }
-    return { summaryData: summaryData, seriesData: seriesData, basePrice: basePrice };
-  }
-  
-  let chartContainer = $("#" + chartContainerID);
-  let priceType = $('#displayAsPercent').prop('checked') ? 'percent' : '';
-  let chartData = [];
-  if (endDate - endDate <= timespans.oneDay) {
-    chartData = getChartDataSubset(Instrument, startDate, endDate);
-  } else {
-    chartData = getChartDataSubset(Instrument, startDate - (timespans.oneDay * 3), endDate);
-  }
-  
-  let seriesData = [];
-  let volumeData = [];
-  if (chartData.length > 1) {
-    //Summarise the data and transform values to percentage if required
-    let summaryData = {
-      StartDT: chartData[0].DT,
-      EndDT: chartData[chartData.length - 1].DT,
-      Open: chartData[0].open,
-      High: chartData[0].high,
-      HighDT: chartData[0].DT,
-      Low: chartData[0].low,
-      LowDT: chartData[0].DT,
-      Close: chartData[chartData.length - 1].close
-    };
-    let basePrice = (!previousClose) ? summaryData.Open : previousClose;
-    for (let i = 0; i < chartData.length; i++) {
-      let entry = chartData[i];
-      if (summaryData.High < entry.high) {
-        summaryData.High = entry.high;
-        summaryData.HighDT = entry.DT;
-      }
-      if (summaryData.Low > entry.low) {
-        summaryData.Low = entry.low;
-        summaryData.LowDT = entry.DT;
-      }
-      if (priceType == 'percent') {
-        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
-      } else {
-        seriesData.push([entry.DT, entry.close]);
-      }
-      volumeData.push([entry.DT, entry.volume]);
-    }
-        
-    //let weekendMarkings = getWeekendMarkings(startDate, endDate);
-    let color = (summaryData.Close > basePrice) ? "#00cc00" : (summaryData.Close < basePrice) ? "red" : "blue";
-    let series = [{ data: volumeData, yaxis: 2, color: "#304e57", bars: { show: true } }];
-
-    //Add the breakeven price line
-    if ((Instrument.ShowBreakevenLine | 0) == 1) {
-      if (priceType == 'percent') {
-        series.unshift({ data: [[startDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100], [endDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100]], color: '#24BCC7', shadowSize: 0, lines: { lineWidth: 1 } });
-      } else {
-        let b = getBreakevenLine(Instrument, startDate, endDate);
-        if (b.length > 0 && b[0][0]<endDate && b[b.length-1][0]>startDate) { //Only add the series if it falls within the chart date range
-          series.push({ data: b, color: 'green', shadowSize: 0, lines: { lineWidth: 1.5 } });
-        }
-      }
-    }
-
-    //Add the previousClose line to the series
-    if (previousClose) {
-      if (priceType == 'percent') {
-        series.unshift({ data: [[startDate, ((previousClose / basePrice) - 1) * 100], [endDate, ((previousClose / basePrice) - 1) * 100]], color: '#3b88ff', shadowSize: 0, lines: { lineWidth: 1 } });
-      } else {
-        series.unshift({ data: [[startDate, previousClose], [endDate, previousClose]], color: '#3b88ff', shadowSize: 0, lines: { lineWidth: 1 } });
-      }
-    }
-
-    //Add the volume bars to the end of the series, so it is plotted behind all other lines
-    series.push({ data: seriesData, color: color, shadowSize: 0, lines: { lineWidth: 1 } });
-    
-    //Dispose of any previous chart to prevent memory leaks (orphaaned DOM nodes)
-    let oldChart = chartContainer.data('plot');
-    if (oldChart) {// If it's destroyed, then data('plot') will be undefined
-      oldChart.destroy();
-    }
-
-    //Draw the chart
-    let chartTimespan = endDate - startDate;
-    let gapMap = [];
-    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
-      gapMap = generateChartGapMap(seriesData, timespans.oneHour);
-    }
-    function volumeAxisFormatter(val, axis) {
-      if (val >= 1000000000)
-        return (val / 1000000000).toFixed(axis.tickDecimals) + "b";
-      else if (val >= 1000000)
-        return (val / 1000000).toFixed(axis.tickDecimals) + "m";
-      else if (val >= 1000)
-        return (val / 1000).toFixed(axis.tickDecimals) + "k";
-      else
-        return val.toFixed(axis.tickDecimals);
-    }
-    var plot;
-    try {
-      plot = $.plot(chartContainer, series, {
-        series: { downsample: { threshold: 100 } },
-        grid: { show: true, hoverable: true, color: 'white', borderColor: '#505050' /*, markings: weekendMarkings*/ },
-        /*crosshair: { mode: 'x', snapX: true, showXValue: false },*/
-        xaxis: {
-          mode: "time",
-          timezone: 'browser',
-          min: chartTimespan > timespans.oneDay ? summaryData.StartDT : startDate,
-          max: chartTimespan > timespans.oneDay ? summaryData.EndDT : endDate,
-          transform: function (v) { return mapChartXValue(v, gapMap); },
-          inverseTransform: function (v) { return unmapChartXValue(v, gapMap); }
-        },
-        yaxes: [{ position: 'left' }, { position: 'right', tickFormatter: volumeAxisFormatter }]
-      });
-    }
-    catch (ex) {
-      logError(ex.message);
-    }
-    
-    //Bind the chart tooltip
-    if (plot) {
-      chartContainer.bind("plothover", function (event, pos, item) {
-        if (!pos.x || !pos.y) { return; }
-        if (item) {
-          let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
-          let y = item.datapoint[1].toFixed(2);
-          let content = x + " = " + y;
-
-          let o = plot.getPlotOffset();
-          let t = o.top;
-          let l = o.left;
-
-          //let tt = $("#" + chartContainerID + " .chart-tooltip");
-          let tt = chartContainer.children(".chart-tooltip");
-          if (tt.length > 0) {
-            tt.html(content).css({ top: t, left: l }).fadeIn(200);
-          } else {
-            tt = "<div class='chart-tooltip' style='top: " + t + "; left: " + l + ";'>" + content + "</div>";
-            chartContainer.append(tt).fadeIn(200);
-          }
-        } else {
-          //$("#" + chartContainerID + " .chart-tooltip").fadeOut(1);
-          chartContainer.children(".chart-tooltip").fadeOut(1);
-        }
-      });
-    }
-
-    //Create the summary table
-    let summaryTable = '<table class="summary">';
-    if ((endDate - startDate) <= timespans.oneDay) {
-      //Add market times and previous close info for Single Dat chart
-      let dt = new Date().getTime();
-      let marketHours = (new Date(Instrument.SingleDayStartDate)).hhmm() + ' - ' + (new Date(Instrument.SingleDayEndDate)).hhmm();
-      summaryTable += '<tr><td>' + ((dt >= Instrument.SingleDayStartDate && dt <= Instrument.SingleDayEndDate) ? '<span style="color:limegreen">Market Open' : '<span style="color:firebrick">Market Closed') + '</span> (' + marketHours + ')</td>';
-      summaryTable += (!previousClose) ? '' : ('<td colspan="2">Prev close: ' + previousClose.toString() + '</td>');
-      summaryTable += '</tr>';
-    }
-    
-    summaryTable += '<tr><td>O: ' + summaryData.Open.autoDP() + ' ' + ((previousClose) ? getProfitOrLoss(previousClose, summaryData.Open, 1) : '') + '</td>';
-    summaryTable += '<td title="' + new Date(summaryData.HighDT).yyyymmddhhmmss() + '">H: ' + summaryData.High.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.High, 1) + '</td><tr>';
-    summaryTable += '<tr><td title="' + new Date(summaryData.LowDT).yyyymmddhhmmss() + '">L: ' + summaryData.Low.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.Low, 1) + '</td>';
-    summaryTable += '<td>C: ' + summaryData.Close.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.Close, 1) + '</tr></td>';
-
-    //Create CurrentPrice for this instrument if it doesn't exist yet
-    Instrument.CurrentPrice = Instrument.CurrentPrice || summaryData.Close;
-    
-    summaryTable += '</table>';
-    $('#' + summaryContainerID).html(summaryTable);
-  } else {
-    //console.warn('Not enough data to plot ' + Instrument.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss() + ' to ' + chartContainerID);
-  }
-}
-function createChart(Instrument, startDate, endDate, chartContainerID, summaryContainerID, previousClose) {
-  function getChartDataSubset(Instrument, dateFrom, dateTo) {
-    let result = [];
-    //Single day data can be passed direct
-    if (dateTo - dateFrom <= timespans.oneDay) {
-      result = Instrument.SingleDayData;
-      //return Instrument.SingleDayData;
-    } else {
-      //Anything over one month should only use daily data
-      if (dateTo - dateFrom > (timespans.oneMonth + (timespans.oneDay * 4))) {
-        for (let i = 0; i < Instrument.DailyData.length; i++) {
-          let quote = Instrument.DailyData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            result.push(quote);
-          }
-        }
-      } else {
-        //Get all in-date-range intraday data
-        let foundDates = { min: new Date().getTime(), max: 0 }
-        for (let i = 0; i < Instrument.IntradayData.length; i++) {
-          let quote = Instrument.IntradayData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
-            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
-            result.push(quote);
-          }
-        }
-        //Back-fill with daily data if the intraday data doesn't cover the whole date range
-        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
-        if (minFoundDate > dateFrom) {
-          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
-            let quote = Instrument.DailyData[i];
-            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
-              result.unshift(quote);
-            }
-          }
-        }
-      }
-    }
-    return result;
-  }
-  function getBreakevenLine(Instrument, dateFrom, dateTo) {
-    let result = [];
-    let currentPrice = 0;
-    for (let i = 0; i < Instrument.HoldingsHistory.length; i++) {
-      let h = Instrument.HoldingsHistory[i];
-      if (currentPrice > 0) { result.push([h.DT - 1, currentPrice]) };
-      if (h.TotalUnits > 0) {
-        currentPrice = h.TotalCost / h.TotalUnits;
-        result.push([h.DT, (h.TotalCost / h.TotalUnits)]);
-      } else {
-        currentPrice = 0;
-        result.push([h.DT, null]);
-      }
-    }
-    if (currentPrice > 0) {
-      result.push([dateTo, currentPrice]);
-    }
-
-    //Remove all points before the start of the date range
-    let i = result.length - 1;
-    while (i >= 0 && result[i][0] >= startDate) i--;
-    while (i > 0) { result.shift(); i--; }
-    
-    return result;
-  }
-  function transformAndSummariseChartData(cd) {
-    let seriesData = [];
-    //Find the first entry within the date range
-    let x = 0;
-    let summaryData = {
-      StartDT: cd[x].DT,
-      EndDT: cd[cd.length - 1].DT,
-      Open: cd[x].open,
-      High: cd[x].high,
-      HighDT: cd[x].DT,
-      Low: cd[x].low,
-      LowDT: cd[x].DT,
-      Close: cd[cd.length - 1].close
-    };
-    while (x < cd.length && cd[x].DT < startDate) {
-      summaryData.StartDT = cd[x].DT;
-      summaryData.EndDT = cd[cd.length - 1].DT;
-      summaryData.Open = cd[x].open;
-      summaryData.High = cd[x].high;
-      summaryData.HighDT = cd[x].DT;
-      summaryData.Low = cd[x].low;
-      summaryData.LowDT = cd[x].DT;
-      summaryData.Close = cd[cd.length - 1].close;
-      x++;
-    };
-    let basePrice = (!previousClose) ? summaryData.Open : previousClose;
-    for (let i = 0; i < cd.length; i++) {
-      let entry = cd[i];
-      if (summaryData.High < entry.high) {
-        summaryData.High = entry.high;
-        summaryData.HighDT = cd[x].DT;
-      }
-      if (summaryData.Low > entry.low) {
-        summaryData.Low = entry.low;
-        summaryData.LowDT = cd[x].DT;
-      }
-      if (i >= x) {
-        if (priceType == 'percent') {
-          seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
-        } else {
-          seriesData.push([entry.DT, entry.close]);
-        }
-      }
-    }
-    return { summaryData: summaryData, seriesData: seriesData, basePrice: basePrice };
-  }
-
-  let chartContainer = $('#' + chartContainerID);
-  if (chartContainer.length > 0) {
-    let chart = {};
-    let priceType = $('#displayAsPercent').prop('checked') ? 'percent' : '';
-
-    let chartData = [];
-    if (endDate - endDate <= timespans.oneDay) {
-      chartData = getChartDataSubset(Instrument, startDate, endDate);
-    } else {
-      chartData = getChartDataSubset(Instrument, startDate - (timespans.oneDay * 3), endDate);
-    }
-
-    let seriesData = [];
-    let volumeData = [];
-    if (chartData && chartData.length > 1) {
-      
-      //Summarise the data and transform values to percentage if required
-      let summaryData = {
-        StartDT: chartData[0].DT,
-        EndDT: chartData[chartData.length - 1].DT,
-        Open: chartData[0].open,
-        High: chartData[0].high,
-        HighDT: chartData[0].DT,
-        Low: chartData[0].low,
-        LowDT: chartData[0].DT,
-        Close: chartData[chartData.length - 1].close
-      };
-      let basePrice = (!previousClose) ? summaryData.Open : previousClose;
-      for (let i = 0; i < chartData.length; i++) {
-        let entry = chartData[i];
-        if (summaryData.High < entry.high) {
-          summaryData.High = entry.high;
-          summaryData.HighDT = entry.DT;
-        }
-        if (summaryData.Low > entry.low) {
-          summaryData.Low = entry.low;
-          summaryData.LowDT = entry.DT;
-        }
-        if (priceType == 'percent') {
-          seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
-        } else {
-          seriesData.push([entry.DT, entry.close]);
-        }
-        volumeData.push([entry.DT, entry.volume]);
-      }
-
-      let series = [{ name: 'Volume', type: 'column', yAxis: 1, color: "#304e57", borderColor: "#304e57", data: volumeData }];
-
-      //Add the breakeven price line
-      if ((Instrument.ShowBreakevenLine | 0) == 1) {
-        if (priceType == 'percent') {
-          series.unshift({ name: 'Breakeven', type: 'line', color: '#24BCC7', lineWidth: 1, marker: { enabled: false }, data: [[startDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100], [endDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100]] /* shadowSize: 0 */ });
-        } else {
-          let b = getBreakevenLine(Instrument, startDate, endDate);
-          if (b.length > 0 && b[0][0] < endDate && b[b.length - 1][0] > startDate) { //Only add the series if it falls within the chart date range
-            series.push({ name: 'Breakeven', type: 'line', yAxis: 0, color: 'green', lineWidth: 1, marker: { enabled: false }, data: b /* shadowSize: 0 */ });
-          }
-        }
-      }
-
-      //Add the previousClose line to the series
-      if (previousClose) {
-        if (priceType == 'percent') {
-          series.unshift({ name: 'Previous Close', type: 'line', yAxis: 0, color: '#3b88ff', lineWidth: 1, marker: { enabled: false }, data: [[startDate, ((previousClose / basePrice) - 1) * 100], [endDate, ((previousClose / basePrice) - 1) * 100]] /* shadowSize: 0 */ });
-        } else {
-          series.unshift({ name: 'Previous Close', type: 'line', yAxis: 0, color: '#3b88ff', lineWidth: 1, marker: { enabled: false }, data: [[startDate, previousClose], [endDate, previousClose]] /* shadowSize: 0 */ });
-        }
-      }
-
-      //Add the price data to the end of the series, so it is plotted above all other lines
-      let color = (summaryData.Close > basePrice) ? "#00cc00" : (summaryData.Close < basePrice) ? "red" : "blue";
-      series.push({ name: 'Price', type: 'line', color: color, lineWidth: 1, data: seriesData /* shadowSize: 0 */ });
-
-      //Draw the chart
-      let chartTimespan = endDate - startDate;
-      let xAxisBreaks = [];
-      if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
-        xAxisBreaks = generateAxisBreaks(seriesData, timespans.oneHour, timespans.oneHour);
-      }
-      
-      try {
-        chart = Highcharts.chart(chartContainerID, {
-          series: series,
-          chart: {
-            backgroundColor: 'rgba(0,0,0,0)',
-            spacingTop: 5,
-            spacingBottom: 0,
-            spacingLeft: 2,
-            spacingRight: 0
-          },
-          title: { text: undefined },
-          legend: { enabled: false },
-          xAxis: [{
-            type: 'datetime',
-            lineColor: '#505050',
-            tickColor: '#505050',
-            tickPixelInterval: 60,
-            min: chartTimespan > timespans.oneDay ? summaryData.StartDT : startDate,
-            max: chartTimespan > timespans.oneDay ? summaryData.EndDT : endDate,
-            breaks: xAxisBreaks,
-            labels: { style: { color: '#b0b0b0', fontSize: 'x-small' } }
-          }],
-          yAxis: [{
-            title: { text: undefined },
-            gridLineColor: '#505050',
-            tickPixelInterval: 30,
-            endOnTick: false,
-            tickLength: 20,
-            labels: { style: { color: '#b0b0b0', fontSize: 'x-small' } }
-          },
-          {
-            title: { text: undefined },
-            /*gridLineColor: '#505050',*/
-            gridLineWidth: 0,
-            tickPixelInterval: 30,
-            endOnTick: false,
-            opposite: true,
-            labels: { style: { color: '#b0b0b0', fontSize: 'x-small' } }
-          }],
-          credits: { enabled: false }
-        });
-      }
-      catch (ex) {
-        logError(ex.message);
-      }
-
-      //Create the summary table
-      let summaryTable = '<table class="summary">';
-      if ((endDate - startDate) <= timespans.oneDay) {
-        //Add market times and previous close info for Single Day chart
-        let dt = new Date().getTime();
-        let marketHours = (new Date(Instrument.SingleDayStartDate)).hhmm() + ' - ' + (new Date(Instrument.SingleDayEndDate)).hhmm();
-        summaryTable += '<tr><td>' + ((dt >= Instrument.SingleDayStartDate && dt <= Instrument.SingleDayEndDate) ? '<span style="color:limegreen">Market Open' : '<span style="color:firebrick">Market Closed') + '</span> (' + marketHours + ')</td>';
-        summaryTable += (!previousClose) ? '' : ('<td colspan="2">Prev close: ' + previousClose.toString() + '</td>');
-        summaryTable += '</tr>';
-      }
-
-      summaryTable += '<tr><td>O: ' + summaryData.Open.autoDP() + ' ' + ((previousClose) ? getProfitOrLoss(previousClose, summaryData.Open, 1) : '') + '</td>';
-      summaryTable += '<td title="' + new Date(summaryData.HighDT).yyyymmddhhmmss() + '">H: ' + summaryData.High.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.High, 1) + '</td><tr>';
-      summaryTable += '<tr><td title="' + new Date(summaryData.LowDT).yyyymmddhhmmss() + '">L: ' + summaryData.Low.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.Low, 1) + '</td>';
-      summaryTable += '<td>C: ' + summaryData.Close.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.Close, 1) + '</tr></td>';
-
-      //Create CurrentPrice for this instrument if it doesn't exist yet
-      Instrument.CurrentPrice = Instrument.CurrentPrice || summaryData.Close;
-
-      summaryTable += '</table>';
-      $('#' + summaryContainerID).html(summaryTable);
-    } else {
-      //console.warn('Not enough data to plot ' + Instrument.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss() + ' to ' + chartContainerID);
-    }
-
-    return chart;
-  }
-}
-function createFullScreenChart(Instrument, startDate, endDate) {
-  function getChartDataSubset(Instrument, dateFrom, dateTo) {
-    let result = [];
-    //Single day data can be passed direct
-    if (dateTo - dateFrom <= timespans.oneDay) {
-      result = Instrument.SingleDayData;
-    } else {
-      //Get all in-date-range intraday data
-      let foundDates = { min: new Date().getTime(), max: 0 }
-      for (let i = 0; i < Instrument.IntradayData.length; i++) {
-        let quote = Instrument.IntradayData[i];
-        if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-          if (quote.DT > foundDates.max) foundDates.max = quote.DT;
-          if (quote.DT < foundDates.min) foundDates.min = quote.DT;
-          result.push(quote);
-        }
-      }
-      //Back-fill with daily data if the intraday data doesn't cover the whole date range
-      let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
-
-      if (minFoundDate > dateFrom) {
-        for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
-          let quote = Instrument.DailyData[i];
-          if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
-            result.unshift(quote);
-          }
-        }
-      }
-    }
-
-    return result;
-  }
-  function getBreakevenLine(Instrument, dateFrom, dateTo) {
-    let result = [];
-    let currentPrice = 0;
-    for (let i = 0; i < Instrument.HoldingsHistory.length; i++) {
-      let h = Instrument.HoldingsHistory[i];
-      if (currentPrice > 0) { result.push([h.DT - 1, currentPrice]) };
-      if (h.TotalUnits > 0) {
-        currentPrice = h.TotalCost / h.TotalUnits;
-        result.push([h.DT, (h.TotalCost / h.TotalUnits)]);
-      } else {
-        currentPrice = 0;
-        result.push([h.DT, null]);
-      }
-    }
-    if (currentPrice > 0) {
-      result.push([dateTo, currentPrice]);
-    }
-
-    return result;
-  }
-
-  let chartContainerID = 'divFullScreenChart';
-  
-  let priceType = $('#displayAsPercent').prop('checked') ? 'percent' : '';
-  let chartData = getChartDataSubset(Instrument, startDate, endDate);
-  let seriesData = [];
-  let volumeData = [];
-
-  if (chartData.length > 1) {
-    //Summarise the data and transform values to percentage if required
-    let summaryData = {
-      StartDT: chartData[0].DT,
-      EndDT: chartData[chartData.length - 1].DT,
-      Open: chartData[0].open,
-      High: chartData[0].high,
-      HighDT: chartData[0].DT,
-      Low: chartData[0].low,
-      LowDT: chartData[0].DT,
-      Close: chartData[chartData.length - 1].close
-    };
-    let basePrice = summaryData.Open;
-    for (let i = 0; i < chartData.length; i++) {
-      let entry = chartData[i];
-      if (summaryData.High < entry.high) {
-        summaryData.High = entry.high;
-        summaryData.HighDT = entry.DT;
-      }
-      if (summaryData.Low > entry.low) {
-        summaryData.Low = entry.low;
-        summaryData.LowDT = entry.DT;
-      }
-      if (priceType == 'percent') {
-        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
-      } else {
-        seriesData.push([entry.DT, entry.close]);
-      }
-      volumeData.push([entry.DT, entry.volume]);
-    }
-
-    let color = (summaryData.Close > basePrice) ? "#00cc00" : (summaryData.Close < basePrice) ? "red" : "blue";
-    let series = [{ name: 'Volume', type: 'column', yAxis: 1, color: "#304e57", borderColor: "#304e57", data: volumeData }];
-
-    //Add the breakeven price line
-    if (priceType == 'percent') {
-      series.unshift({ name: 'Breakeven', type: 'line', yAxis: 0, color: '#24BCC7', lineWidth: 1, data: [[startDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100], [endDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100]] });
-    } else {
-      let b = getBreakevenLine(Instrument, startDate, endDate);
-      if (b.length > 0 && b[0][0] < endDate && b[b.length - 1][0] > startDate) { //Only add the series if it falls within the chart date range
-        series.push({ name: 'Breakeven', type: 'line', yAxis: 0, color: 'green', lineWidth: 1, data: b });
-      }
-    }
-    
-    //Add the price data to the end of the series, so it is plotted over all other lines
-    series.push({ name: 'Price', type: 'line', yAxis: 0, color: color, lineWidth: 1, data: seriesData });
-
-    //Draw the chart
-    let chartTimespan = endDate - startDate;
-    let xAxisBreaks = [];
-    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
-      xAxisBreaks = generateAxisBreaks(series[0].data, timespans.oneHour, timespans.oneHour);
-    }
-    
-    let chart = Highcharts.chart(chartContainerID, {
-      series: series,
-      chart: {
-        backgroundColor: 'rgba(0,0,0,0)',
-        zoomType: 'x'
-      },
-      title: { text: undefined },
-      legend: {
-        itemStyle: { color: '#b0b0b0' }
-      },
-      xAxis: [{
-        type: 'datetime',
-        lineColor: '#505050',
-        tickColor: '#505050',
-        //tickPixelInterval: 60,
-        min: chartTimespan > timespans.oneDay ? summaryData.StartDT : startDate,
-        max: chartTimespan > timespans.oneDay ? summaryData.EndDT : endDate,
-        breaks: xAxisBreaks,
-        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small' */} }
-      }],
-      yAxis: [{
-        title: {
-          text: 'Price (' + Instrument.Currency + ')',
-          style: { color: '#b0b0b0' }
-        },
-        gridLineColor: '#505050',
-        //endOnTick: false,
-        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small'*/ } }
-      },
-      {
-        title: {
-          text: 'Volume',
-          style: { color: '#b0b0b0' }
-        },
-        /*gridLineColor: '#505050',*/
-        gridLineWidth: 0,
-        endOnTick: false,
-        opposite: true,
-        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small'*/ } }
-      }],
-      credits: { enabled: false }
-    });
-  } else {
-    //console.warn('Not enough data to plot ' + Instrument.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss() + ' to ' + chartContainerID);
-  }
-}
-function createFullScreenChart_Flot(Instrument, startDate, endDate) {
-  function getChartDataSubset(Instrument, dateFrom, dateTo) {
-    let result = [];
-    //Single day data can be passed direct
-    if (dateTo - dateFrom <= timespans.oneDay) {
-      result = Instrument.SingleDayData;
-    } else {
-      //Anything over 3 months should only use daily data
-      if (dateTo - dateFrom > ((3 * timespans.oneMonth) + (timespans.oneDay * 4))) {
-        for (let i = 0; i < Instrument.DailyData.length; i++) {
-          let quote = Instrument.DailyData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            result.push(quote);
-          }
-        }
-      } else {
-        //Get all in-date-range intraday data
-        let foundDates = { min: new Date().getTime(), max: 0 }
-        for (let i = 0; i < Instrument.IntradayData.length; i++) {
-          let quote = Instrument.IntradayData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
-            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
-            result.push(quote);
-          }
-        }
-        //Back-fill with daily data if the intraday data doesn't cover the whole date range
-        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
-        if (minFoundDate > dateFrom) {
-          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
-            let quote = Instrument.DailyData[i];
-            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
-              result.unshift(quote);
-            }
-          }
-        }
-      }
-    }
-
-    return result;
-  }
-  function getBreakevenLine(Instrument, dateFrom, dateTo) {
-    let result = [];
-    let currentPrice = 0;
-    for (let i = 0; i < Instrument.HoldingsHistory.length; i++) {
-      let h = Instrument.HoldingsHistory[i];
-      if (currentPrice > 0) { result.push([h.DT - 1, currentPrice]) };
-      if (h.TotalUnits > 0) {
-        currentPrice = h.TotalCost / h.TotalUnits;
-        result.push([h.DT, (h.TotalCost / h.TotalUnits)]);
-      } else {
-        currentPrice = 0;
-        result.push([h.DT, null]);
-      }
-    }
-    if (currentPrice > 0) {
-      result.push([dateTo, currentPrice]);
-    }
-
-    return result;
-  }
-
-  let chartContainerID = 'divFullScreenChart';
-  let chartContainer = $("#" + chartContainerID);
-
-  let priceType = $('#displayAsPercent').prop('checked') ? 'percent' : '';
-  let chartData = getChartDataSubset(Instrument, startDate, endDate);
-  let seriesData = [];
-  let volumeData = [];
-
-  if (chartData.length > 1) {
-    //Summarise the data and transform values to percentage if required
-    let summaryData = {
-      StartDT: chartData[0].DT,
-      EndDT: chartData[chartData.length - 1].DT,
-      Open: chartData[0].open,
-      High: chartData[0].high,
-      HighDT: chartData[0].DT,
-      Low: chartData[0].low,
-      LowDT: chartData[0].DT,
-      Close: chartData[chartData.length - 1].close
-    };
-    let basePrice = summaryData.Open;
-    for (let i = 0; i < chartData.length; i++) {
-      let entry = chartData[i];
-      if (summaryData.High < entry.high) {
-        summaryData.High = entry.high;
-        summaryData.HighDT = entry.DT;
-      }
-      if (summaryData.Low > entry.low) {
-        summaryData.Low = entry.low;
-        summaryData.LowDT = entry.DT;
-      }
-      if (priceType == 'percent') {
-        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
-      } else {
-        seriesData.push([entry.DT, entry.close]);
-      }
-      volumeData.push([entry.DT, entry.volume]);
-    }
-
-    //let weekendMarkings = getWeekendMarkings(startDate, endDate);
-    let color = (summaryData.Close > basePrice) ? "#00cc00" : (summaryData.Close < basePrice) ? "red" : "blue";
-    let series = [{ data: volumeData, yaxis: 2, color: "#304e57", bars: { show: true } }];
-
-    //Add the breakeven price line
-    //if ($('#showBreakevenLine').prop('checked')) {
-    if (priceType == 'percent') {
-      series.unshift({ data: [[startDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100], [endDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100]], color: '#24BCC7', shadowSize: 0, lines: { lineWidth: 1 } });
-    } else {
-      let b = getBreakevenLine(Instrument, startDate, endDate);
-      if (b.length > 0 && b[0][0] < endDate && b[b.length - 1][0] > startDate) { //Only add the series if it falls within the chart date range
-        series.push({ data: b, color: 'green', shadowSize: 0, lines: { lineWidth: 1.5 } });
-      }
-    }
-    //}
-
-    //Add the price data to the end of the series, so it is plotted over all other lines
-    series.push({ data: seriesData, color: color, shadowSize: 0, lines: { lineWidth: 1 } });
-
-    //Draw the chart
-    let chartTimespan = endDate - startDate;
-    let gapMap = [];
-    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
-      gapMap = generateChartGapMap(series[0].data, timespans.oneHour);
-    }
-    function volumeAxisFormatter(val, axis) {
-      if (val >= 1000000000)
-        return (val / 1000000000).toFixed(axis.tickDecimals) + "b";
-      else if (val >= 1000000)
-        return (val / 1000000).toFixed(axis.tickDecimals) + "m";
-      else if (val >= 1000)
-        return (val / 1000).toFixed(axis.tickDecimals) + "k";
-      else
-        return val.toFixed(axis.tickDecimals);
-    }
-    let plot = $.plot(chartContainer, series, {
-      grid: { show: true, hoverable: true, clickable: true, color: 'white', borderColor: '#505050' },
-      selection: { mode: "x" },
-      xaxis: {
-        mode: "time",
-        timezone: 'browser',
-        min: chartTimespan > timespans.oneDay ? summaryData.StartDT : startDate,
-        max: chartTimespan > timespans.oneDay ? summaryData.EndDT : endDate,
-        transform: function (v) { return mapChartXValue(v, gapMap); },
-        inverseTransform: function (v) { return unmapChartXValue(v, gapMap); }
-      },
-      yaxes: [{ axisLabel: 'Price (' + Instrument.Currency + ')', position: 'left' }, { axisLabel: 'Volume', position: 'right', tickFormatter: volumeAxisFormatter }]
-    });
-
-    //Unbind the container from any previously bound events
-    chartContainer.unbind();
-
-    //Bind the plotselected event to allow zooming
-    chartContainer.bind("plotselected", function (event, ranges) { createFullScreenChart(Instrument, Math.floor(ranges.xaxis.from), Math.ceil(ranges.xaxis.to)); });
-    //Reset zoom level on right-click
-    chartContainer.bind("contextmenu", function () { createFullScreenComparison(Instrument1, 0, new Date().getTime()); return false; });
-
-    //Bind the chart tooltip
-    chartContainer.bind("plothover", function (event, pos, item) {
-      if (!pos.x || !pos.y) { return; }
-      if (item) {
-        let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
-        let y = item.datapoint[1].toFixed(2);
-        let content = x + " = " + y;
-
-        let o = plot.getPlotOffset();
-        let t = o.top;
-        let l = o.left;
-
-        //let tt = $("#" + chartContainerID + " .chart-tooltip");
-        let tt = chartContainer.children(".chart-tooltip");
-        if (tt.length > 0) {
-          tt.html(content).css({ top: t, left: l }).fadeIn(200);
-        } else {
-          tt = "<div class='chart-tooltip' style='top: " + t + "; left: " + l + ";'>" + content + "</div>";
-          chartContainer.append(tt).fadeIn(200);
-        }
-      } else {
-        //$("#" + chartContainerID + " .chart-tooltip").fadeOut(1);
-        chartContainer.children(".chart-tooltip").fadeOut(1);
-      }
-    });
-    chartContainer.bind("mouseout", function (event, pos, item) {
-      //$("#chartTooltip").fadeOut(1);
-      chartContainer.children(".chart-tooltip").fadeOut(1);
-    });
-  } else {
-    //console.warn('Not enough data to plot ' + Instrument.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss() + ' to ' + chartContainerID);
-  }
-}
-function createFullScreenComparisonChart(Instrument1, Instrument2, startDate, endDate) {
-  function getChartDataSubset(Instrument, dateFrom, dateTo) {
-    let result = [];
-    //Single day data can be passed direct
-    if (dateTo - dateFrom <= timespans.oneDay) {
-      result = Instrument.SingleDayData;
-    } else {
-      //Anything over 3 months should only use daily data
-      if (dateTo - dateFrom > ((3 * timespans.oneMonth) + (timespans.oneDay * 4))) {
-        for (let i = 0; i < Instrument.DailyData.length; i++) {
-          let quote = Instrument.DailyData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            result.push(quote);
-          }
-        }
-      } else {
-        //Get all in-date-range intraday data
-        let foundDates = { min: new Date().getTime(), max: 0 }
-        for (let i = 0; i < Instrument.IntradayData.length; i++) {
-          let quote = Instrument.IntradayData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
-            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
-            result.push(quote);
-          }
-        }
-        //Back-fill with daily data if the intraday data doesn't cover the whole date range
-        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
-        if (minFoundDate > dateFrom) {
-          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
-            let quote = Instrument.DailyData[i];
-            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
-              result.unshift(quote);
-            }
-          }
-        }
-      }
-    }
-
-    return result;
-  }
-  function transformAndSummariseData(chartData, priceType) {
-    let seriesData = [];
-
-    //Summarise the data and transform values to percentage if required
-    let summaryData = {
-      StartDT: chartData[0].DT,
-      EndDT: chartData[chartData.length - 1].DT,
-      Open: chartData[0].open,
-      High: chartData[0].high,
-      HighDT: chartData[0].DT,
-      Low: chartData[0].low,
-      LowDT: chartData[0].DT,
-      Close: chartData[chartData.length - 1].close
-    };
-    let basePrice = summaryData.Open;
-    for (let i = 0; i < chartData.length; i++) {
-      let entry = chartData[i];
-      if (summaryData.High < entry.high) {
-        summaryData.High = entry.high;
-        summaryData.HighDT = entry.DT;
-      }
-      if (summaryData.Low > entry.low) {
-        summaryData.Low = entry.low;
-        summaryData.LowDT = entry.DT;
-      }
-      if (priceType == 'percent') {
-        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
-      } else {
-        seriesData.push([entry.DT, entry.close]);
-      }
-    }
-    return { summaryData: summaryData, seriesData: seriesData };
-  }
-  
-  let chartContainerID = 'divFullScreenChart';
-
-  let instrument1Data = getChartDataSubset(Instrument1, startDate, endDate);
-  let instrument2Data = getChartDataSubset(Instrument2, startDate, endDate);
-  
-  if (instrument1Data.length > 1 && instrument2Data.length > 1) {
-    let sd = transformAndSummariseData(instrument1Data, 'percent');
-    let price1Data = sd.seriesData;
-    let price1Summary = sd.summaryData;
-    sd = transformAndSummariseData(instrument2Data, 'percent');
-    let price2Data = sd.seriesData;
-    let price2Summary = sd.summaryData;
-
-    let series = [{ name: Instrument1.InstrumentName + '(' + Instrument1.Symbol + ')', type: 'line', color: 'blue', lineWidth: 1, data: price1Data },
-                  { name: Instrument2.InstrumentName + '(' + Instrument2.Symbol + ')', type: 'line', color: 'yellow', lineWidth: 1, data: price2Data }];
-
-    //Draw the chart
-    let chartTimespan = endDate - startDate;
-    let xAxisBreaks = [];
-    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
-      xAxisBreaks = generateAxisBreaks(series[0].data, timespans.oneHour, timespans.oneHour);
-    }
-
-    let chart = Highcharts.chart(chartContainerID, {
-      series: series,
-      chart: {
-        backgroundColor: 'rgba(0,0,0,0)',
-        zoomType: 'x'
-      },
-      title: { text: undefined },
-      legend: {
-        itemStyle: { color: '#b0b0b0' }
-      },
-      xAxis: [{
-        type: 'datetime',
-        lineColor: '#505050',
-        tickColor: '#505050',
-        min: chartTimespan > timespans.oneDay ? price1Summary.StartDT : startDate,
-        max: chartTimespan > timespans.oneDay ? price1Summary.EndDT : endDate,
-        breaks: xAxisBreaks,
-        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small' */ } }
-      }],
-      yAxis: [{
-        title: {
-          text: 'Price Delta (%)',
-          style: { color: '#b0b0b0' }
-        },
-        gridLineColor: '#505050',
-        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small'*/ } }
-      }],
-      credits: { enabled: false }
-    });
-
-  } else {
-    chartContainer.html('Not enough data to plot ' + Instrument1.Symbol + ' vs ' + Instrument2.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss());
-  }
-}
-function createFullScreenComparisonChart_Flot(Instrument1, Instrument2, startDate, endDate) {
-  function getChartDataSubset(Instrument, dateFrom, dateTo) {
-    let result = [];
-    //Single day data can be passed direct
-    if (dateTo - dateFrom <= timespans.oneDay) {
-      result = Instrument.SingleDayData;
-    } else {
-      //Anything over 3 months should only use daily data
-      if (dateTo - dateFrom > ((3 * timespans.oneMonth) + (timespans.oneDay * 4))) {
-        for (let i = 0; i < Instrument.DailyData.length; i++) {
-          let quote = Instrument.DailyData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            result.push(quote);
-          }
-        }
-      } else {
-        //Get all in-date-range intraday data
-        let foundDates = { min: new Date().getTime(), max: 0 }
-        for (let i = 0; i < Instrument.IntradayData.length; i++) {
-          let quote = Instrument.IntradayData[i];
-          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
-            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
-            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
-            result.push(quote);
-          }
-        }
-        //Back-fill with daily data if the intraday data doesn't cover the whole date range
-        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
-        if (minFoundDate > dateFrom) {
-          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
-            let quote = Instrument.DailyData[i];
-            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
-              result.unshift(quote);
-            }
-          }
-        }
-      }
-    }
-
-    return result;
-  }
-  function transformAndSummariseData(chartData, priceType) {
-    let seriesData = [];
-
-    //Summarise the data and transform values to percentage if required
-    let summaryData = {
-      StartDT: chartData[0].DT,
-      EndDT: chartData[chartData.length - 1].DT,
-      Open: chartData[0].open,
-      High: chartData[0].high,
-      HighDT: chartData[0].DT,
-      Low: chartData[0].low,
-      LowDT: chartData[0].DT,
-      Close: chartData[chartData.length - 1].close
-    };
-    let basePrice = summaryData.Open;
-    for (let i = 0; i < chartData.length; i++) {
-      let entry = chartData[i];
-      if (summaryData.High < entry.high) {
-        summaryData.High = entry.high;
-        summaryData.HighDT = entry.DT;
-      }
-      if (summaryData.Low > entry.low) {
-        summaryData.Low = entry.low;
-        summaryData.LowDT = entry.DT;
-      }
-      if (priceType == 'percent') {
-        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
-      } else {
-        seriesData.push([entry.DT, entry.close]);
-      }
-    }
-    return { summaryData: summaryData, seriesData: seriesData };
-  }
-
-  let chartContainerID = 'divFullScreenChart';
-  let chartContainer = $("#" + chartContainerID);
-
-  let priceType = 'percent';
-  let instrument1Data = getChartDataSubset(Instrument1, startDate, endDate);
-  let instrument2Data = getChartDataSubset(Instrument2, startDate, endDate);
-
-  if (instrument1Data.length > 1 && instrument2Data.length > 1) {
-    let sd = transformAndSummariseData(instrument1Data, priceType);
-    let price1Data = sd.seriesData;
-    let price1Summary = sd.summaryData;
-    sd = transformAndSummariseData(instrument2Data, priceType);
-    let price2Data = sd.seriesData;
-    let price2Summary = sd.summaryData;
-
-    let series = [{ label: Instrument1.InstrumentName + '(' + Instrument1.Symbol + ')', data: price1Data, color: 'blue', /*yaxis: 1,*/ shadowSize: 0, lines: { lineWidth: 1 } },
-                  { label: Instrument2.InstrumentName + '(' + Instrument2.Symbol + ')', data: price2Data, color: 'yellow', /*yaxis: 2,*/ shadowSize: 0, lines: { lineWidth: 1 } }];
-
-    //Draw the chart
-    let chartTimespan = endDate - startDate;
-    let gapMap = [];
-    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
-      gapMap = generateChartGapMap(series[0].data, timespans.oneHour);
-    }
-    let plot = $.plot(chartContainer, series, {
-      grid: { show: true, hoverable: true, clickable: true, color: 'white', borderColor: '#505050' },
-      selection: { mode: "x" },
-      legend: { show: true, position: "nw", backgroundColor: 'transparent', backgroundOpacity: 0.3 },
-      xaxis: {
-        mode: "time",
-        timezone: 'browser',
-        min: chartTimespan > timespans.oneDay ? price1Summary.StartDT : startDate,
-        max: chartTimespan > timespans.oneDay ? price1Summary.EndDT : endDate,
-        transform: function (v) { return mapChartXValue(v, gapMap); },
-        inverseTransform: function (v) { return unmapChartXValue(v, gapMap); }
-      },
-      yaxes: [{ axisLabel: '% Change', position: 'left' }/*,
-              { axisLabel: Instrument2.InstrumentName + ' (' + Instrument2.Currency + ')', position: 'right' }*/]
-    });
-
-    //Unbind the container from any previously bound events
-    chartContainer.unbind();
-
-    //Bind the plotselected event to allow zooming
-    chartContainer.bind("plotselected", function (event, ranges) { createFullScreenComparisonChart(Instrument1, Instrument2, Math.floor(ranges.xaxis.from), Math.ceil(ranges.xaxis.to)); });
-    //Reset zoom level on right-click
-    chartContainer.bind("contextmenu", function () { createFullScreenComparisonChart(Instrument1, Instrument2, 0, new Date().getTime()); return false; });
-
-    //Bind the chart tooltip
-    chartContainer.bind("plothover", function (event, pos, item) {
-      if (!pos.x || !pos.y) { return; }
-      if (item) {
-        let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
-        let y = item.datapoint[1].toFixed(2);
-        let content = x + " = " + y;
-
-        let o = plot.getPlotOffset();
-        let t = o.top;
-        let l = o.left;
-
-        //let tt = $("#" + chartContainerID + " .chart-tooltip");
-        let tt = chartContainer.children(".chart-tooltip");
-        if (tt.length > 0) {
-          tt.html(content).css({ top: t, left: l }).fadeIn(200);
-        } else {
-          tt = "<div class='chart-tooltip' style='top: " + t + "; left: " + l + ";'>" + content + "</div>";
-          chartContainer.append(tt).fadeIn(200);
-        }
-      } else {
-        //$("#" + chartContainerID + " .chart-tooltip").fadeOut(1);
-        chartContainer.children(".chart-tooltip").fadeOut(1);
-      }
-    });
-    chartContainer.bind("mouseout", function (event, pos, item) {
-      //$("#chartTooltip").fadeOut(1);
-      chartContainer.children(".chart-tooltip").fadeOut(1);
-    });
-
-  } else {
-    chartContainer.html('Not enough data to plot ' + Instrument1.Symbol + ' vs ' + Instrument2.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss());
-  }
-}
 
 function fixDecimals(val, place) {
     if (isNaN(val)) {
@@ -2249,7 +1009,12 @@ function submitNewDailyData(Instrument, NewData) {
       if (!Instrument.DailyData) {
         Instrument.DailyData = [];
       }
-      Instrument.DailyData.push(NewData[i]);
+      try {
+        Instrument.DailyData.push(NewData[i]);
+      }
+      catch {
+        console.error({"Instrument.DailyData.push error. Instrument: ": Instrument});
+      }
       if (NewData[i].DT <= currentMaxDT) {
         resortRequired = true;
       }
@@ -2634,6 +1399,9 @@ function createHoldingsTable() {
       $("#tblMainHoldings").trigger("sorton", Cookies.get('sortHoldings'));
       $('#tblMainHoldings').on('sortEnd', function (event) {
         // Prints the current sort order to the console
+        if (event.target.config.sortList.length > 3) {
+          console.info({ "Setting sortHoldings Cookie (array too long?)": event.target.config.sortList });
+        }
         Cookies.set('sortHoldings', event.target.config.sortList, { 'sameSite': 'strict' });
       });
     }
@@ -3324,7 +2092,7 @@ function updateCurrenciesSpan() {
   }
 }
 
-function showModalDialog_AddInstrument() {
+export function showModalDialog_AddInstrument() {
   let modal = document.getElementById("modalDialog");
 
   $("#modalTitle").html("Add Instrument");
@@ -3413,7 +2181,7 @@ function addInstrument(index) {
   });
 }
 
-function showModalDialog_AddHolding(symbol) {
+export function showModalDialog_AddHolding(symbol) {
 //function showModalDialog_AddHolding(span) {
   function GetAccountsDropdown() {
     let dd = '<select id="addHoldingAccountName"><option value="">Select account...</option>';
@@ -3603,7 +2371,7 @@ function AddHolding(accountName, symbol, noUnits, purchasePricePerUnit, purchase
 
 }
 
-function showModalDialog_SoldHolding(holdingID) {
+export function showModalDialog_SoldHolding(holdingID) {
   function GetTimeDropdowns() {
     let dd = '<select id="soldHoldingTimeHour"><option value="">Hour</option>';
     for (let i = 0; i < 24; i++) {
@@ -3742,7 +2510,7 @@ function soldHolding(holdingID, soldDate, accountName, soldCurrency, soldProceed
   });
 }
 
-function showModalDialog_FullScreenChart(Symbol) {
+export function showModalDialog_FullScreenChart(Symbol) {
   let i = Instruments.GetSymbol(Symbol);
 
   let modal = document.getElementById("modalChart");
@@ -3819,7 +2587,7 @@ function compareInstruments(Instrument1) {
   modal.style.display = "block";
 }
 
-function refreshHistoryChart() {
+export function refreshHistoryChart() {
   let chartContainer = $('#histDiv');
 
   $.ajax({
@@ -3847,7 +2615,8 @@ function refreshHistoryChart() {
         },
 
         title: {
-          text: 'Total Holdings History'
+          text: 'Total Holdings History',
+          style: { color: "#ffffff" }
         },
 
         series: [{
@@ -3873,6 +2642,15 @@ function refreshHistoryChart() {
           offset: 40
         }],
 
+        rangeSelector: {
+          buttonTheme: {
+            fill: "#303030",
+            stroke: "",
+            "stroke-width": 3,
+            style: { border: "1px solid red", color: "#dddddd" }
+          }
+        },
+
         plotOptions: {
           ohlc: {
             color: '#ff4141',
@@ -3887,3 +2665,5 @@ function refreshHistoryChart() {
   });
   
 }
+
+//$(document).ready(getInstruments());
\ No newline at end of file
diff --git a/Websites/SharePrices/SharePrices/scripts/SharePrices_Charts.js b/Websites/SharePrices/SharePrices/scripts/SharePrices_Charts.js
new file mode 100644
index 0000000..91f2e97
--- /dev/null
+++ b/Websites/SharePrices/SharePrices/scripts/SharePrices_Charts.js
@@ -0,0 +1,1228 @@
+﻿import {generateAxisBreaks, getProfitOrLoss, timespans} from "./SharePrices_Common.js";
+
+export function createLongChart(Instrument) {
+  let rowNo = Instrument.DisplayOrder;
+  let ytdStartDate = new Date(new Date().getFullYear(), 0, 1).getTime();
+
+  // Set start date to 2020-01-01 to include pre-pandemic prices
+  ytdStartDate = new Date("2020-01-01T00:00:00");
+
+  let ytdEndDate = new Date().getTime();
+  //if (Instrument.LongChart) {
+  try { Instrument.LongChart.destroy(); } catch (ex) { }
+  Instrument.LongChart = createChart(Instrument, ytdStartDate, ytdEndDate, 'divLongChart' + rowNo.toString(), 'divLongSummary' + rowNo.toString());
+}
+export function createMidChart(Instrument) {
+  let rowNo = Instrument.DisplayOrder;
+  let quarterStartDate = new Date().setHours(0, 0, 0) - (timespans.oneMonth * 3);
+  let quarterEndDate = new Date().getTime();
+  try { Instrument.MidChart.destroy(); } catch (ex) { }
+  Instrument.MidChart = createChart(Instrument, quarterStartDate, quarterEndDate, 'divMidChart' + rowNo.toString(), 'divMidSummary' + rowNo.toString());
+}
+export function createShortChart(Instrument) {
+  let rowNo = Instrument.DisplayOrder;
+  let fortnightStartDate = new Date().setHours(0, 0, 0) - (timespans.oneWeek * 2);
+  let fortnightEndDate = new Date().getTime();
+  try { Instrument.ShortChart.destroy(); } catch (ex) { }
+  Instrument.ShortChart = createChart(Instrument, fortnightStartDate, fortnightEndDate, 'divShortChart' + rowNo.toString(), 'divShortSummary' + rowNo.toString());
+}
+export function createSingleDayChart(Instrument) {
+  let rowNo = Instrument.DisplayOrder;
+  let dayStartDate = 0;
+  let dayEndDate = 0;
+  let dt = new Date().getTime();
+  dayStartDate = Instrument.SingleDayStartDate;
+  dayEndDate = Instrument.SingleDayEndDate;
+  let previousClose = Instrument.SingleDayPreviousClose;
+
+  try { Instrument.SingleDayChart.destroy(); } catch (ex) { }
+
+  Instrument.SingleDayChart = createChart(Instrument, dayStartDate, dayEndDate, 'divDayChart' + rowNo.toString(), 'divDaySummary' + rowNo.toString(), previousClose);
+  //createChart_Flot(Instrument, dayStartDate, dayEndDate, 'divDayFlotChart' + rowNo.toString(), 'divDaySummary' + rowNo.toString(), previousClose);
+}
+export function createChart_Flot(Instrument, startDate, endDate, chartContainerID, summaryContainerID, previousClose) {
+  function getChartDataSubset(Instrument, dateFrom, dateTo) {
+    let result = [];
+    //Single day data can be passed direct
+    if (dateTo - dateFrom <= timespans.oneDay) {
+      result = Instrument.SingleDayData;
+      //return Instrument.SingleDayData;
+    } else {
+      //Anything over one month should only use daily data
+      if (dateTo - dateFrom > (timespans.oneMonth + (timespans.oneDay * 4))) {
+        for (let i = 0; i < Instrument.DailyData.length; i++) {
+          let quote = Instrument.DailyData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            result.push(quote);
+          }
+        }
+      } else {
+        //Get all in-date-range intraday data
+        let foundDates = { min: new Date().getTime(), max: 0 }
+        for (let i = 0; i < Instrument.IntradayData.length; i++) {
+          let quote = Instrument.IntradayData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
+            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
+            result.push(quote);
+          }
+        }
+        //Back-fill with daily data if the intraday data doesn't cover the whole date range
+        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
+        if (minFoundDate > dateFrom) {
+          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
+            let quote = Instrument.DailyData[i];
+            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
+              result.unshift(quote);
+            }
+          }
+        }
+      }
+    }
+    return result;
+  }
+  function getBreakevenLine(Instrument, dateFrom, dateTo) {
+    let result = [];
+    let currentPrice = 0;
+    for (let i = 0; i < Instrument.HoldingsHistory.length; i++) {
+      let h = Instrument.HoldingsHistory[i];
+      if (currentPrice > 0) { result.push([h.DT - 1, currentPrice]) };
+      if (h.TotalUnits > 0) {
+        currentPrice = h.TotalCost / h.TotalUnits;
+        result.push([h.DT, (h.TotalCost / h.TotalUnits)]);
+      } else {
+        currentPrice = 0;
+        result.push([h.DT, null]);
+      }
+    }
+    if (currentPrice > 0) {
+      result.push([dateTo, currentPrice]);
+    }
+
+    //Remove all points before the start of the date range
+    let i = result.length - 1;
+    while (i >= 0 && result[i][0] >= startDate) i--;
+    while (i > 0) { result.shift(); i--; }
+
+    return result;
+  }
+  function transformAndSummariseChartData(cd) {
+    let seriesData = [];
+    //Find the first entry within the date range
+    let x = 0;
+    let summaryData = {
+      StartDT: cd[x].DT,
+      EndDT: cd[cd.length - 1].DT,
+      Open: cd[x].open,
+      High: cd[x].high,
+      HighDT: cd[x].DT,
+      Low: cd[x].low,
+      LowDT: cd[x].DT,
+      Close: cd[cd.length - 1].close
+    };
+    while (x < cd.length && cd[x].DT < startDate) {
+      summaryData.StartDT = cd[x].DT;
+      summaryData.EndDT = cd[cd.length - 1].DT;
+      summaryData.Open = cd[x].open;
+      summaryData.High = cd[x].high;
+      summaryData.HighDT = cd[x].DT;
+      summaryData.Low = cd[x].low;
+      summaryData.LowDT = cd[x].DT;
+      summaryData.Close = cd[cd.length - 1].close;
+      x++;
+    };
+    let basePrice = (!previousClose) ? summaryData.Open : previousClose;
+    for (let i = 0; i < cd.length; i++) {
+      let entry = cd[i];
+      if (summaryData.High < entry.high) {
+        summaryData.High = entry.high;
+        summaryData.HighDT = cd[x].DT;
+      }
+      if (summaryData.Low > entry.low) {
+        summaryData.Low = entry.low;
+        summaryData.LowDT = cd[x].DT;
+      }
+      if (i >= x) {
+        if (priceType == 'percent') {
+          seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
+        } else {
+          seriesData.push([entry.DT, entry.close]);
+        }
+      }
+    }
+    return { summaryData: summaryData, seriesData: seriesData, basePrice: basePrice };
+  }
+
+  let chartContainer = $("#" + chartContainerID);
+  let priceType = $('#displayAsPercent').prop('checked') ? 'percent' : '';
+  let chartData = [];
+  if (endDate - endDate <= timespans.oneDay) {
+    chartData = getChartDataSubset(Instrument, startDate, endDate);
+  } else {
+    chartData = getChartDataSubset(Instrument, startDate - (timespans.oneDay * 3), endDate);
+  }
+
+  let seriesData = [];
+  let volumeData = [];
+  if (chartData.length > 1) {
+    //Summarise the data and transform values to percentage if required
+    let summaryData = {
+      StartDT: chartData[0].DT,
+      EndDT: chartData[chartData.length - 1].DT,
+      Open: chartData[0].open,
+      High: chartData[0].high,
+      HighDT: chartData[0].DT,
+      Low: chartData[0].low,
+      LowDT: chartData[0].DT,
+      Close: chartData[chartData.length - 1].close
+    };
+    let basePrice = (!previousClose) ? summaryData.Open : previousClose;
+    for (let i = 0; i < chartData.length; i++) {
+      let entry = chartData[i];
+      if (summaryData.High < entry.high) {
+        summaryData.High = entry.high;
+        summaryData.HighDT = entry.DT;
+      }
+      if (summaryData.Low > entry.low) {
+        summaryData.Low = entry.low;
+        summaryData.LowDT = entry.DT;
+      }
+      if (priceType == 'percent') {
+        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
+      } else {
+        seriesData.push([entry.DT, entry.close]);
+      }
+      volumeData.push([entry.DT, entry.volume]);
+    }
+
+    //let weekendMarkings = getWeekendMarkings(startDate, endDate);
+    let color = (summaryData.Close > basePrice) ? "#00cc00" : (summaryData.Close < basePrice) ? "red" : "blue";
+    let series = [{ data: volumeData, yaxis: 2, color: "#304e57", bars: { show: true } }];
+
+    //Add the breakeven price line
+    if ((Instrument.ShowBreakevenLine | 0) == 1) {
+      if (priceType == 'percent') {
+        series.unshift({ data: [[startDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100], [endDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100]], color: '#24BCC7', shadowSize: 0, lines: { lineWidth: 1 } });
+      } else {
+        let b = getBreakevenLine(Instrument, startDate, endDate);
+        if (b.length > 0 && b[0][0] < endDate && b[b.length - 1][0] > startDate) { //Only add the series if it falls within the chart date range
+          series.push({ data: b, color: 'green', shadowSize: 0, lines: { lineWidth: 1.5 } });
+        }
+      }
+    }
+
+    //Add the previousClose line to the series
+    if (previousClose) {
+      if (priceType == 'percent') {
+        series.unshift({ data: [[startDate, ((previousClose / basePrice) - 1) * 100], [endDate, ((previousClose / basePrice) - 1) * 100]], color: '#3b88ff', shadowSize: 0, lines: { lineWidth: 1 } });
+      } else {
+        series.unshift({ data: [[startDate, previousClose], [endDate, previousClose]], color: '#3b88ff', shadowSize: 0, lines: { lineWidth: 1 } });
+      }
+    }
+
+    //Add the volume bars to the end of the series, so it is plotted behind all other lines
+    series.push({ data: seriesData, color: color, shadowSize: 0, lines: { lineWidth: 1 } });
+
+    //Dispose of any previous chart to prevent memory leaks (orphaaned DOM nodes)
+    let oldChart = chartContainer.data('plot');
+    if (oldChart) {// If it's destroyed, then data('plot') will be undefined
+      oldChart.destroy();
+    }
+
+    //Draw the chart
+    let chartTimespan = endDate - startDate;
+    let gapMap = [];
+    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
+      gapMap = generateChartGapMap(seriesData, timespans.oneHour);
+    }
+    function volumeAxisFormatter(val, axis) {
+      if (val >= 1000000000)
+        return (val / 1000000000).toFixed(axis.tickDecimals) + "b";
+      else if (val >= 1000000)
+        return (val / 1000000).toFixed(axis.tickDecimals) + "m";
+      else if (val >= 1000)
+        return (val / 1000).toFixed(axis.tickDecimals) + "k";
+      else
+        return val.toFixed(axis.tickDecimals);
+    }
+    var plot;
+    try {
+      plot = $.plot(chartContainer, series, {
+        series: { downsample: { threshold: 100 } },
+        grid: { show: true, hoverable: true, color: 'white', borderColor: '#505050' /*, markings: weekendMarkings*/ },
+        /*crosshair: { mode: 'x', snapX: true, showXValue: false },*/
+        xaxis: {
+          mode: "time",
+          timezone: 'browser',
+          min: chartTimespan > timespans.oneDay ? summaryData.StartDT : startDate,
+          max: chartTimespan > timespans.oneDay ? summaryData.EndDT : endDate,
+          transform: function (v) { return mapChartXValue(v, gapMap); },
+          inverseTransform: function (v) { return unmapChartXValue(v, gapMap); }
+        },
+        yaxes: [{ position: 'left' }, { position: 'right', tickFormatter: volumeAxisFormatter }]
+      });
+    }
+    catch (ex) {
+      logError(ex.message);
+    }
+
+    //Bind the chart tooltip
+    if (plot) {
+      chartContainer.bind("plothover", function (event, pos, item) {
+        if (!pos.x || !pos.y) { return; }
+        if (item) {
+          let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
+          let y = item.datapoint[1].toFixed(2);
+          let content = x + " = " + y;
+
+          let o = plot.getPlotOffset();
+          let t = o.top;
+          let l = o.left;
+
+          //let tt = $("#" + chartContainerID + " .chart-tooltip");
+          let tt = chartContainer.children(".chart-tooltip");
+          if (tt.length > 0) {
+            tt.html(content).css({ top: t, left: l }).fadeIn(200);
+          } else {
+            tt = "<div class='chart-tooltip' style='top: " + t + "; left: " + l + ";'>" + content + "</div>";
+            chartContainer.append(tt).fadeIn(200);
+          }
+        } else {
+          //$("#" + chartContainerID + " .chart-tooltip").fadeOut(1);
+          chartContainer.children(".chart-tooltip").fadeOut(1);
+        }
+      });
+    }
+
+    //Create the summary table
+    let summaryTable = '<table class="summary">';
+    if ((endDate - startDate) <= timespans.oneDay) {
+      //Add market times and previous close info for Single Dat chart
+      let dt = new Date().getTime();
+      let marketHours = (new Date(Instrument.SingleDayStartDate)).hhmm() + ' - ' + (new Date(Instrument.SingleDayEndDate)).hhmm();
+      summaryTable += '<tr><td>' + ((dt >= Instrument.SingleDayStartDate && dt <= Instrument.SingleDayEndDate) ? '<span style="color:limegreen">Market Open' : '<span style="color:firebrick">Market Closed') + '</span> (' + marketHours + ')</td>';
+      summaryTable += (!previousClose) ? '' : ('<td colspan="2">Prev close: ' + previousClose.toString() + '</td>');
+      summaryTable += '</tr>';
+    }
+
+    summaryTable += '<tr><td>O: ' + summaryData.Open.autoDP() + ' ' + ((previousClose) ? getProfitOrLoss(previousClose, summaryData.Open, 1) : '') + '</td>';
+    summaryTable += '<td title="' + new Date(summaryData.HighDT).yyyymmddhhmmss() + '">H: ' + summaryData.High.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.High, 1) + '</td><tr>';
+    summaryTable += '<tr><td title="' + new Date(summaryData.LowDT).yyyymmddhhmmss() + '">L: ' + summaryData.Low.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.Low, 1) + '</td>';
+    summaryTable += '<td>C: ' + summaryData.Close.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.Close, 1) + '</tr></td>';
+
+    //Create CurrentPrice for this instrument if it doesn't exist yet
+    Instrument.CurrentPrice = Instrument.CurrentPrice || summaryData.Close;
+
+    summaryTable += '</table>';
+    $('#' + summaryContainerID).html(summaryTable);
+  } else {
+    //console.warn('Not enough data to plot ' + Instrument.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss() + ' to ' + chartContainerID);
+  }
+}
+export function createChart(Instrument, startDate, endDate, chartContainerID, summaryContainerID, previousClose) {
+  function getChartDataSubset(Instrument, dateFrom, dateTo) {
+    let result = [];
+    //Single day data can be passed direct
+    if (dateTo - dateFrom <= timespans.oneDay) {
+      result = Instrument.SingleDayData;
+      //return Instrument.SingleDayData;
+    } else {
+      //Anything over one month should only use daily data
+      if (dateTo - dateFrom > (timespans.oneMonth + (timespans.oneDay * 4))) {
+        for (let i = 0; i < Instrument.DailyData.length; i++) {
+          let quote = Instrument.DailyData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            result.push(quote);
+          }
+        }
+      } else {
+        //Get all in-date-range intraday data
+        let foundDates = { min: new Date().getTime(), max: 0 }
+        for (let i = 0; i < Instrument.IntradayData.length; i++) {
+          let quote = Instrument.IntradayData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
+            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
+            result.push(quote);
+          }
+        }
+        //Back-fill with daily data if the intraday data doesn't cover the whole date range
+        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
+        if (minFoundDate > dateFrom) {
+          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
+            let quote = Instrument.DailyData[i];
+            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
+              result.unshift(quote);
+            }
+          }
+        }
+      }
+    }
+    return result;
+  }
+  function getBreakevenLine(Instrument, dateFrom, dateTo) {
+    let result = [];
+    let currentPrice = 0;
+    for (let i = 0; i < Instrument.HoldingsHistory.length; i++) {
+      let h = Instrument.HoldingsHistory[i];
+      if (currentPrice > 0) { result.push([h.DT - 1, currentPrice]) };
+      if (h.TotalUnits > 0) {
+        currentPrice = h.TotalCost / h.TotalUnits;
+        result.push([h.DT, (h.TotalCost / h.TotalUnits)]);
+      } else {
+        currentPrice = 0;
+        result.push([h.DT, null]);
+      }
+    }
+    if (currentPrice > 0) {
+      result.push([dateTo, currentPrice]);
+    }
+
+    //Remove all points before the start of the date range
+    let i = result.length - 1;
+    while (i >= 0 && result[i][0] >= startDate) i--;
+    while (i > 0) { result.shift(); i--; }
+
+    return result;
+  }
+  function transformAndSummariseChartData(cd) {
+    let seriesData = [];
+    //Find the first entry within the date range
+    let x = 0;
+    let summaryData = {
+      StartDT: cd[x].DT,
+      EndDT: cd[cd.length - 1].DT,
+      Open: cd[x].open,
+      High: cd[x].high,
+      HighDT: cd[x].DT,
+      Low: cd[x].low,
+      LowDT: cd[x].DT,
+      Close: cd[cd.length - 1].close
+    };
+    while (x < cd.length && cd[x].DT < startDate) {
+      summaryData.StartDT = cd[x].DT;
+      summaryData.EndDT = cd[cd.length - 1].DT;
+      summaryData.Open = cd[x].open;
+      summaryData.High = cd[x].high;
+      summaryData.HighDT = cd[x].DT;
+      summaryData.Low = cd[x].low;
+      summaryData.LowDT = cd[x].DT;
+      summaryData.Close = cd[cd.length - 1].close;
+      x++;
+    };
+    let basePrice = (!previousClose) ? summaryData.Open : previousClose;
+    for (let i = 0; i < cd.length; i++) {
+      let entry = cd[i];
+      if (summaryData.High < entry.high) {
+        summaryData.High = entry.high;
+        summaryData.HighDT = cd[x].DT;
+      }
+      if (summaryData.Low > entry.low) {
+        summaryData.Low = entry.low;
+        summaryData.LowDT = cd[x].DT;
+      }
+      if (i >= x) {
+        if (priceType == 'percent') {
+          seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
+        } else {
+          seriesData.push([entry.DT, entry.close]);
+        }
+      }
+    }
+    return { summaryData: summaryData, seriesData: seriesData, basePrice: basePrice };
+  }
+
+  let chartContainer = $('#' + chartContainerID);
+  if (chartContainer.length > 0) {
+    let chart = {};
+    let priceType = $('#displayAsPercent').prop('checked') ? 'percent' : '';
+
+    let chartData = [];
+    if (endDate - endDate <= timespans.oneDay) {
+      chartData = getChartDataSubset(Instrument, startDate, endDate);
+    } else {
+      chartData = getChartDataSubset(Instrument, startDate - (timespans.oneDay * 3), endDate);
+    }
+
+    let seriesData = [];
+    let volumeData = [];
+    if (chartData && chartData.length > 1) {
+
+      //Summarise the data and transform values to percentage if required
+      let summaryData = {
+        StartDT: chartData[0].DT,
+        EndDT: chartData[chartData.length - 1].DT,
+        Open: chartData[0].open,
+        High: chartData[0].high,
+        HighDT: chartData[0].DT,
+        Low: chartData[0].low,
+        LowDT: chartData[0].DT,
+        Close: chartData[chartData.length - 1].close
+      };
+      let basePrice = (!previousClose) ? summaryData.Open : previousClose;
+      for (let i = 0; i < chartData.length; i++) {
+        let entry = chartData[i];
+        if (summaryData.High < entry.high) {
+          summaryData.High = entry.high;
+          summaryData.HighDT = entry.DT;
+        }
+        if (summaryData.Low > entry.low) {
+          summaryData.Low = entry.low;
+          summaryData.LowDT = entry.DT;
+        }
+        if (priceType == 'percent') {
+          seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
+        } else {
+          seriesData.push([entry.DT, entry.close]);
+        }
+        volumeData.push([entry.DT, entry.volume]);
+      }
+
+      let series = [{ name: 'Volume', type: 'column', yAxis: 1, color: "#304e57", borderColor: "#304e57", data: volumeData }];
+
+      //Add the breakeven price line
+      if ((Instrument.ShowBreakevenLine | 0) == 1) {
+        if (priceType == 'percent') {
+          series.unshift({ name: 'Breakeven', type: 'line', color: '#24BCC7', lineWidth: 1, marker: { enabled: false }, data: [[startDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100], [endDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100]] /* shadowSize: 0 */ });
+        } else {
+          let b = getBreakevenLine(Instrument, startDate, endDate);
+          if (b.length > 0 && b[0][0] < endDate && b[b.length - 1][0] > startDate) { //Only add the series if it falls within the chart date range
+            series.push({ name: 'Breakeven', type: 'line', yAxis: 0, color: 'green', lineWidth: 1, marker: { enabled: false }, data: b /* shadowSize: 0 */ });
+          }
+        }
+      }
+
+      //Add the previousClose line to the series
+      if (previousClose) {
+        if (priceType == 'percent') {
+          series.unshift({ name: 'Previous Close', type: 'line', yAxis: 0, color: '#3b88ff', lineWidth: 1, marker: { enabled: false }, data: [[startDate, ((previousClose / basePrice) - 1) * 100], [endDate, ((previousClose / basePrice) - 1) * 100]] /* shadowSize: 0 */ });
+        } else {
+          series.unshift({ name: 'Previous Close', type: 'line', yAxis: 0, color: '#3b88ff', lineWidth: 1, marker: { enabled: false }, data: [[startDate, previousClose], [endDate, previousClose]] /* shadowSize: 0 */ });
+        }
+      }
+
+      //Add the price data to the end of the series, so it is plotted above all other lines
+      let color = (summaryData.Close > basePrice) ? "#00cc00" : (summaryData.Close < basePrice) ? "red" : "blue";
+      series.push({ name: 'Price', type: 'line', color: color, lineWidth: 1, data: seriesData /* shadowSize: 0 */ });
+
+      //Draw the chart
+      let chartTimespan = endDate - startDate;
+      let xAxisBreaks = [];
+      if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
+        xAxisBreaks = generateAxisBreaks(seriesData, timespans.oneHour, timespans.oneHour);
+      }
+
+      try {
+        chart = Highcharts.chart(chartContainerID, {
+          series: series,
+          chart: {
+            backgroundColor: 'rgba(0,0,0,0)',
+            spacingTop: 5,
+            spacingBottom: 0,
+            spacingLeft: 2,
+            spacingRight: 0
+          },
+          title: { text: undefined },
+          legend: { enabled: false },
+          xAxis: [{
+            type: 'datetime',
+            lineColor: '#505050',
+            tickColor: '#505050',
+            tickPixelInterval: 60,
+            min: chartTimespan > timespans.oneDay ? summaryData.StartDT : startDate,
+            max: chartTimespan > timespans.oneDay ? summaryData.EndDT : endDate,
+            breaks: xAxisBreaks,
+            labels: { style: { color: '#b0b0b0', fontSize: 'x-small' } }
+          }],
+          yAxis: [{
+            title: { text: undefined },
+            gridLineColor: '#505050',
+            tickPixelInterval: 30,
+            endOnTick: false,
+            tickLength: 20,
+            labels: { style: { color: '#b0b0b0', fontSize: 'x-small' } }
+          },
+          {
+            title: { text: undefined },
+            /*gridLineColor: '#505050',*/
+            gridLineWidth: 0,
+            tickPixelInterval: 30,
+            endOnTick: false,
+            opposite: true,
+            labels: { style: { color: '#b0b0b0', fontSize: 'x-small' } }
+          }],
+          credits: { enabled: false }
+        });
+      }
+      catch (ex) {
+        logError(ex.message);
+      }
+
+      //Create the summary table
+      let summaryTable = '<table class="summary">';
+      if ((endDate - startDate) <= timespans.oneDay) {
+        //Add market times and previous close info for Single Day chart
+        let dt = new Date().getTime();
+        let marketHours = (new Date(Instrument.SingleDayStartDate)).hhmm() + ' - ' + (new Date(Instrument.SingleDayEndDate)).hhmm();
+        summaryTable += '<tr><td>' + ((dt >= Instrument.SingleDayStartDate && dt <= Instrument.SingleDayEndDate) ? '<span style="color:limegreen">Market Open' : '<span style="color:firebrick">Market Closed') + '</span> (' + marketHours + ')</td>';
+        summaryTable += (!previousClose) ? '' : ('<td colspan="2">Prev close: ' + previousClose.toString() + '</td>');
+        summaryTable += '</tr>';
+      }
+
+      summaryTable += '<tr><td>O: ' + summaryData.Open.autoDP() + ' ' + ((previousClose) ? getProfitOrLoss(previousClose, summaryData.Open, 1) : '') + '</td>';
+      summaryTable += '<td title="' + new Date(summaryData.HighDT).yyyymmddhhmmss() + '">H: ' + summaryData.High.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.High, 1) + '</td><tr>';
+      summaryTable += '<tr><td title="' + new Date(summaryData.LowDT).yyyymmddhhmmss() + '">L: ' + summaryData.Low.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.Low, 1) + '</td>';
+      summaryTable += '<td>C: ' + summaryData.Close.autoDP() + ' ' + getProfitOrLoss(basePrice, summaryData.Close, 1) + '</tr></td>';
+
+      //Create CurrentPrice for this instrument if it doesn't exist yet
+      Instrument.CurrentPrice = Instrument.CurrentPrice || summaryData.Close;
+
+      summaryTable += '</table>';
+      $('#' + summaryContainerID).html(summaryTable);
+    } else {
+      //console.warn('Not enough data to plot ' + Instrument.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss() + ' to ' + chartContainerID);
+    }
+
+    return chart;
+  }
+}
+export function createFullScreenChart(Instrument, startDate, endDate) {
+  function getChartDataSubset(Instrument, dateFrom, dateTo) {
+    let result = [];
+    //Single day data can be passed direct
+    if (dateTo - dateFrom <= timespans.oneDay) {
+      result = Instrument.SingleDayData;
+    } else {
+      //Get all in-date-range intraday data
+      let foundDates = { min: new Date().getTime(), max: 0 }
+      for (let i = 0; i < Instrument.IntradayData.length; i++) {
+        let quote = Instrument.IntradayData[i];
+        if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+          if (quote.DT > foundDates.max) foundDates.max = quote.DT;
+          if (quote.DT < foundDates.min) foundDates.min = quote.DT;
+          result.push(quote);
+        }
+      }
+      //Back-fill with daily data if the intraday data doesn't cover the whole date range
+      let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
+
+      if (minFoundDate > dateFrom) {
+        for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
+          let quote = Instrument.DailyData[i];
+          if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
+            result.unshift(quote);
+          }
+        }
+      }
+    }
+
+    return result;
+  }
+  function getBreakevenLine(Instrument, dateFrom, dateTo) {
+    let result = [];
+    let currentPrice = 0;
+    for (let i = 0; i < Instrument.HoldingsHistory.length; i++) {
+      let h = Instrument.HoldingsHistory[i];
+      if (currentPrice > 0) { result.push([h.DT - 1, currentPrice]) };
+      if (h.TotalUnits > 0) {
+        currentPrice = h.TotalCost / h.TotalUnits;
+        result.push([h.DT, (h.TotalCost / h.TotalUnits)]);
+      } else {
+        currentPrice = 0;
+        result.push([h.DT, null]);
+      }
+    }
+    if (currentPrice > 0) {
+      result.push([dateTo, currentPrice]);
+    }
+
+    return result;
+  }
+
+  let chartContainerID = 'divFullScreenChart';
+
+  let priceType = $('#displayAsPercent').prop('checked') ? 'percent' : '';
+  let chartData = getChartDataSubset(Instrument, startDate, endDate);
+  let seriesData = [];
+  let volumeData = [];
+
+  if (chartData.length > 1) {
+    //Summarise the data and transform values to percentage if required
+    let summaryData = {
+      StartDT: chartData[0].DT,
+      EndDT: chartData[chartData.length - 1].DT,
+      Open: chartData[0].open,
+      High: chartData[0].high,
+      HighDT: chartData[0].DT,
+      Low: chartData[0].low,
+      LowDT: chartData[0].DT,
+      Close: chartData[chartData.length - 1].close
+    };
+    let basePrice = summaryData.Open;
+    for (let i = 0; i < chartData.length; i++) {
+      let entry = chartData[i];
+      if (summaryData.High < entry.high) {
+        summaryData.High = entry.high;
+        summaryData.HighDT = entry.DT;
+      }
+      if (summaryData.Low > entry.low) {
+        summaryData.Low = entry.low;
+        summaryData.LowDT = entry.DT;
+      }
+      if (priceType == 'percent') {
+        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
+      } else {
+        seriesData.push([entry.DT, entry.close]);
+      }
+      volumeData.push([entry.DT, entry.volume]);
+    }
+
+    let color = (summaryData.Close > basePrice) ? "#00cc00" : (summaryData.Close < basePrice) ? "red" : "blue";
+    let series = [{ name: 'Volume', type: 'column', yAxis: 1, color: "#304e57", borderColor: "#304e57", data: volumeData }];
+
+    //Add the breakeven price line
+    if (priceType == 'percent') {
+      series.unshift({ name: 'Breakeven', type: 'line', yAxis: 0, color: '#24BCC7', lineWidth: 1, data: [[startDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100], [endDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100]] });
+    } else {
+      let b = getBreakevenLine(Instrument, startDate, endDate);
+      if (b.length > 0 && b[0][0] < endDate && b[b.length - 1][0] > startDate) { //Only add the series if it falls within the chart date range
+        series.push({ name: 'Breakeven', type: 'line', yAxis: 0, color: 'green', lineWidth: 1, data: b });
+      }
+    }
+
+    //Add the price data to the end of the series, so it is plotted over all other lines
+    series.push({ name: 'Price', type: 'line', yAxis: 0, color: color, lineWidth: 1, data: seriesData });
+
+    //Draw the chart
+    let chartTimespan = endDate - startDate;
+    let xAxisBreaks = [];
+    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
+      xAxisBreaks = generateAxisBreaks(series[0].data, timespans.oneHour, timespans.oneHour);
+    }
+
+    let chart = Highcharts.chart(chartContainerID, {
+      series: series,
+      chart: {
+        backgroundColor: 'rgba(0,0,0,0)',
+        zoomType: 'x'
+      },
+      title: { text: undefined },
+      legend: {
+        itemStyle: { color: '#b0b0b0' }
+      },
+      xAxis: [{
+        type: 'datetime',
+        lineColor: '#505050',
+        tickColor: '#505050',
+        //tickPixelInterval: 60,
+        min: chartTimespan > timespans.oneDay ? summaryData.StartDT : startDate,
+        max: chartTimespan > timespans.oneDay ? summaryData.EndDT : endDate,
+        breaks: xAxisBreaks,
+        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small' */ } }
+      }],
+      yAxis: [{
+        title: {
+          text: 'Price (' + Instrument.Currency + ')',
+          style: { color: '#b0b0b0' }
+        },
+        gridLineColor: '#505050',
+        //endOnTick: false,
+        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small'*/ } }
+      },
+      {
+        title: {
+          text: 'Volume',
+          style: { color: '#b0b0b0' }
+        },
+        /*gridLineColor: '#505050',*/
+        gridLineWidth: 0,
+        endOnTick: false,
+        opposite: true,
+        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small'*/ } }
+      }],
+      credits: { enabled: false }
+    });
+  } else {
+    //console.warn('Not enough data to plot ' + Instrument.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss() + ' to ' + chartContainerID);
+  }
+}
+export function createFullScreenChart_Flot(Instrument, startDate, endDate) {
+  function getChartDataSubset(Instrument, dateFrom, dateTo) {
+    let result = [];
+    //Single day data can be passed direct
+    if (dateTo - dateFrom <= timespans.oneDay) {
+      result = Instrument.SingleDayData;
+    } else {
+      //Anything over 3 months should only use daily data
+      if (dateTo - dateFrom > ((3 * timespans.oneMonth) + (timespans.oneDay * 4))) {
+        for (let i = 0; i < Instrument.DailyData.length; i++) {
+          let quote = Instrument.DailyData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            result.push(quote);
+          }
+        }
+      } else {
+        //Get all in-date-range intraday data
+        let foundDates = { min: new Date().getTime(), max: 0 }
+        for (let i = 0; i < Instrument.IntradayData.length; i++) {
+          let quote = Instrument.IntradayData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
+            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
+            result.push(quote);
+          }
+        }
+        //Back-fill with daily data if the intraday data doesn't cover the whole date range
+        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
+        if (minFoundDate > dateFrom) {
+          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
+            let quote = Instrument.DailyData[i];
+            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
+              result.unshift(quote);
+            }
+          }
+        }
+      }
+    }
+
+    return result;
+  }
+  function getBreakevenLine(Instrument, dateFrom, dateTo) {
+    let result = [];
+    let currentPrice = 0;
+    for (let i = 0; i < Instrument.HoldingsHistory.length; i++) {
+      let h = Instrument.HoldingsHistory[i];
+      if (currentPrice > 0) { result.push([h.DT - 1, currentPrice]) };
+      if (h.TotalUnits > 0) {
+        currentPrice = h.TotalCost / h.TotalUnits;
+        result.push([h.DT, (h.TotalCost / h.TotalUnits)]);
+      } else {
+        currentPrice = 0;
+        result.push([h.DT, null]);
+      }
+    }
+    if (currentPrice > 0) {
+      result.push([dateTo, currentPrice]);
+    }
+
+    return result;
+  }
+
+  let chartContainerID = 'divFullScreenChart';
+  let chartContainer = $("#" + chartContainerID);
+
+  let priceType = $('#displayAsPercent').prop('checked') ? 'percent' : '';
+  let chartData = getChartDataSubset(Instrument, startDate, endDate);
+  let seriesData = [];
+  let volumeData = [];
+
+  if (chartData.length > 1) {
+    //Summarise the data and transform values to percentage if required
+    let summaryData = {
+      StartDT: chartData[0].DT,
+      EndDT: chartData[chartData.length - 1].DT,
+      Open: chartData[0].open,
+      High: chartData[0].high,
+      HighDT: chartData[0].DT,
+      Low: chartData[0].low,
+      LowDT: chartData[0].DT,
+      Close: chartData[chartData.length - 1].close
+    };
+    let basePrice = summaryData.Open;
+    for (let i = 0; i < chartData.length; i++) {
+      let entry = chartData[i];
+      if (summaryData.High < entry.high) {
+        summaryData.High = entry.high;
+        summaryData.HighDT = entry.DT;
+      }
+      if (summaryData.Low > entry.low) {
+        summaryData.Low = entry.low;
+        summaryData.LowDT = entry.DT;
+      }
+      if (priceType == 'percent') {
+        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
+      } else {
+        seriesData.push([entry.DT, entry.close]);
+      }
+      volumeData.push([entry.DT, entry.volume]);
+    }
+
+    //let weekendMarkings = getWeekendMarkings(startDate, endDate);
+    let color = (summaryData.Close > basePrice) ? "#00cc00" : (summaryData.Close < basePrice) ? "red" : "blue";
+    let series = [{ data: volumeData, yaxis: 2, color: "#304e57", bars: { show: true } }];
+
+    //Add the breakeven price line
+    //if ($('#showBreakevenLine').prop('checked')) {
+    if (priceType == 'percent') {
+      series.unshift({ data: [[startDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100], [endDate, ((Instrument.BreakevenPrice / basePrice) - 1) * 100]], color: '#24BCC7', shadowSize: 0, lines: { lineWidth: 1 } });
+    } else {
+      let b = getBreakevenLine(Instrument, startDate, endDate);
+      if (b.length > 0 && b[0][0] < endDate && b[b.length - 1][0] > startDate) { //Only add the series if it falls within the chart date range
+        series.push({ data: b, color: 'green', shadowSize: 0, lines: { lineWidth: 1.5 } });
+      }
+    }
+    //}
+
+    //Add the price data to the end of the series, so it is plotted over all other lines
+    series.push({ data: seriesData, color: color, shadowSize: 0, lines: { lineWidth: 1 } });
+
+    //Draw the chart
+    let chartTimespan = endDate - startDate;
+    let gapMap = [];
+    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
+      gapMap = generateChartGapMap(series[0].data, timespans.oneHour);
+    }
+    function volumeAxisFormatter(val, axis) {
+      if (val >= 1000000000)
+        return (val / 1000000000).toFixed(axis.tickDecimals) + "b";
+      else if (val >= 1000000)
+        return (val / 1000000).toFixed(axis.tickDecimals) + "m";
+      else if (val >= 1000)
+        return (val / 1000).toFixed(axis.tickDecimals) + "k";
+      else
+        return val.toFixed(axis.tickDecimals);
+    }
+    let plot = $.plot(chartContainer, series, {
+      grid: { show: true, hoverable: true, clickable: true, color: 'white', borderColor: '#505050' },
+      selection: { mode: "x" },
+      xaxis: {
+        mode: "time",
+        timezone: 'browser',
+        min: chartTimespan > timespans.oneDay ? summaryData.StartDT : startDate,
+        max: chartTimespan > timespans.oneDay ? summaryData.EndDT : endDate,
+        transform: function (v) { return mapChartXValue(v, gapMap); },
+        inverseTransform: function (v) { return unmapChartXValue(v, gapMap); }
+      },
+      yaxes: [{ axisLabel: 'Price (' + Instrument.Currency + ')', position: 'left' }, { axisLabel: 'Volume', position: 'right', tickFormatter: volumeAxisFormatter }]
+    });
+
+    //Unbind the container from any previously bound events
+    chartContainer.unbind();
+
+    //Bind the plotselected event to allow zooming
+    chartContainer.bind("plotselected", function (event, ranges) { createFullScreenChart(Instrument, Math.floor(ranges.xaxis.from), Math.ceil(ranges.xaxis.to)); });
+    //Reset zoom level on right-click
+    chartContainer.bind("contextmenu", function () { createFullScreenComparison(Instrument1, 0, new Date().getTime()); return false; });
+
+    //Bind the chart tooltip
+    chartContainer.bind("plothover", function (event, pos, item) {
+      if (!pos.x || !pos.y) { return; }
+      if (item) {
+        let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
+        let y = item.datapoint[1].toFixed(2);
+        let content = x + " = " + y;
+
+        let o = plot.getPlotOffset();
+        let t = o.top;
+        let l = o.left;
+
+        //let tt = $("#" + chartContainerID + " .chart-tooltip");
+        let tt = chartContainer.children(".chart-tooltip");
+        if (tt.length > 0) {
+          tt.html(content).css({ top: t, left: l }).fadeIn(200);
+        } else {
+          tt = "<div class='chart-tooltip' style='top: " + t + "; left: " + l + ";'>" + content + "</div>";
+          chartContainer.append(tt).fadeIn(200);
+        }
+      } else {
+        //$("#" + chartContainerID + " .chart-tooltip").fadeOut(1);
+        chartContainer.children(".chart-tooltip").fadeOut(1);
+      }
+    });
+    chartContainer.bind("mouseout", function (event, pos, item) {
+      //$("#chartTooltip").fadeOut(1);
+      chartContainer.children(".chart-tooltip").fadeOut(1);
+    });
+  } else {
+    //console.warn('Not enough data to plot ' + Instrument.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss() + ' to ' + chartContainerID);
+  }
+}
+export function createFullScreenComparisonChart(Instrument1, Instrument2, startDate, endDate) {
+  function getChartDataSubset(Instrument, dateFrom, dateTo) {
+    let result = [];
+    //Single day data can be passed direct
+    if (dateTo - dateFrom <= timespans.oneDay) {
+      result = Instrument.SingleDayData;
+    } else {
+      //Anything over 3 months should only use daily data
+      if (dateTo - dateFrom > ((3 * timespans.oneMonth) + (timespans.oneDay * 4))) {
+        for (let i = 0; i < Instrument.DailyData.length; i++) {
+          let quote = Instrument.DailyData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            result.push(quote);
+          }
+        }
+      } else {
+        //Get all in-date-range intraday data
+        let foundDates = { min: new Date().getTime(), max: 0 }
+        for (let i = 0; i < Instrument.IntradayData.length; i++) {
+          let quote = Instrument.IntradayData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
+            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
+            result.push(quote);
+          }
+        }
+        //Back-fill with daily data if the intraday data doesn't cover the whole date range
+        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
+        if (minFoundDate > dateFrom) {
+          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
+            let quote = Instrument.DailyData[i];
+            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
+              result.unshift(quote);
+            }
+          }
+        }
+      }
+    }
+
+    return result;
+  }
+  function transformAndSummariseData(chartData, priceType) {
+    let seriesData = [];
+
+    //Summarise the data and transform values to percentage if required
+    let summaryData = {
+      StartDT: chartData[0].DT,
+      EndDT: chartData[chartData.length - 1].DT,
+      Open: chartData[0].open,
+      High: chartData[0].high,
+      HighDT: chartData[0].DT,
+      Low: chartData[0].low,
+      LowDT: chartData[0].DT,
+      Close: chartData[chartData.length - 1].close
+    };
+    let basePrice = summaryData.Open;
+    for (let i = 0; i < chartData.length; i++) {
+      let entry = chartData[i];
+      if (summaryData.High < entry.high) {
+        summaryData.High = entry.high;
+        summaryData.HighDT = entry.DT;
+      }
+      if (summaryData.Low > entry.low) {
+        summaryData.Low = entry.low;
+        summaryData.LowDT = entry.DT;
+      }
+      if (priceType == 'percent') {
+        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
+      } else {
+        seriesData.push([entry.DT, entry.close]);
+      }
+    }
+    return { summaryData: summaryData, seriesData: seriesData };
+  }
+
+  let chartContainerID = 'divFullScreenChart';
+
+  let instrument1Data = getChartDataSubset(Instrument1, startDate, endDate);
+  let instrument2Data = getChartDataSubset(Instrument2, startDate, endDate);
+
+  if (instrument1Data.length > 1 && instrument2Data.length > 1) {
+    let sd = transformAndSummariseData(instrument1Data, 'percent');
+    let price1Data = sd.seriesData;
+    let price1Summary = sd.summaryData;
+    sd = transformAndSummariseData(instrument2Data, 'percent');
+    let price2Data = sd.seriesData;
+    let price2Summary = sd.summaryData;
+
+    let series = [{ name: Instrument1.InstrumentName + '(' + Instrument1.Symbol + ')', type: 'line', color: 'blue', lineWidth: 1, data: price1Data },
+                  { name: Instrument2.InstrumentName + '(' + Instrument2.Symbol + ')', type: 'line', color: 'yellow', lineWidth: 1, data: price2Data }];
+
+    //Draw the chart
+    let chartTimespan = endDate - startDate;
+    let xAxisBreaks = [];
+    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
+      xAxisBreaks = generateAxisBreaks(series[0].data, timespans.oneHour, timespans.oneHour);
+    }
+
+    let chart = Highcharts.chart(chartContainerID, {
+      series: series,
+      chart: {
+        backgroundColor: 'rgba(0,0,0,0)',
+        zoomType: 'x'
+      },
+      title: { text: undefined },
+      legend: {
+        itemStyle: { color: '#b0b0b0' }
+      },
+      xAxis: [{
+        type: 'datetime',
+        lineColor: '#505050',
+        tickColor: '#505050',
+        min: chartTimespan > timespans.oneDay ? price1Summary.StartDT : startDate,
+        max: chartTimespan > timespans.oneDay ? price1Summary.EndDT : endDate,
+        breaks: xAxisBreaks,
+        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small' */ } }
+      }],
+      yAxis: [{
+        title: {
+          text: 'Price Delta (%)',
+          style: { color: '#b0b0b0' }
+        },
+        gridLineColor: '#505050',
+        labels: { style: { color: '#b0b0b0' /*, fontSize: 'x-small'*/ } }
+      }],
+      credits: { enabled: false }
+    });
+
+  } else {
+    chartContainer.html('Not enough data to plot ' + Instrument1.Symbol + ' vs ' + Instrument2.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss());
+  }
+}
+export function createFullScreenComparisonChart_Flot(Instrument1, Instrument2, startDate, endDate) {
+  function getChartDataSubset(Instrument, dateFrom, dateTo) {
+    let result = [];
+    //Single day data can be passed direct
+    if (dateTo - dateFrom <= timespans.oneDay) {
+      result = Instrument.SingleDayData;
+    } else {
+      //Anything over 3 months should only use daily data
+      if (dateTo - dateFrom > ((3 * timespans.oneMonth) + (timespans.oneDay * 4))) {
+        for (let i = 0; i < Instrument.DailyData.length; i++) {
+          let quote = Instrument.DailyData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            result.push(quote);
+          }
+        }
+      } else {
+        //Get all in-date-range intraday data
+        let foundDates = { min: new Date().getTime(), max: 0 }
+        for (let i = 0; i < Instrument.IntradayData.length; i++) {
+          let quote = Instrument.IntradayData[i];
+          if (quote.DT >= dateFrom && quote.DT <= dateTo) {
+            if (quote.DT > foundDates.max) foundDates.max = quote.DT;
+            if (quote.DT < foundDates.min) foundDates.min = quote.DT;
+            result.push(quote);
+          }
+        }
+        //Back-fill with daily data if the intraday data doesn't cover the whole date range
+        let minFoundDate = new Date(foundDates.min).setHours(0, 0, 0);
+        if (minFoundDate > dateFrom) {
+          for (let i = Instrument.DailyData.length - 1; i > 0; i--) {
+            let quote = Instrument.DailyData[i];
+            if (quote.DT >= dateFrom && quote.DT < minFoundDate) {
+              result.unshift(quote);
+            }
+          }
+        }
+      }
+    }
+
+    return result;
+  }
+  function transformAndSummariseData(chartData, priceType) {
+    let seriesData = [];
+
+    //Summarise the data and transform values to percentage if required
+    let summaryData = {
+      StartDT: chartData[0].DT,
+      EndDT: chartData[chartData.length - 1].DT,
+      Open: chartData[0].open,
+      High: chartData[0].high,
+      HighDT: chartData[0].DT,
+      Low: chartData[0].low,
+      LowDT: chartData[0].DT,
+      Close: chartData[chartData.length - 1].close
+    };
+    let basePrice = summaryData.Open;
+    for (let i = 0; i < chartData.length; i++) {
+      let entry = chartData[i];
+      if (summaryData.High < entry.high) {
+        summaryData.High = entry.high;
+        summaryData.HighDT = entry.DT;
+      }
+      if (summaryData.Low > entry.low) {
+        summaryData.Low = entry.low;
+        summaryData.LowDT = entry.DT;
+      }
+      if (priceType == 'percent') {
+        seriesData.push([entry.DT, ((entry.close / basePrice) - 1) * 100]);
+      } else {
+        seriesData.push([entry.DT, entry.close]);
+      }
+    }
+    return { summaryData: summaryData, seriesData: seriesData };
+  }
+
+  let chartContainerID = 'divFullScreenChart';
+  let chartContainer = $("#" + chartContainerID);
+
+  let priceType = 'percent';
+  let instrument1Data = getChartDataSubset(Instrument1, startDate, endDate);
+  let instrument2Data = getChartDataSubset(Instrument2, startDate, endDate);
+
+  if (instrument1Data.length > 1 && instrument2Data.length > 1) {
+    let sd = transformAndSummariseData(instrument1Data, priceType);
+    let price1Data = sd.seriesData;
+    let price1Summary = sd.summaryData;
+    sd = transformAndSummariseData(instrument2Data, priceType);
+    let price2Data = sd.seriesData;
+    let price2Summary = sd.summaryData;
+
+    let series = [{ label: Instrument1.InstrumentName + '(' + Instrument1.Symbol + ')', data: price1Data, color: 'blue', /*yaxis: 1,*/ shadowSize: 0, lines: { lineWidth: 1 } },
+                  { label: Instrument2.InstrumentName + '(' + Instrument2.Symbol + ')', data: price2Data, color: 'yellow', /*yaxis: 2,*/ shadowSize: 0, lines: { lineWidth: 1 } }];
+
+    //Draw the chart
+    let chartTimespan = endDate - startDate;
+    let gapMap = [];
+    if (chartTimespan > timespans.oneDay && chartTimespan < timespans.oneMonth * 3) {
+      gapMap = generateChartGapMap(series[0].data, timespans.oneHour);
+    }
+    let plot = $.plot(chartContainer, series, {
+      grid: { show: true, hoverable: true, clickable: true, color: 'white', borderColor: '#505050' },
+      selection: { mode: "x" },
+      legend: { show: true, position: "nw", backgroundColor: 'transparent', backgroundOpacity: 0.3 },
+      xaxis: {
+        mode: "time",
+        timezone: 'browser',
+        min: chartTimespan > timespans.oneDay ? price1Summary.StartDT : startDate,
+        max: chartTimespan > timespans.oneDay ? price1Summary.EndDT : endDate,
+        transform: function (v) { return mapChartXValue(v, gapMap); },
+        inverseTransform: function (v) { return unmapChartXValue(v, gapMap); }
+      },
+      yaxes: [{ axisLabel: '% Change', position: 'left' }/*,
+              { axisLabel: Instrument2.InstrumentName + ' (' + Instrument2.Currency + ')', position: 'right' }*/]
+    });
+
+    //Unbind the container from any previously bound events
+    chartContainer.unbind();
+
+    //Bind the plotselected event to allow zooming
+    chartContainer.bind("plotselected", function (event, ranges) { createFullScreenComparisonChart(Instrument1, Instrument2, Math.floor(ranges.xaxis.from), Math.ceil(ranges.xaxis.to)); });
+    //Reset zoom level on right-click
+    chartContainer.bind("contextmenu", function () { createFullScreenComparisonChart(Instrument1, Instrument2, 0, new Date().getTime()); return false; });
+
+    //Bind the chart tooltip
+    chartContainer.bind("plothover", function (event, pos, item) {
+      if (!pos.x || !pos.y) { return; }
+      if (item) {
+        let x = new Date(item.datapoint[0]).yyyymmddhhmmss();
+        let y = item.datapoint[1].toFixed(2);
+        let content = x + " = " + y;
+
+        let o = plot.getPlotOffset();
+        let t = o.top;
+        let l = o.left;
+
+        //let tt = $("#" + chartContainerID + " .chart-tooltip");
+        let tt = chartContainer.children(".chart-tooltip");
+        if (tt.length > 0) {
+          tt.html(content).css({ top: t, left: l }).fadeIn(200);
+        } else {
+          tt = "<div class='chart-tooltip' style='top: " + t + "; left: " + l + ";'>" + content + "</div>";
+          chartContainer.append(tt).fadeIn(200);
+        }
+      } else {
+        //$("#" + chartContainerID + " .chart-tooltip").fadeOut(1);
+        chartContainer.children(".chart-tooltip").fadeOut(1);
+      }
+    });
+    chartContainer.bind("mouseout", function (event, pos, item) {
+      //$("#chartTooltip").fadeOut(1);
+      chartContainer.children(".chart-tooltip").fadeOut(1);
+    });
+
+  } else {
+    chartContainer.html('Not enough data to plot ' + Instrument1.Symbol + ' vs ' + Instrument2.Symbol + ' ' + new Date(startDate).yyyymmddhhmmss() + ' -> ' + new Date(endDate).yyyymmddhhmmss());
+  }
+}
diff --git a/Websites/SharePrices/SharePrices/scripts/SharePrices_Common.js b/Websites/SharePrices/SharePrices/scripts/SharePrices_Common.js
new file mode 100644
index 0000000..d6f9e58
--- /dev/null
+++ b/Websites/SharePrices/SharePrices/scripts/SharePrices_Common.js
@@ -0,0 +1,38 @@
+﻿export var timespans = {
+  oneSecond: 1000,
+  oneMinute: 60 * 1000,
+  oneHour: 60 * 60 * 1000,
+  oneDay: 24 * 60 * 60 * 1000,
+  oneWeek: 7 * 24 * 60 * 60 * 1000,
+  oneMonth: 31 * 24 * 60 * 60 * 1000 };
+
+export function getProfitOrLoss(BasePrice, CurrentPrice, ShowPercent) {
+  //let priceMovement = (CurrentPrice - BasePrice).toFixed(2);
+  let priceMovement = (CurrentPrice - BasePrice).autoDP();
+  let percentMovement = (((CurrentPrice / BasePrice) - 1) * 100).toFixed(1) + '%';
+  if (percentMovement[0] == '-') percentMovement = percentMovement.substring(1);
+  return '<span class="' + (CurrentPrice < BasePrice ? 'loss' : 'profit') + '">' + (CurrentPrice < BasePrice ? '' : '+') + priceMovement + (ShowPercent ? ' (' + percentMovement + ')' : '') + '</span>';
+}
+
+export function generateAxisBreaks(data, maxGapSize, breakSize) {
+  let breaks = [];
+  if (data.length > 1) {
+    let previousX = data[0][0];
+
+    for (let i = 1; i < data.length; i++) {
+      if (data[i][0] != null && data[i][1] != null) {
+        let currentX = data[i][0];
+        if (currentX - previousX > maxGapSize) {
+          let newBreak = {
+            from: previousX,
+            to: currentX,
+            breakSize: breakSize
+          };
+          breaks.push(newBreak);
+        }
+        previousX = currentX;
+      }
+    }
+  }
+  return breaks;
+}
\ No newline at end of file
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.flot.axislabels.js b/Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.axislabels.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.flot.axislabels.js
rename to Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.axislabels.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.flot.crosshair.js b/Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.crosshair.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.flot.crosshair.js
rename to Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.crosshair.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.flot.downsample.js b/Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.downsample.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.flot.downsample.js
rename to Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.downsample.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.flot.js b/Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.flot.js
rename to Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.flot.pie.js b/Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.pie.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.flot.pie.js
rename to Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.pie.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.flot.selection.min.js b/Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.selection.min.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.flot.selection.min.js
rename to Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.selection.min.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.flot.time.min.js b/Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.time.min.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.flot.time.min.js
rename to Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.time.min.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.flot.tooltip.js b/Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.tooltip.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.flot.tooltip.js
rename to Websites/SharePrices/SharePrices/scripts/flot/jquery.flot.tooltip.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery-3.5.1.min.js b/Websites/SharePrices/SharePrices/scripts/jquery/jquery-3.5.1.min.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery-3.5.1.min.js
rename to Websites/SharePrices/SharePrices/scripts/jquery/jquery-3.5.1.min.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery-ui.min.js b/Websites/SharePrices/SharePrices/scripts/jquery/jquery-ui.min.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery-ui.min.js
rename to Websites/SharePrices/SharePrices/scripts/jquery/jquery-ui.min.js
diff --git a/Websites/SharePrices/SharePrices/scripts/jquery.marquee.min.js b/Websites/SharePrices/SharePrices/scripts/jquery/jquery.marquee.min.js
similarity index 100%
rename from Websites/SharePrices/SharePrices/scripts/jquery.marquee.min.js
rename to Websites/SharePrices/SharePrices/scripts/jquery/jquery.marquee.min.js

Col1	Col2	Col3	Col4	Col5	Col6	Col7	Col8	Col9
Value Col 1	Value Col 2	Value Col 3	Value Col 4	Value Col 5	Value Col 6	Value Col 7	Value Col 8	Value Col 9
Value Col 1	- - 30% -	- - 60% -	- - 90% -	Value Col 5	Value Col 6	Value Col 7	Value Col 8	Value Col 9
Value Col 1	Value Col 2	Value Col 3	Value Col 4	Value Col 5	Value Col 6	Value Col 7	Value Col 8	Value Col 9