Error calling a view with chart.js error Failed to create chart: can not acquire context from the given item

Question

Error calling a view with chart.js error Failed to create chart: can not acquire context from the given item

Navigation

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

0

Hello, I need to call mendiante load of jquery a view in Template.php but in the view there is a canvas that contains a graph but the graph shows the following error? '

Failed to create chart: can not acquire context from the given item

'

agroquimicos.php

<div class="row">
  <div class="col-md-5">
    <div class="box box-solid box-success">
      <div class="box-header with-border">
        <h3 class="box-title">IMPORTAR ARCHIVO INSUMOS</h3>
        <div class="box-tools pull-right">
          <span class="label label-primary">imp</span>
        </div>
      </div>
      <div class="box-body">
        <canvas id="myChart" width="400" height="400"></canvas>
      </div>
    </div>
</div>
</div>

div content Template.php

<li class=""><a href="#" id = 'agroquimicos'><i class="fa fa-code-fork"></i> <span>ENTRADAS ECM</span></a></li>

<section class="content container-fluid" id="contenido">

  </section>

agroquimicos.js

$(document).on('click','#agroquimicos',function(event){
      $('#contenido').load('pages/agroquimicos.php');
      var ctx = $("#myChart");
      var chart = new Chart(ctx, {
          // The type of chart we want to create
          type: 'line',

          // The data for our dataset
          data: {
              labels: ["January", "February", "March", "April", "May", "June", "July"],
              datasets: [{
                  label: "My First dataset",
                  backgroundColor: 'rgb(255, 99, 132)',
                  borderColor: 'rgb(255, 99, 132)',
                  data: [0, 10, 5, 2, 20, 30, 45],
              }]
          },

          // Configuration options go here
          options: {}
      });
    });

footer of template.php

<script src="../public/libraries/jquery.js"></script>
<script type="text/javascript" src='../public/node_modules_js/chart/dist/Chart.js'></script>
  <script src="../public/js/graficos.js"></script>
</body>
</html>

I already change the <div id="myChart" style="height: 250px;"></div> but it still does not show me the graphic

javascript jquery html chart.js

asked by miguel andres zuñiga romero 02.10.2018 в 18:02

source

2 answers

0

the problem occurs in your file 'agroquimicos.php' in the you must change your:

<div id="myChart" style="height: 250px;"></div>

By:

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

In the Chart.js documentation, specify that you should use the <canvas>

tag

answered by 02.10.2018 в 18:24

Read date of a file how to put two buttons together in the footer

score 3 · Accepted Answer

I invite you to read the jQuery documentation on the load () method link Since this method to load a resource, you have to do it asynchronously. Therefore, the code you have after

$ ('# content'). load ('pages / agroquimicos.php');

Runs before the template content is loaded on the page.

The solution to this problem is to use the callback of the load () method like this:

$('#contenido').load('pages/agroquimicos.php', function() {
      var ctx = $("#myChart");
      var chart = new Chart(ctx, {
          // The type of chart we want to create
          type: 'line',

          // The data for our dataset
          data: {
              labels: ["January", "February", "March", "April", "May", "June", "July"],
              datasets: [{
                  label: "My First dataset",
                  backgroundColor: 'rgb(255, 99, 132)',
                  borderColor: 'rgb(255, 99, 132)',
                  data: [0, 10, 5, 2, 20, 30, 45],
              }]
          },

          // Configuration options go here
          options: {}
      });
);