Home Forums Chart Support Embedded Chart inside another div

Embedded Chart inside another div

Viewing 3 posts - 1 through 3 (of 3 total)
  • #4708

    Hi,
    I am struggling to get a chart to render when I place it inside a div. I am using a straight forward configuration:

    <script type=”text/javascript”>
    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”, {
    theme: “BASRAGTheme”,
    data: [//array of dataSeries
    { //dataSeries object

    /*** Change type “column” to “bar”, “area”, “line” or “pie”***/
    type: “pie”,
    dataPoints: [
    { label: “Red”, y: 18 },
    { label: “Amber”, y: 29 },
    { label: “Green”, y: 40 }
    ]
    }
    ]
    });
    chart.render();
    }
    </script>

    HTML bit:

    <div class=”sixteen columns”>
    <ul id=”tabs”>
    <li><a href=”#” title=”tab1″>Survey Results</a<</li>
    <li><a href=”#” title=”tab2″>Sentiment Analysis</a></li>
    </ul>
    <div id=”content”>
    <div id=”tab1″>
    <div id=”chartContainer” style=”height: 500px; width: 400px;”> </div>
    </div>
    <div id=”tab2″>Loading other Content</div>
    </div>
    </div>

    if I move the line <div id=”chartContainer” style=”height: 500px; width: 400px;”> </div> to in the body tags it works absolutely fine!

    Any thoughts?

    Many thanks in advance

    • This topic was modified 11 years, 3 months ago by Sunil Urs.
    • This topic was modified 11 years, 3 months ago by Sunil Urs. Reason: Fixed some formatting issue
    #4711

    Hi,

    Am not able to reproduce the issue with the above code. I also added skeleton css framework but its still working fine (I guess you are using skeleton let me know if its something else).

    If you can create a fiddle for the same, that would be helpful.

    #8342

    Hope this will help you…..Div Positioning

    Chris

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

You must be logged in to reply to this topic.