Embedded Chart inside another div

[jgbambrough]

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, 5 months ago by Sunil Urs.
• This topic was modified 11 years, 5 months ago by Sunil Urs. Reason: Fixed some formatting issue

[Sunil Urs]

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.

[chriselviss]

Hope this will help you…..Div Positioning

Chris