Using CanvasJS with bootstrap

[akluthe]

Hello,

I am just getting started with CanvasJS and I am having trouble rendering charts within boostrap containers.

My charts work fine when they are just pages with charts per the examples, but if I try to use the same working chart on a page with bootstrap css and js files, I cannot get it to render.

Any tips on how to get charts working in bootstrap elements?

Kind regards,

Andrew K.

[Sunil Urs]

CanvasJS requires the container’s height and width to be set in order to render. While BootStrap sets width of the container based on the class(span6, span10, etc) that you set, it doesn’t set the height. Hence the problem. Just set the height of the container (or Chart) and it should work fine.

<div class=”span10″ id=”chartContainer” style=”height: 400px;”></div>

[blackjack1234]

I’ve tried this in a pretty vanilla bootstrap theme and just can’t get it to work. The container is there at” whatever size I specify but no data.

The same code works and presents data in a basic HTML5 page but just can’t get it to work in Bootstrap

<div class=”row”>
<div class=”span12″>

<script type=”text/javascript” src=”canvasjs.min.js”></script>
<script type=”text/javascript”>
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”, {
data: [
{
type: “bar”,
dataPoints: [
{ x: 10, y: 10 },
{ x: 20, y: 15 },
{ x: 30, y: 25 },
{ x: 40, y: 30 },
{ x: 50, y: 28 }
]
}
]
});

chart.render();
}
</script>

<div class=”span10″ id=”chartContainer” style=”height: 400px;”></div>

</div>
</div>

What else do I need to change?

[Sunil Urs]

I think the issue is most probably because the onload event has fired even before your script tag is executed. So instead of placing the script tag inside the div element place it just before the end of head tag. Entire CanvasJS website uses Bootstrap.

Also, onload is not the best way to go. We are using onload in all the examples just to keep it simple and so that we don’t rely on any other libraries. Better approach is to use jQuery’s ready method.

—
Sunil Urs