My charts.js chart is bugging out. I cant explain it you have to see it

See also questions close to this topic

• laravel 7 nothing happens when i click sign up button it seems like event is not triggering

  hello and sorry for my bad English , can any one help me ? when i try to sign up nothing happens . i use laravel 7. every time I click the sign up button, nothing happens and also no errors are showing.

  UserController.php

  namespace App\Http\Controllers\Web\User;
  
  use Reminder;
  use Exception;
  use Modules\User\Http\Controllers\AuthController;
  
  class UserController extends AuthController
  {
  
      public $routes = [
          'home'            => 'web.home.index',
          'forgot_password' => 'frontend.forgot.password',
          'reset_password'  => 'web.user.reset-password',
      ];
  
      public function getLogin()
      {
          $return_url = '';
          if ( request()->has('return-url') )
              $return_url .= request()->input('return-url');
  
          $data = [
              'authenticate_url'  => route('web.user.authenticate', ['return-url' => strip_tags(trim($return_url))])
          ];
          return view('web.user.login', $data);
      }
  
       /**
       * getNewAccount
       *
       * @return view
       */
      public function getNewAccount()
      {
          return view('web.user.new-account')->with(['url' => route('web.user.post-new-account')]);
      }
  
       /**
       * Logout current user.
       *
       * @return void
       */
      public function getForgotPassword()
      {
          return view('web.user.forgot-password')->with(['url' => route('web.user.post-forgot-password')]);
      }
  
      /**
      *
      * getResetPassword()
      *
      * @return template
      * @access  public
      **/
      public function getResetPassword($userHashId,$reminderCode)
      {
  
          try {
  
              $hashId = hasher($userHashId,  true);
              if ( !$hashId )
                  throw new Exception('Wrong user hash key, please check the url carefully.');
  
              $user = $this->auth->findById($hashId);
  
              $isReminderCodeExist = Reminder::exists($user);
              if(!$isReminderCodeExist)
                  throw new Exception("Reset code is not exists, please retry.");
  
              return view('web.user.reset-password')->with(['url' => route('web.user.post-reset-password'),
                                                          'code'    => $reminderCode,
                                                          'hash_code' => $userHashId
                                                      ]);
  
          } catch (Exception $e) {
              return redirect()->back()->withInput()->withErrors($e->getMessage());
          }
      }
  
  }
  

  new-account.blade.php

  @extends( "layouts.master-login")
  
  @section('content')
  
  <div class="row no-gutters justify-content-center ">
      <div class="hero-static col-sm-8 col-md-8 col-xl-8 d-flex align-items-center px-sm-0">
  
          <div class="col-md-12 col-xl-10" style="margin: 0 auto;">
              <div class="row no-gutters">
                  <div class="col-md-6 order-md-1 bg-white">
                      <div class="block-content block-content-full px-lg-5 py-md-5 py-lg-6">
                          <!-- Header -->
                          <div class="mb-2 text-center">
                              <p> @include('common.logo')</p>
                              <p class="text-uppercase font-w700 font-size-sm text-muted"> {{ __('dcm.new_account')}} </p>
                          </div>
                          <!-- END Header -->
  
                          <!-- Sign In Form -->
                          <form  action="{{ $url }}" method="POST">
  
                              @if(session('error.message') )
                                  <div class="form-group">
                                      <span class="text-danger">{{ session('error.message') }}</span>
                                  </div>
                              @endif
                              @csrf
                              <div class="form-group">
                                  <input type="text" class="form-control form-control-alt {{ $errors->has('username') ? ' is-invalid' : '' }}"  id="username-username" name="username" placeholder="{{ __('dcm.username_placeholder')}}">
                                  {!! $errors->first('username', '<span class="text-danger">:message</span>') !!}
                              </div>
                              <div class="form-group">
                                  <input type="text" class="form-control form-control-alt {{ $errors->has('email') ? ' is-invalid' : '' }}"  id="email-email" name="email" placeholder="{{ __('dcm.email_placeholder')}}">
                                  {!! $errors->first('email', '<span class="text-danger">:message</span>') !!}
                              </div>
                              <div class="form-group">
                                  <input type="text" class="form-control form-control-alt {{ $errors->has('first_name') ? ' is-invalid' : '' }}"  id="first_name-first_name" name="first_name" placeholder="{{ __('dcm.firstname_placeholder')}}">
                                  {!! $errors->first('first_name', '<span class="text-danger">:message</span>') !!}
                              </div>
                              <div class="form-group">
                                  <input type="text" class="form-control form-control-alt {{ $errors->has('last_name') ? ' is-invalid' : '' }}"  id="last_name-last_name" name="last_name" placeholder="{{ __('dcm.lastname_placeholder')}}">
                                  {!! $errors->first('last_name', '<span class="text-danger">:message</span>') !!}
                              </div>
                              <div class="form-group">
                                  <input type="password" class="form-control form-control-alt {{ $errors->has('password') ? ' is-invalid' : '' }}" id="password" name="password" placeholder="{{ __('dcm.password_placeholder')}}">
                                  {!! $errors->first('password', '<span class="text-danger">:message</span>') !!}
                              </div>
                              <div class="form-group">
                                  <button type="submit" class="btn btn-block btn-hero-primary">
                                      <i class="fas fa-plus mr-1"></i> {{ __('dcm.sign_up')}}
                                  </button>
                              </div>
                              <hr/>
                              <div class="form-group">
                                  <p class="mt-3 mb-0 d-lg-flex justify-content-lg-between">
                                      <a class="btn btn-secondary btn-block d-block d-lg-inline-block mb-1" href="{{ route('web.user.index') }}" title="{{ __('dcm.sign_in')}}">
                                          <i class="fa fa-fw fa-sign-in-alt mr-1"></i> {{ __('dcm.sign_in')}}
                                      </a>
                                  </p>
                              </div>
                          </form>
                          <!-- END Sign In Form -->
  

  routes/web/user.php

  <?php
  
  
  // using this pattern to used php artisan route:cache,
  // instead of using router closure/grouping.
  
  $userRouteNameSpace = 'Web\User';
  $middlewareName     = 'dcm.logged.in';
  
  // UserController
  $userController = "{$userRouteNameSpace}\UserController";
  
  // authenticate user
  Route::get('user/login', "{$userController}@getLogin")->name('web.user.index');
  Route::post('user/authenticate', "{$userController}@postAuthenticate")
          ->name('web.user.authenticate');
  
  // logout user
  Route::get('user/logout', "{$userController}@logout")
          ->name('web.user.logout');
  
  // forgot password
  Route::get('user/forgot-password', "{$userController}@getForgotPassword")
          ->name('web.user.forgot-password');
  Route::post('user/forgot-password', "{$userController}@postForgotPassword")
          ->name('web.user.post-forgot-password');
  
  //  reset password
  Route::get('user/reset-password/{hashId}/{resetcode}', "{$userController}@getResetPassword")
          ->name('web.user.reset-password');
  Route::post('user/reset-password', "{$userController}@postResetPassword")
          ->name('web.user.post-reset-password');
  
  
  // create new user account
  Route::get('user/new-account', "{$userController}@getNewAccount")
          ->name('web.user.new-account');
  Route::post('user/new-account', "{$userController}@postNewAccount")
          ->name('web.user.post-new-account');
  
  
  // ProfileController
  $profileController = "{$userRouteNameSpace}\ProfileController";
  Route::get('user/profile', "{$profileController}@getProfile")
          ->name('web.user.profile')
          ->middleware($middlewareName);
  Route::post('user/update-profile', "{$profileController}@postUpdateProfile")
          ->name('web.user.update.profile')
          ->middleware($middlewareName);
  
  // update user avatar
  Route::post('user/update-avatar/{hashId}', "{$profileController}@postUpdateAvatar")
          ->name('web.user.update.avatar')
          ->middleware($middlewareName);
          
  // Verify User
  
  Route::get('/verify','Auth\RegisterController@verifyUser')->name('verify.user');
  

  When I click on sign up, nothing happens, it seems like event is not triggering
