CodePen Embed - Saving chart content to in-memory storage using save_load

Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <title>TradingView Charting Library demo</title>
​
    <!-- Fix for iOS Safari zooming bug -->
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
    />
​
    <script
      type="text/javascript"
      src="https://trading-terminal.tradingview-widget.com/charting_library/charting_library.standalone.js"
    ></script>
    <script
      type="text/javascript"
      src="https://trading-terminal.tradingview-widget.com/datafeeds/udf/dist/bundle.js"
    ></script>
    <script
      type="text/javascript"
      src="https://trading-terminal.tradingview-widget.com/broker-sample/dist/bundle.js"
    ></script>
​
    <script type="text/javascript" src="script.js"></script>
  </head>
​
  <body style="margin: 0px">
    <div id="tv_chart_container"></div>
  </body>
</html>
​

Live

xxxxxxxxxx
 
function initOnReady() {
  const datafeed = new Datafeeds.UDFCompatibleDatafeed(
    "https://demo-feed-data.tradingview.com"
  );
  var widget = (window.tvWidget = new TradingView.widget({
    library_path:
      "https://trading-terminal.tradingview-widget.com/charting_library/",
    // debug: true, // uncomment this line to see Library errors and warnings in the console
    fullscreen: true,
    symbol: "AAPL",
    interval: "1D",
    container: "tv_chart_container",
    datafeed: datafeed,
    locale: "en",
    disabled_features: ["order_panel", "trading_account_manager"],
​
    save_load_adapter: {
      charts: [],
      studyTemplates: [],
      drawingTemplates: [],
      chartTemplates: [],
      drawings: {},
​
      getAllCharts: function () {
        return Promise.resolve(this.charts);
      },
​
      removeChart: function (id) {
        for (var i = 0; i < this.charts.length; ++i) {
          if (this.charts[i].id === id) {
            this.charts.splice(i, 1);
            return Promise.resolve();
          }
        }
        return Promise.reject();
      },
​
      saveChart: function (chartData) {
        if (!chartData.id) {
          chartData.id = Math.random().toString();
        } else {
          this.removeChart(chartData.id);
        }
        
        const savedChartData = {
            ...chartData,
            id: chartData.id,
            timestamp: Math.round(Date.now() / 1000),
        };
​
        this.charts.push(savedChartData);
​
        return Promise.resolve(chartData.id);
      },
​
      getChartContent: function (id) {
        for (var i = 0; i < this.charts.length; ++i) {
          if (this.charts[i].id === id) {
            return Promise.resolve(this.charts[i].content);
          }
        }
​
        console.error("error");
​
        return Promise.reject();
      },
​
      removeStudyTemplate: function (studyTemplateData) {
        for (var i = 0; i < this.studyTemplates.length; ++i) {
          if (this.studyTemplates[i].name === studyTemplateData.name) {
            this.studyTemplates.splice(i, 1);
            return Promise.resolve();
          }
        }
​
        return Promise.reject();
      },
​
      getStudyTemplateContent: function (studyTemplateData) {
        for (var i = 0; i < this.studyTemplates.length; ++i) {
          if (this.studyTemplates[i].name === studyTemplateData.name) {
            return Promise.resolve(this.studyTemplates[i].content);
          }
        }
​
        console.error("st: error");
​
        return Promise.reject();
      },
​
      saveStudyTemplate: function (studyTemplateData) {
        for (var i = 0; i < this.studyTemplates.length; ++i) {
          if (this.studyTemplates[i].name === studyTemplateData.name) {
            this.studyTemplates.splice(i, 1);
            break;
          }
        }
​
        this.studyTemplates.push(studyTemplateData);
        return Promise.resolve();
      },
​
      getAllStudyTemplates: function () {
        return Promise.resolve(this.studyTemplates);
      },
​
      removeDrawingTemplate: function (toolName, templateName) {
        for (var i = 0; i < this.drawingTemplates.length; ++i) {
          if (this.drawingTemplates[i].name === templateName) {
            this.drawingTemplates.splice(i, 1);
            return Promise.resolve();
          }
        }
​
        return Promise.reject();
      },
​
      loadDrawingTemplate: function (toolName, templateName) {
        for (var i = 0; i < this.drawingTemplates.length; ++i) {
          if (this.drawingTemplates[i].name === templateName) {
            return Promise.resolve(this.drawingTemplates[i].content);
          }
        }
​
        console.error("drawing: error");
​
        return Promise.reject();
      },
​
      saveDrawingTemplate: function (toolName, templateName, content) {
        for (var i = 0; i < this.drawingTemplates.length; ++i) {
          if (this.drawingTemplates[i].name === templateName) {
            this.drawingTemplates.splice(i, 1);
            break;
          }
        }
​
        this.drawingTemplates.push({ name: templateName, content: content });
        return Promise.resolve();
      },
​
      getDrawingTemplates: function () {
        return Promise.resolve(
          this.drawingTemplates.map(function (template) {
            return template.name;
          })
        );
      },
​
      async getAllChartTemplates() {
        return this.chartTemplates.map((x) => x.name);
      },
​
      async saveChartTemplate(templateName, content) {
        const theme = this.chartTemplates.find((x) => x.name === templateName);
​
        if (theme) {
          theme.content = content;
        } else {
          this.chartTemplates.push({ name: templateName, content });
        }
      },
​
      async getChartTemplateContent(templateName) {
        const theme = {};
​
        const content = this.chartTemplates.find((x) => x.name === templateName)
          ?.content;
​
        if (content) {
          theme.content = structuredClone(content);
        }
​
        return theme;
      },
​
      // saveLineToolsAndGroups is only required if the `saveload_separate_drawings_storage` featureset is enabled
      saveLineToolsAndGroups(layoutId, chartId, state) {
        const drawings = state.sources;
​
        if (!this.drawings[this._getDrawingKey(layoutId, chartId)]) {
          this.drawings[this._getDrawingKey(layoutId, chartId)] = {};
        }
​
        for (let [key, state] of drawings) {
          if (state === null) {
            delete this.drawings[this._getDrawingKey(layoutId, chartId)][key];
          } else {
            this.drawings[this._getDrawingKey(layoutId, chartId)][key] = state;
          }
        }
        return Promise.resolve();
      },
​
      // loadLineToolsAndGroups is only required if the `saveload_separate_drawings_storage` featureset is enabled
      loadLineToolsAndGroups(layoutId, chartId, requestType, requestContext) {
        const rawSources = this.drawings[
          this._getDrawingKey(layoutId, chartId)
        ];
        if (!rawSources) return null;
        const sources = new Map();
​
        for (let [key, state] of Object.entries(rawSources)) {
          sources.set(key, state);
        }
        return Promise.resolve({
          sources
        });
      },
​
      _getDrawingKey(layoutId, chartId) {
        return `${layoutId}/${chartId}`;
      }
    }
  }));
}
​
window.addEventListener("DOMContentLoaded", initOnReady, false);
​

This Pen is owned by TradingView on CodePen.

See more by @tradingview on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.