Importing and exporting user data

Please note that the web components sample template (chartiq.html) also contains a fully functional storage manager web-component. If you are using web components, see this tutorial instead Importing and exporting chart layouts in chartiq template, as the methods will differ.

The library provides methods for importing and exporting all chart and user settings.

This tutorial discusses how to define the storage locations for user settings such as views, watch lists, color themes and time zone. Please see Importing and exporting chart layouts to learn about storage of drawings and current layout.

All user settings are saved using STX.StorageManager.

This class includes generic methods that transact name-value pairs in JSON format. By default, it uses browser localStorage, but it can be overwritten to link with an external interface such as a database or web service. To do this, the remove(), get() and store() functions will need to be overwritten to connect to the designation of your choice . You will need to introduce your own code to identify each user and create a user+setting unique key in your dataStore.

You can of course have logic in these function to load/store the different components on different storage locations based on the key value being sent.


    if (key == "stx-watchLists") {
        // store/load/delete on database 1
    } else if key == "stx-views" {
        // store/load/delete  via a web service
    } else if key == "themes" {
        // store/load/delete on to a different location
    } else {
        //store using default localStorage

The default functions are as follows. You will need to change them to point to your storage facility.

            // Add your code here to connect to your storage location and retrieve the data and set it as your `return` value.
            // You will need code here to identify the user and create a unique key for proper retrieval.
            if(!STX.localStorage) return null;
            var datum=STX.localStorage.getItem(key);
            return datum;
        };, value){
            // Add your code here to connect to your storage location and save the data from the `value` parameter.
            // You will need code here to identify the user and create a unique key for subsequent retrieval .
            STX.localStorage.setItem(key, value);
            // Add your code here to remove the entry for the indicated key in your storage location. Don't forget to identify the user in the key.

That is all that is needed. The formating, importing and exporting is all handled internally once STX.StorageManager has been programmed to get data from and store it into your storage location.

For your reference, these are the Keys being used for each setting: Watch Lists:

key: "stx-watchLists"


key: "stx-views"


key: "themes"

Time Zone

key: "timezone"

Local Storage and Safari

Note: when using Safari, the use of local storage may be restricted depending on your particular setup and the browser's settings. Safari does not retain localStorage on a page that is in an iframe from a different domain. If this is how you are setting up the charts, you must ensure your user's browsers are properly configured. To enable local storage functionality, click the "Safari" menu and go to "Preferences". Under the "Privacy" tab select "Always allow" for "Cookies and website data".

Safari Privacy