• Get join values Laravel

  According documentation about joins:

  https://laravel.com/docs/8.x/queries#joins

  As example:

  $users = DB::table('users')
              ->join('contacts', 'users.id', '=', 'contacts.user_id')
              ->join('orders', 'users.id', '=', 'orders.user_id')
              ->select('users.*', 'contacts.phone', 'orders.price')
              ->get();
  

  OK, I have my values into $users. If I do, with blade:

  {{ $users }}
  

  I can see this result, in JSON format. But, How can I get each single value, using Blade? (Ex: contacts.phone, or orders.price, in this example)

  Thanks on advance
• Why Heroku does not accept my debit card?

  When I enter my debit card details on Heroku, a message appears to me that says

  Unable to verify your card. Please try later or contact your financial institution for help.

  Knowing that I'm from Egypt. So, What should I do in this case, please?
• How to make a loading Spinner with my logo

  Hi i need to make a Loading spinner with css, js or anyone from my Logo. I have the Logo as PNG, GIF, SVG all formats. I want use it for longer site loads, picture loads or anyone and integrate it in my Vue3 Project.

  Have anyone Solutions or guides for that, iam on google at 4 hours and nothing shows me right that.

  thanks
• Validation not correclty throwing messages

  I am trying to validate some amount input for saving some money. First, I declared some cases/reasons and max amounts:

  Reason: Rent (maxAmount) = 100€;
  Gaming = 50€;
  Electronic: 200€;
  Food: 0€;
  

  The amount I want to enter can't be greater than the maxAmount of the reason. If the maxAmount is 0, there is no limit, but the number.length shouldn't be greater than 5.

  :rules="[ v=> (!!v ||$t('goodwillMain.goodwillAmountRequired')),
            v=> (!v || !!v && spending.amount > 0)|| $t('Amount must be greater than 0'),
            v=> (!v || !!v && reason.maxAmount > 0 && spending.amount.toString().length <= 6)
                ||('max Number length = 5'),
            v=> (!v || !!v && reason.maxAmount <= 0 && spending.amount <= reason.maxAmount)
                || ('Your spending amount must be smaller than the maximumAmount ')]"
  

  For example, if I select the reason "food" (maxAmount=0, no limit, but number.toString().length<=6), I want to enter 1000, but I'm getting the validation message from my third rule ("Your spending amount must be smaller than the maximumAmount"). The third rule should only be checked, if the reason.amount is greater than 0.
