Home forums Using CanvasJS setting document.domain locks chart

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  enrico.g 5 days, 20 hours ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #15194

    enrico.g
    Member

    Hello,
    I am using CanvasJS charts and they are really great.
    I load the chart in an iframe where, for a reason not depending on the chart, I need to change the domain of the iframe.

    When I add the document.domain script the chart doesn’t load anymore.

    I found out that it doesn’t depend on the domain change itself, but on the function call.

    Adding

    
    var d=document.domain;
    document.domain=d;

    before the chart is enaugh for prevent it from working.

    Have you already experienced anything like that?

    Thank you very much

    jsfiddle link

    <script async src=”//jsfiddle.net/QwZuf/690/embed/”></script>

    #15208

    Bivek Singh
    Moderator

    @enrico-g

    The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. For further details please refer the following links:
    [1]. Same Origin Ploicy
    [2]. Stackoverflow thread

    —-
    Bivek Singh

    #15210

    enrico.g
    Member

    I don’t think the problem can be the cross sites scripting policy, in fact, calling

    var d=document.domain;
    document.domain=d;

    doesn’t change the domain.
    Probably the problem is the call itself.

    #15292

    Bivek Singh
    Moderator

    enrico,

    We couldn’t reproduce the issue while running from local server. Can you please send us a sample project in which the issue exists and the steps to reproduce it?

    —-
    Bivek Singh

    #15397

    enrico.g
    Member

    In my example, but also in jsfiddle (//jsfiddle.net/QwZuf/690) you can reproduce the issue adding the 2 lines at the top of the scripts, before the “var chart” declaration:

    var d=document.domain;
    document.domain=d;
    
    var chart = new CanvasJS.Chart("chartContainer",
    {        
    	data: [
    	{
    		type: "column",
    		dataPoints: [
    			{ x: 10, y: 100 },
    			{ x: 20, y: 55 },
    			{ x: 30, y: 50 },
    			{ x: 40, y: 65 },
    			{ x: 50, y: 95 },
    			{ x: 60, y: 68 },
    			{ x: 70, y: 28 },
    			{ x: 80, y: 34 },
    			{ x: 90, y: 14 }
    		]
    	}					
    	]
    });
    
    chart.render();

    In my case I had to set the document.domain in order to let other functions work, so I “solved” the problem using a workaround and I reload the page after the other scripts are executer:

    document.domain="<%=Constants.JS_DOCUMENT_DOMAIN %>";
    //var d = document.domain;
    //functions that need the document.domain set
    window.parent.document.getElementById('idmenu1').classList.add('current');
    window.parent.document.getElementById('idmenu2').classList.remove('current');
    window.parent.getMenu('menu3');
    //document.domain=d;//function commented, it's the one preventing chart from working
    //reload
    window.parent.loadPortafoglioModello('<%=portafoglioModello.getId()%>');

    Thank you for your help

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.