Chart.JS does not appear in bootstrap mode!

Question

Chart.JS does not appear in bootstrap mode!

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I want to show statistics on what percentages of each answer given in a survey question I'm designing here. I studied and saw several tutorials on how to use Charts.JS. It works normally if you create a separate page. But in this particular case I need the graph (in the form of Pizza) to appear in a Bootstrap Modal. But I can not do it at all. The modal is left blank, and only the line chart of the Chart.JS documentation itself works.

I'm using the following code:

<canvas id="myChart" width="300" height="300"></canvas>

<script type="text/javascript">$('#ModalPadrao3').on('shown.bs.modal', function () {
var option = {
    responsive: true,
};
    var data = [
    {
            value: 300,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
    },
    {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
    },
    {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
    }
];
var ctx = document.getElementById("myChart").getContext('2d');
var myPieChart = new Chart(ctx,{type: 'pie', data: data, options: option});
});
</script>

What's wrong with only one blank area but no chart I've programmed?

modal

asked by anonymous 10.07.2017 / 15:39

2 answers

Regex - Retrieving Preformatted File Property How to instantiate a vector

score 2 · Answer 1

As I see it, it seems that setting the Data value is an error. I've created a working example from the documentation . Here's how it went:

$(function() {
  $('#ModalPadrao3').on('shown.bs.modal', function() {
    var option = {
      responsive: true,
    };

    var config = {
      type: 'pie',
      data: {
        datasets: [{
          data: [
            1,
            2,
            3,
            4,
            5,
          ],
          backgroundColor: [
            'red',
            'orange',
            'yellow',
            'green',
            'blue',
          ],
          label: 'Dataset 1'
        }],
        labels: [
          "Vermelho",
          "Laranja",
          "Amarelo",
          "Verde",
          "Azul"
        ]
      },
      options: {
        responsive: true
      }
    };

    var ctx = document.getElementById("myChart").getContext('2d');
    var myPieChart = new Chart(ctx, config);
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script><buttondata-toggle="modal" data-target="#ModalPadrao3" class="btn btn-primary">Abrir modal</button>

<div id="ModalPadrao3" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Título</h4>
      </div>
      <div class="modal-body">
        <canvas id="myChart" width="300" height="300"></canvas>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2

@WitnessTruth about your graphic size issue, I had a similar problem and I managed to resolve it by including a style inside the canvas tag

<canvas id="myChart" style="height:40vh; width: 100%"></canvas>