Using chart js within Bootstrap Carousel

Question

 //Sampel Line Chart 
 var LineChartSampleData = {
  labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
  datasets: [{
   label: "Sales 1",
   fillColor: "transparent",
   strokeColor: "rgba(220,220,220,1)",
   pointColor: "rgba(220,220,220,1)",
   pointStrokeColor: "#fff",
   pointHighlightFill: "#fff",
   pointHighlightStroke: "rgba(220,220,220,1)",
   data: [11, 12, 13, 14, 15, 16, 17]
  }, {
   label: "Sales 5",
   fillColor: "transparent",
   strokeColor: "rgba(236, 80, 80,1)",
   pointColor: "rgba(236, 80, 80,1)",
   pointStrokeColor: "#fff",
   pointHighlightFill: "#fff",
   pointHighlightStroke: "rgba(236, 80, 80,1)",
   data: [15, 21, 35, 42, 33, 33, 81]
  }]
 };

 
 //Sampel Bar Chart
 var BarChartSampleData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};


//Sampel Radar Chart
var RadarChartSampleData = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};

//Sampel Polor Chart
var PolarChartSampleData = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }

];

//Sampel Pie Doughnut Chart
var PieDoughnutChartSampleData = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
]

 window.onload = function() {

  window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
   responsive:true
  });
  
  window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
   responsive:true
  });
  
  window.RadarChartSample = new Chart(document.getElementById("radar-chart-sample").getContext("2d")).Radar(RadarChartSampleData,{
   responsive:true
  });
  
  window.PolarChartSample = new Chart(document.getElementById("polar-chart-sample").getContext("2d")).PolarArea(PolarChartSampleData,{
   responsive:true
  });
  
  window.PieChartSample = new Chart(document.getElementById("pie-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
   responsive:true
  });
  window.DoughnutChartSample = new Chart(document.getElementById("doughnut-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
   responsive:true
  });
  

 };

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol> 
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item item1">
      <canvas id="bar-chart-sample" height="80"></canvas>
      <ul class="doughnut-chart-legend">
         <li class="mobile ultra-small"><span class="legend-color"></span>Mobile</li>
         <li class="kitchen ultra-small"><span class="legend-color"></span> Kitchen</li>
         <li class="home ultra-small"><span class="legend-color"></span> Home</li>
     </ul>
    </div>
    <div class="item item2">
    <canvas id="line-chart-sample" height="80"></canvas>
    </div>
    <div class="item">
    <canvas id="line-chart-sample" height="80"></canvas>
    </div>
  </div>
  <hr class="transition-timer-carousel-progress-bar" />
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

I have a problem with Chart Js within Bootstrap Carousel, its not show because chart not load, it show with width:0px and height:0px. Ive been working around this thing in last few hours, hope you guys can help me

This is my Html :

 <div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol> 
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item item1">
          <canvas id="bar-chart-sample" height="80"></canvas>
          <ul class="doughnut-chart-legend">
             <li class="mobile ultra-small"><span class="legend-color"></span>Mobile</li>
             <li class="kitchen ultra-small"><span class="legend-color"></span> Kitchen</li>
             <li class="home ultra-small"><span class="legend-color"></span> Home</li>
         </ul>
        </div>
        <div class="item item2">
        <canvas id="line-chart-sample" height="80"></canvas>
        </div>
        <div class="item">
        </div>
      </div>
      <hr class="transition-timer-carousel-progress-bar" />
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

Chart JS:

      //Sampel Line Chart 
         var LineChartSampleData = {
          labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
          datasets: [{
           label: "Sales 1",
           fillColor: "transparent",
           strokeColor: "rgba(220,220,220,1)",
           pointColor: "rgba(220,220,220,1)",
           pointStrokeColor: "#fff",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "rgba(220,220,220,1)",
           data: [11, 12, 13, 14, 15, 16, 17]
          }, {
           label: "Sales 5",
           fillColor: "transparent",
           strokeColor: "rgba(236, 80, 80,1)",
           pointColor: "rgba(236, 80, 80,1)",
           pointStrokeColor: "#fff",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "rgba(236, 80, 80,1)",
           data: [15, 21, 35, 42, 33, 33, 81]
          }]
         };


     var BarChartSampleData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };

 window.onload = function() {

  window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
   responsive:true
  });

  window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
   responsive:true
  });
 };

Thanks for your help,Cheers!

You're using `id="line-chart-sample"` twice. Element id should be unique. — raz, Nov 02 '16 at 17:48
yep,my fault, changed it but still not working. any ideas? @raz — Mollvi Aufar Mudzakir, Nov 02 '16 at 17:50
Have you tried checking if it works when it's not within bootstrap carousel? What steps have you done to isolate the problem? Can you provide a https://jsfiddle.net/ sample of your work so it can be easier for us to find a solution. — raz, Nov 02 '16 at 17:56

raz · Accepted Answer · 2016-11-02T20:20:41.277

Here's a revised version your code. I assumed you are using Chartjs 1.0.2.

HTML: (same html just removed empty <div class="item"></div>)

CHARTJS:

function generateChart() {

    var LineChartCanvas = $("#line-chart-sample").get(0).getContext("2d");
    var LineChartSample = new Chart(LineChartCanvas);

    var LineChartSampleData = {
    labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
    datasets: [
        {
        label: "Sales 1",
        fillColor: "transparent",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [11, 12, 13, 14, 15, 16, 17]
        }, 
        {
        label: "Sales 5",
        fillColor: "transparent",
        strokeColor: "rgba(236, 80, 80,1)",
        pointColor: "rgba(236, 80, 80,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(236, 80, 80,1)",
        data: [15, 21, 35, 42, 33, 33, 81]
        }
        ]
    };
    LineChartSample.Line(LineChartSampleData);

    //Bar Chart Sample        
    var BarChartCanvas = $("#bar-chart-sample").get(0).getContext("2d");
    var BarChartSample = new Chart(BarChartCanvas);

    var BarChartSampleData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
            {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };
    BarChartSample.Bar(BarChartSampleData);
};
generateChart();

Now since you are using bootstrap carousel, only the item with an active class is displayed. Chartjs can't generate chart for hidden canvas elements.

One work around would be generating the charts once an event is triggered.

Like this:

function resetChart() {
    //Reset chart data 
    $('canvas').remove();
    $('.item2').prepend('<canvas id="line-chart-sample" height="80"></canvas>');
    $('.item1').prepend('<canvas id="bar-chart-sample" height="80"></canvas>');

    generateChart();
}

$(document).on('click', '.carousel-control', function () {
    resetChart();
});

Now I'm not sure if this is the best way of working around this issue. But it works.

UPDATE:

Slide animation

$('#myCarousel').carousel({
    interval: 2000,
    cycle: true
});

Call function once slide method has completed transition

$('#myCarousel').on('slid.bs.carousel', function () {
    resetChart();
})

See it working here: JSfiddle Demo

Thanks mate, its worked for me now :) Btw, is that any possible way that chart being load without trigger? because i need that chart being load in bootstrap carousel auto slide — Mollvi Aufar Mudzakir, Nov 02 '16 at 20:01
Wow,thank you so so much! you saved my life once again :) thanks mate @raz — Mollvi Aufar Mudzakir, Nov 03 '16 at 00:49

Using chart js within Bootstrap Carousel

1 Answers1