Home forums Using CanvasJS chart display question

This topic contains 1 reply, has 2 voices, and was last updated by  Manoj Mohan 2 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26590

    Hi,

    I have problems to display a cancasjs chart. a JSFiddle example is here: http://jsfiddle.net/xwei01/3vrnd71k/34/

    Works (on tab1):
    <script>
    document.getElementById(‘test1’).innerHTML = ‘<p>hello<\p>’+'<div id=”chartContainer” style=”height: 360px; width: 100%;”></div>’;
    </script>

    Cannot be displayed (after clicking tab2):
    function display(evt, tabID) {
    var text = document.getElementById(tabID);
    if(tabID == “test2″){
    text.innerHTML = ‘<p>Hello world</p><p>vvv Is any chart displayed below? vvv</p>’
    +'<div id=”chartContainer” style=”height: 360px; width: 100%;”></div>’
    +'<p>^^^ Is any chart displayed above? ^^^</p>’;
    }
    }

    Any suggestions?
    Thank you

    #26607

    @xwei,

    The innerHTML property allows reading and replacing everything within a given DOM element (HTML tag). In order to render a chart inside a div, you need to pass a unique id of div or DOM element of the div to CanvasJS.chart().

    Using two div containers with a unique id and calling render method for the respective chart on the selected tab should work fine in your case. Please take a look at this JSFiddle. Also, refer this JSFiddle for an example on charts within Bootstrap tabs.

    —-
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.