Tutorial: Chart-me URL API

It is possible to work with a small REST API of the Chart-me library to bring Chart-me inside an iFrame to the frontend.
The REST API is a simple call of an html-site called iframe.html in the root of the chartme folder.

To give the iFrame some informations, you can input some GET paremeters:

GET parameter	Type	Using
Viewport	INT	defines the viewport width of the parent element to fit the chart-me application inside the parent container. Empty if no scaling
ShowSidebar	INT	1 = show sidebar, 0 or empty = hide sidebar
ShowMenuOnTop	INT	1 = show menu at the top, 0 or empty = show menu at the bottom
ShowLogin	INT	1 = show login in the menu, 0 or empty = hide login
ShowPager	INT	1 = show pager in the menu, 0 or empty = hide pager
ShowFilter	INT	1 = show filter in the menu, 0 or empty = hide filter
ShowExport	INT	1 = show export in the menu, 0 or empty = hide export
ShowXLSExport	INT	1 = show XLS export in the menu, 0 or empty = hide XLS export
ShowXLSImport	INT	1 = show XLS import in the menu, 0 or empty = hide XLS import

Communication

To communicate with the iFrame you can use the standard window postMessage method as described here: developer.mozilla.org - Window.postMessage()

Insert an event listener to the window object
define a method for the incoming messages
send messages to the iFrame by using the postMessage method

Here is a list of all messages you can send to the iFrame:

Function	Paremeters	Type
New project	type	"newProject" - required
Open a project from server	type projectID cmdxfData	"openProjectFromServer" - required String - ID of the project saved on the Chart-me server - required JSON - CMDXF Data or null for no data
Open a project by a string	type projectString cmdxfData	"openProjectFromString" - required String - String, associated with the Chart-me project - required JSON - CMDXF Data or null for no data
Gets the projects saved string	type	"getProjectString" - required
Sets CMDXF data	type cmdxfData	"setCMDXFData" - required JSON - CMDXF Data - required

New project

var iFrame = document.getElementById("cm-chartmeFrame").contentWindow;
iFrame.postMessage(encodeURIComponent(JSON.stringify({
    "type":"newProject"
})), "http(s)://origin");

Open a project from server

var iFrame = document.getElementById("cm-chartmeFrame").contentWindow;
iFrame.postMessage(encodeURIComponent(JSON.stringify({
    "type": "openProjectFromServer",
    "projectID": "xxx",
    "cmdxfData": null // {...}
})), "http(s)://origin");

Open a project by a string

var iFrame = document.getElementById("cm-chartmeFrame").contentWindow;
iFrame.postMessage(encodeURIComponent(JSON.stringify({
    "type": "openProjectFromServer",
    "projectString": "xxx",
    "cmdxfData": null // {...}
})), "http(s)://origin");

Gets the projects saved string

var onPostMessage = function(e){
    console.info("Get Message from origin: " + e.origin);
    var result = JSON.parse(decodeURIComponent(e.data));

    if(result.type == "getProjectString"){
        console.info(result.projectString);
    }
};
window.addEventListener("message", onPostMessage, false);

var iFrame = document.getElementById("cm-chartmeFrame").contentWindow;
iFrame.postMessage(encodeURIComponent(JSON.stringify({
    "type": "getProjectString"
})), "http(s)://origin");

Sets CMDXF data

var iFrame = document.getElementById("cm-chartmeFrame").contentWindow;
iFrame.postMessage(encodeURIComponent(JSON.stringify({
    "type": "setCMDXFData",
    "cmdxfData": {...}
})), "http(s)://origin");

Example

<script>
    var initChartme = function(){
        // Receive Message
        var onPostMessage = function(_Event){
            console.info("Message from origin: " + _Event.origin);
            console.info(JSON.parse(decodeURIComponent(_Event.data)));
        };

        window.addEventListener("message", onPostMessage, false);

        // Send Message
        document.getElementById("cm-chartmeFrame").contentWindow.postMessage(encodeURIComponent(JSON.stringify({
            "type": "...",
            ...
        })), "http(s)://orgin");
    }
</script>

<iframe id='cm-chartmeFrame' src='https://path-to-chartme/iframe.html?ShowSidebar=1&ShowExport=1&ShowLogin=1' onload='initChartme();'> </iframe>

Sample data

You can download the following example file to see, how to work with the iframe

urlapi.zip