Failed to implement jsChart - Bar Chart with sample data

[Prizm78]

starter.txt
I was wondering if anyone here could try to assist me. I would like to implement the Bar Chart on the starter-page. For some reason i failed to see what i do wrong. I have kept all the location as standard. When i inspect the page /AdminLTE-master/AdminLTE-master/pages/charts/chartjs.html and inspect the element Bar Chart, I copy the information from the inspected element and it copy just fine over to starter.html. It shows up but non-functional, as in no data is populated

I have tried to bring in some of the js files as well and the main script at the bottom from charts.html.

In the inspect console i get the following error message, but i do not really understand still what Im doing wrong:

jQuery.Deferred exception: $(...).get(...) is undefined @file:///C:/Downloads/AdminLTE%203/AdminLTE-master/AdminLTE-master/starter.html#:487:43
e@file:///C:/Downloads/AdminLTE%203/AdminLTE-master/AdminLTE-master/plugins/jquery/jquery.min.js:2:30038
Deferred/then/l/</t<@file:///C:/Downloads/AdminLTE%203/AdminLTE-master/AdminLTE-master/plugins/jquery/jquery.min.js:2:30340
undefined jquery.min.js:2:31593
Uncaught TypeError: $(...).get(...) is undefined
file:///C:/Downloads/AdminLTE 3/AdminLTE-master/AdminLTE-master/starter.html#:487
jQuery 2
e
t

Below is my whole code for starter.html (I uploaded the html as .txt)

