[Chartjs]-Charts.js & Bootstrap Accordion

by

2👍

✅

I got it to work with the following code:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <canvas id="q_chart" width="400" height="400"></canvas>
      </div>
    </div>
  </div>
</div>

and javascript

var ctx = document.getElementById("q_chart").getContext("2d");
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    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, 80, 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, 86, 27, 90]
    }]
};
var MyNewChart=null;
$('#collapseOne').on('shown.bs.collapse', function () {
  setTimeout(function() {
      if(MyNewChart == null)
          MyNewChart = new Chart(ctx).Bar(data);
  },200);
});

1👍

I did some testing and found that you can call MyNewChart.update() instead of recreating the chart on a timeout as the verified answer does. The first transition is a bit rough (maybe because a transition is happening as it’s created) but after that the transitions are smooth.

Example JSFiddle: https://jsfiddle.net/akh9cnx5/

<div class="container">
    <button type="button" class="col-12 btn btn-light mb-2" data-toggle="collapse" data-target="#viewgraph" aria-expanded="false" aria-controls="viewgraph">View Graph</button>
    <div id="viewgraph" class="collapse mb-2">
        <div class="card card-body">
            <div class="d-flex justify-content-center">
                <div class="col-12 col-sm-8">
                    <canvas id="graph"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

and javascript

var ctx = document.getElementById('graph').getContext('2d');

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  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, 80, 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, 86, 27, 90]
  }]
};

var myNewChart = new Chart(ctx, {
  type: 'bar',
  data: data
});

$("#viewgraph").on('shown.bs.collapse', function () {
  myNewChart.update();
});

0👍

For anyone coming to this later, I had the same issue but preferred not to rely on a timer delay as offered in the accepted answer. The following is what worked for me using Bootstrap 3.3.7 with the shown event:

shown.bs.collapse

$('#accordion').on('shown.bs.collapse', function (e) {

            switch (e.target.id)
            {
                case "panel1": ShowChart1(); break;
                case "panel2": ShowChart2(); break;
                case "panel3": ShowChart3(); break;
                case "panel4": ShowChart4(); break;
                default: ShowDefault();
            }

        })

Hopes this helps

btw – this is the above code working: greatdata.com/stats/newyork_ny

Leave a comment