chart display question

[xwei]

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

[Manoj Mohan]

@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