Mollvi Aufar Mudzakir Mollvi Aufar Mudzakir - 1 month ago 16
HTML Question

Using chart js within Bootstrap Carousel



//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!

raz raz
Answer

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:

$(document).on('click', '.carousel-control', function () {
    //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();
});

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

See it working here: JSfiddle Demo