`

<title>AdminLTE 3 | Starter</title>

• Home
• Contact

<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
  <!-- Navbar Search -->
  <li class="nav-item">
    <a class="nav-link" data-widget="navbar-search" href="#" role="button">
      <i class="fas fa-search"></i>
    </a>
    <div class="navbar-search-block">
      <form class="form-inline">
        <div class="input-group input-group-sm">
          <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
          <div class="input-group-append">
            <button class="btn btn-navbar" type="submit">
              <i class="fas fa-search"></i>
            </button>
            <button class="btn btn-navbar" type="button" data-widget="navbar-search">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
      </form>
    </div>
  </li>

  <!-- Messages Dropdown Menu -->
  <li class="nav-item dropdown">
    <a class="nav-link" data-toggle="dropdown" href="#">
      <i class="far fa-comments"></i>
      <span class="badge badge-danger navbar-badge">3</span>
    </a>
    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
      <a href="#" class="dropdown-item">
        <!-- Message Start -->
        <div class="media">
          <img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
          <div class="media-body">
            <h3 class="dropdown-item-title">
              Brad Diesel
              <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
            </h3>
            <p class="text-sm">Call me whenever you can...</p>
            <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
          </div>
        </div>
        <!-- Message End -->
      </a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">
        <!-- Message Start -->
        <div class="media">
          <img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
          <div class="media-body">
            <h3 class="dropdown-item-title">
              John Pierce
              <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
            </h3>
            <p class="text-sm">I got your message bro</p>
            <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
          </div>
        </div>
        <!-- Message End -->
      </a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">
        <!-- Message Start -->
        <div class="media">
          <img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
          <div class="media-body">
            <h3 class="dropdown-item-title">
              Nora Silvester
              <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
            </h3>
            <p class="text-sm">The subject goes here</p>
            <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
          </div>
        </div>
        <!-- Message End -->
      </a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
    </div>
  </li>
  <!-- Notifications Dropdown Menu -->
  <li class="nav-item dropdown">
    <a class="nav-link" data-toggle="dropdown" href="#">
      <i class="far fa-bell"></i>
      <span class="badge badge-warning navbar-badge">15</span>
    </a>
    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
      <span class="dropdown-header">15 Notifications</span>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">
        <i class="fas fa-envelope mr-2"></i> 4 new messages
        <span class="float-right text-muted text-sm">3 mins</span>
      </a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">
        <i class="fas fa-users mr-2"></i> 8 friend requests
        <span class="float-right text-muted text-sm">12 hours</span>
      </a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">
        <i class="fas fa-file mr-2"></i> 3 new reports
        <span class="float-right text-muted text-sm">2 days</span>
      </a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
      <i class="fas fa-expand-arrows-alt"></i>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
      <i class="fas fa-th-large"></i>
    </a>
  </li>
</ul>

AdminLTE 3

<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar user panel (optional) -->
  <div class="user-panel mt-3 pb-3 mb-3 d-flex">
    <div class="image">
      <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
    </div>
    <div class="info">
      <a href="#" class="d-block">Alexander Pierce</a>
    </div>
  </div>

  <!-- SidebarSearch Form -->
  <div class="form-inline">
    <div class="input-group" data-widget="sidebar-search">
      <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
      <div class="input-group-append">
        <button class="btn btn-sidebar">
          <i class="fas fa-search fa-fw"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- Sidebar Menu -->
  <nav class="mt-2">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
      <!-- Add icons to the links using the .nav-icon class
           with font-awesome or any other icon font library -->
      <li class="nav-item menu-open">
        <a href="#" class="nav-link active">
          <i class="nav-icon fas fa-tachometer-alt"></i>
          <p>
            Starter Pages
            <i class="right fas fa-angle-left"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
          <li class="nav-item">
            <a href="#" class="nav-link active">
              <i class="far fa-circle nav-icon"></i>
              <p>Active Page</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i class="far fa-circle nav-icon"></i>
              <p>Inactive Page</p>
            </a>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="nav-icon fas fa-th"></i>
          <p>
            Simple Link
            <span class="right badge badge-danger">New</span>
          </p>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->

Starter Page

1. Home
2. Starter Page

<!-- Main content -->
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6">

        <div class="card card-primary card-outline">
          <div class="card-body">
            <h5 class="card-title">Information</h5>

            <p class="card-text">
           This is my sample text goes here
            </p>
            <a href="#" class="card-link">First link here</a>
            <a href="#" class="card-link">Second link goes here</a>
          </div>
        </div><!-- /.card -->
		<div class="small-box bg-danger">
          <div class="inner">
            <h3>Critical</h3>

            <h3>Red</h3>
          </div>
          <div class="icon">
            <i class="fas fa-chart-pie"></i>
          </div>
          <a href="#" class="small-box-footer">
            More info <i class="fas fa-arrow-circle-right"></i>
          </a>
        </div>
        <!-- small card -->
        <div class="small-box bg-success">
          <div class="inner">
            <h4>Go</h4>

            <h3>Green</h3>
          </div>
          <div class="icon">
            <i class="ion ion-stats-bars"></i>
          </div>
          <a href="#" class="small-box-footer">
            More info <i class="fas fa-arrow-circle-right"></i>
          </a>
        </div>
		<div class="row">
		<div class="col-lg-3 col-6">
        <!-- small card -->
        <div class="small-box bg-info">
          <div class="inner">
            <h4>OK</h4>
			<h4>Blue</h4>

          </div>

          <a href="#" class="small-box-footer">
            More info <i class="fas fa-arrow-circle-right"></i>
          </a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small card -->
        <div class="small-box bg-success">
          <div class="inner">
            <h4>Go</h4>

            <h3>Green 2</h3>
          </div>
          <div class="icon">
            <i class="ion ion-stats-bars"></i>
          </div>
          <a href="#" class="small-box-footer">
            More info <i class="fas fa-arrow-circle-right"></i>
          </a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small card -->
        <div class="small-box bg-warning">
          <div class="inner">
            <h4>yellow</h4>

            <p>User Registrations</p>
          </div>
          <div class="icon">
            <i class="fas fa-user-plus"></i>
          </div>
          <a href="#" class="small-box-footer">
            More info <i class="fas fa-arrow-circle-right"></i>
          </a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small card -->
        <div class="small-box bg-danger">
          <div class="inner">
            <h4>Critical</h4>

            <p>Unique Visitors</p>
          </div>
          <div class="icon">
            <i class="fas fa-chart-pie"></i>
          </div>
          <a href="#" class="small-box-footer">
            More info <i class="fas fa-arrow-circle-right"></i>
          </a>
        </div>
      </div>
      <!-- ./col -->
    </div>
      </div>
      <!-- /.col-md-6 -->
      <div class="col-lg-6">
        <div class="card">
          <div class="card-header">
            <h5 class="m-0">Featured</h5>
          </div>
          <div class="card-body">
            <h6 class="card-title">Special title treatment</h6>

            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>

        <div class="card card-primary card-outline">
          <div class="card-header">
            <h5 class="m-0">Featured</h5>
          </div>
          <div class="card-body">
            <h6 class="card-title">Special title treatment</h6>

            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- BAR CHART -->
        <div class="card card-success">
          <div class="card-header">
            <h3 class="card-title">Bar Chart</h3>

            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
              </button>
              <button type="button" class="btn btn-tool" data-card-widget="remove">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            <div class="chart">
              <canvas id="barChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col-md-6 -->
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content -->

Title

Sidebar content

Anything you want

Copyright © 2014-2021 AdminLTE.io. All rights reserved.

<script src="plugins/jquery/jquery.min.js"></script> <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="dist/js/adminlte.min.js"></script> <script src="plugins/chart.js/Chart.min.js"></script> <script> $(function () { /* ChartJS * ------- * Here we will create a few charts using ChartJS */ //-------------- //- AREA CHART - //-------------- // Get context with jQuery - using jQuery's .get() method. var areaChartCanvas = $('#areaChart').get(0).getContext('2d') var areaChartData = { labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label : 'Digital Goods', backgroundColor : 'rgba(60,141,188,0.9)', borderColor : 'rgba(60,141,188,0.8)', pointRadius : false, pointColor : '#3b8bba', pointStrokeColor : 'rgba(60,141,188,1)', pointHighlightFill : '#fff', pointHighlightStroke: 'rgba(60,141,188,1)', data : [28, 48, 40, 19, 86, 27, 90] }, { label : 'Electronics', backgroundColor : 'rgba(210, 214, 222, 1)', borderColor : 'rgba(210, 214, 222, 1)', pointRadius : false, pointColor : 'rgba(210, 214, 222, 1)', pointStrokeColor : '#c1c7d1', pointHighlightFill : '#fff', pointHighlightStroke: 'rgba(220,220,220,1)', data : [65, 59, 80, 81, 56, 55, 40] }, ] } var areaChartOptions = { maintainAspectRatio : false, responsive : true, legend: { display: false }, scales: { xAxes: [{ gridLines : { display : false, } }], yAxes: [{ gridLines : { display : false, } }] } } // This will get the first returned node in the jQuery collection. new Chart(areaChartCanvas, { type: 'line', data: areaChartData, options: areaChartOptions }) //------------- //- LINE CHART - //-------------- var lineChartCanvas = $('#lineChart').get(0).getContext('2d') var lineChartOptions = $.extend(true, {}, areaChartOptions) var lineChartData = $.extend(true, {}, areaChartData) lineChartData.datasets[0].fill = false; lineChartData.datasets[1].fill = false; lineChartOptions.datasetFill = false var lineChart = new Chart(lineChartCanvas, { type: 'line', data: lineChartData, options: lineChartOptions }) //------------- //- DONUT CHART - //------------- // Get context with jQuery - using jQuery's .get() method. var donutChartCanvas = $('#donutChart').get(0).getContext('2d') var donutData = { labels: [ 'Chrome', 'IE', 'FireFox', 'Safari', 'Opera', 'Navigator', ], datasets: [ { data: [700,500,400,600,300,100], backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'], } ] } var donutOptions = { maintainAspectRatio : false, responsive : true, } //Create pie or douhnut chart // You can switch between pie and douhnut using the method below. new Chart(donutChartCanvas, { type: 'doughnut', data: donutData, options: donutOptions }) //------------- //- PIE CHART - //------------- // Get context with jQuery - using jQuery's .get() method. var pieChartCanvas = $('#pieChart').get(0).getContext('2d') var pieData = donutData; var pieOptions = { maintainAspectRatio : false, responsive : true, } //Create pie or douhnut chart // You can switch between pie and douhnut using the method below. new Chart(pieChartCanvas, { type: 'pie', data: pieData, options: pieOptions }) //------------- //- BAR CHART - //------------- var barChartCanvas = $('#barChart').get(0).getContext('2d') var barChartData = $.extend(true, {}, areaChartData) var temp0 = areaChartData.datasets[0] var temp1 = areaChartData.datasets[1] barChartData.datasets[0] = temp1 barChartData.datasets[1] = temp0 var barChartOptions = { responsive : true, maintainAspectRatio : false, datasetFill : false } new Chart(barChartCanvas, { type: 'bar', data: barChartData, options: barChartOptions }) //--------------------- //- STACKED BAR CHART - //--------------------- var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d') var stackedBarChartData = $.extend(true, {}, barChartData) var stackedBarChartOptions = { responsive : true, maintainAspectRatio : false, scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] } } new Chart(stackedBarChartCanvas, { type: 'bar', data: stackedBarChartData, options: stackedBarChartOptions }) }) </script> `

[lenamtl]

Hi,

Adminlte is just a template, so you need to check external plugin website to learn how to use them.
Refer to ChartJS website https://www.chartjs.org/

Ask your ChartJS question on their Github https://github.com/chartjs/Chart.js/discussions or using https://stackoverflow.com/

*Note Instead of posting all your code, to get quick help always create a test case on JSFiddle https://jsfiddle.net/