• Ho to not load a head script in dev

  In my nuxt.config.js I have a script in the html head config.

  export default {
    // Target: https://go.nuxtjs.dev/config-target
    target: 'static',
  
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
      title: 'My cool Website !',
      script: [
        { 
          hid: "thesemetrics",
          src: "https://unpkg.com/thesemetrics@latest",
          async: true,
          type: "text/javascript",
       },
       { src: 'https://identity.netlify.com/v1/netlify-identity-widget.js'}
      ]
    },
    // ...
  }
  

  Is there a way to not load this script when I am in Dev Mode ?
• Format Tooltip Chartjs TypeScript Angular

  I want format the Tooltip to have this format:

  APP : 111 not APP 111:111

  I tried :

   tooltips: {
        callbacks: {
          title: (Items: any, data: any)=> data.datasets[0].data[Items[0].index],
          label: (Items: any, data: any) => data.datasets[Items.datasetIndex].data[Items.index]
        }
      }
  

  But not workin, how can I modify this please, thanks for your help

  
• Chart.js ranking mode

  I'm using Alexa API to get the websites Traffic History which helps to load the chart.js data sets, the problem is that the chart scale and labels should be in reverse to be compatible with ranking mode, for example, the value of 10000 should show a greater scale than 50000.

  

  While the results should be like this:

  

  Chartjs setup code:

  datacollection: ['19888', '12234'],
        labelscollection: ['2021-03-14', '2021-03-15'],
        options: {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            display: false,
          },
          elements: {
            point: {
              radius: 2
            },
            line: {}
          },
          tooltips: {
            displayColors: false,
            callbacks: {
              label: function (tooltipItem, data) {
                return tooltipItem.yLabel.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
              }
            }
          },
          scales: {}
        }
      }
  
• chart.js doughnut legend in the chart

  I am working with chart.js with the doughnut chart.

  I want to now if I can show the values of the charts inside the chart.

  Thanks

  enter image description here