Chart.js with Angular using ng-include. Charts do not appear

Asked

Viewed 429 times

1

Hello.

In my index.html I have this

    <div ng-include="'graficos.html'">
        </div>

in graficost.html I have this:

  <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="x_panel">
              <div class="x_title">
                <h2>Line graph<small>Sessions</small></h2>
                <ul class="nav navbar-right panel_toolbox">
                  <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                  </li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Settings 1</a>
                      </li>
                      <li><a href="#">Settings 2</a>
                      </li>
                    </ul>
                  </li>
                  <li><a class="close-link"><i class="fa fa-close"></i></a>
                  </li>
                </ul>
                <div class="clearfix"></div>
              </div>
              <div class="x_content">
                <canvas id="lineChart"></canvas>
              </div>
            </div>
          </div>
        </div>

no body do index.html declare Chart.js and grafico.js (where I create Graphics) so:

  <script src="../vendors/Chart.js/dist/Chart.min.js"></script>

<script src="graficos.js"></script>

when I call index.html, it renders the Graficos.html page called by ng-include but I see this error in the Chrome console:

Chart.min.js:13 Uncaught Typeerror: Cannot read Property 'length' of null

So it doesn’t show the Graphics that are in Graphics.js

  • Check the scope of your application. How are you injecting the controller? Ng-Controller or Routes? What is the code that works with your canvas?

  • I believe it is not a problem in the controller, because the page Graficos.html I am calling in ng-include, is displayed, but the graphics made in JS, no.

  • The lack of it will cause the data not to be passed. It included with ng-include because it found the file in the informed path.

  • True... I put ng-controller on the included page and made the module and controller on graph.js.. Thank you!

  • Okay, I’ll put it in answer here.

1 answer

0


Check the scope of your application. See where the controller is injected, if it is not properly injected the canvas will not fetch the data.

Use ng-controller inside ng-include or even inside the included file or use the routes to inject it.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.