You must be logged in to post your query.
Home › Forums › Chart Support › Embedded Chart inside another div
Tagged: chart, DIV, embedded, HMTL5, JSON
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
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.
Hope this will help you…..Div Positioning
Chris
You must be logged in to reply to this topic. Login/Register