Home forums Using CanvasJS Using CanvasJS with bootstrap

Tagged: 

This topic contains 3 replies, has 3 voices, and was last updated by  Sunil Urs 3 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #4600

    akluthe
    Participant

    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.

    #4603

    Sunil Urs
    Keymaster

    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>

    #5320

    blackjack1234
    Participant

    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?

    #5322

    Sunil Urs
    Keymaster

    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

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

You must be logged in to reply to this topic.