1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Problem for using charts

hamdinirania pro asked 6 years ago

Bonsoir, j'ai un problème avec l'utilisation des graphiques, ils ne s'affichent pas. Le message d'erreur est Uncaught ReferenceError: le graphique n'est pas défini.

Piotr Glejzer staff commented 6 years ago

Hi, can you show your code HTML/css/js with your problem? Best, Piotr

hamdinirania pro answered 6 years ago

Hello, Indeed, it works. Thanks a lot for your help. have a nice day best regards.

Piotr Glejzer staff answered 6 years ago

You need to delete 'async' and 'defer' from you tags.
If you will do this you can also delete scripts tags like
" <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>"

If you use 'defer' and 'async' your code between scripts tags is loading as last time and it's reason why you have 'chart is not defined and wow is not defined'.

I changed sctrutruce your code but it is working :).

 
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>Material Design Bootstrap</title>
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- Bootstrap core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="css/mdb.min.css" rel="stylesheet">
 <!-- Your custom styles (optional) -->
 <link href="css/style.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 <style>
 .h1 {
 font-family: 'Lato', sans-serif;
 font-size: 20px;
 }

 .p {
 font-family: 'Lato', sans-serif;
 font-size: 18px;
 }

 .steps-form-2 {
 display: table;
 width: 100%;
 position: relative;
 }

 .steps-form-2 .steps-row-2 {
 display: table-row;
 }

 .steps-form-2 .steps-row-2:before {
 top: 14px;
 bottom: 0;
 position: absolute;
 content: " ";
 width: 100%;
 height: 2px;
 background-color: #7283a7;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 {
 display: table-cell;
 text-align: center;
 position: relative;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 p {
 margin-top: 0.5rem;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 button[disabled] {
 opacity: 1 !important;
 filter: alpha(opacity=100) !important;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 {
 width: 70px;
 height: 70px;
 border: 2px solid #59698D;
 background-color: white !important;
 color: #59698D !important;
 border-radius: 50%;
 padding: 22px 18px 15px 18px;
 margin-top: -22px;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2:hover {
 border: 2px solid #4285F4;
 color: #4285F4 !important;
 background-color: white !important;
 }

 .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 .fa {
 font-size: 1.7rem;
 }

 html,
 body,
 header,
 .jarallax {
 height: 100%;
 }

 @media (min-width: 560px) and (max-width: 740px) {
 html,
 body,
 header,
 .jarallax {
 height: 500px;
 }
 }

 @media (min-width: 800px) and (max-width: 850px) {
 .navbar:not(.top-nav-collapse) {
 background: #FFFFFF !important;
 }
 .navbar {
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
 }
 }

 .font-small {
 font-size: 0.9rem;
 }

 @media (max-width: 1025px) {
 .stepper.timeline-simple li {
 -webkit-box-align: end;
 -webkit-align-items: flex-end;
 -ms-flex-align: end;
 align-items: flex-end;
 }
 }

 .stepper.timeline-simple li a {
 padding: 0px;
 left: 50%;
 }

 @media (max-width: 450px) {
 .stepper.timeline-simple li a {
 left: 6%;
 }
 }

 @media (min-width: 451px) and (max-width: 1025px) {
 .stepper.timeline-simple li a {
 left: 6%;
 }
 }

 .stepper.timeline-simple li a .circle {
 margin-top: 0.9rem;
 width: 23px;
 height: 23px;
 line-height: 23px;
 font-size: 1.4em;
 text-align: center;
 position: absolute;
 top: 16px;
 margin-left: -12px;
 background-color: #ccc;
 z-index: 2;
 }

 .stepper.timeline-simple li .step-content {
 width: 45%;
 float: left;
 border-radius: 2px;
 position: relative;
 }

 .stepper.timeline-simple li .step-content:before {
 position: absolute;
 top: 26px;
 right: -15px;
 display: inline-block;
 border-top: 15px solid transparent;
 border-left: 15px solid #e0e0e0;
 border-right: 0 solid #e0e0e0;
 border-bottom: 15px solid transparent;
 content: " ";
 }

 .stepper.timeline-simple li .step-content:after {
 position: absolute;
 top: 27px;
 right: -14px;
 display: inline-block;
 border-top: 14px solid transparent;
 border-left: 14px solid #fff;
 border-right: 0 solid #fff;
 border-bottom: 14px solid transparent;
 content: " ";
 }

 @media (max-width: 450px) {
 .stepper.timeline-simple li .step-content {
 width: 80%;
 left: 3rem;
 margin-right: 3rem;
 margin-bottom: 2rem;
 float: right;
 }
 .stepper.timeline-simple li .step-content:before {
 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;
 }
 .stepper.timeline-simple li .step-content:after {
 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;
 }
 }

 @media (min-width: 451px) and (max-width: 1025px) {
 .stepper.timeline-simple li .step-content {
 width: 85%;
 left: 3rem;
 margin-right: 3rem;
 margin-bottom: 2rem;
 float: right;
 }
 .stepper.timeline-simple li .step-content:before {
 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;
 }
 .stepper.timeline-simple li .step-content:after {
 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;
 }
 }

 .stepper.timeline-simple li.timeline-inverted {
 -webkit-box-align: end;
 -webkit-align-items: flex-end;
 -ms-flex-align: end;
 align-items: flex-end;
 }

 .stepper.timeline-simple li.timeline-inverted .step-content {
 float: right;
 }

 .stepper.timeline-simple li.timeline-inverted .step-content:before {
 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;
 }

 .stepper.timeline-simple li.timeline-inverted .step-content:after {
 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;
 }

 .stepper.stepper-vertical.timeline-simple li:not(:last-child):after {
 content: " ";
 position: absolute;
 width: 2px;
 background-color: #9e9e9e;
 left: 50%;
 top: 32px;
 height: 100%;
 margin-left: -1.5px;
 }

 @media (max-width: 450px) {
 .stepper.stepper-vertical.timeline-simple li:not(:last-child):after {
 left: 6%;
 }
 }

 @media (min-width: 451px) and (max-width: 1025px) {
 .stepper.stepper-vertical.timeline-simple li:not(:last-child):after {
 left: 6%;
 }
 }

 .stepper-vertical li .step-content p {
 line-height: 1.75;
 }

 .pricing-card .price .number:after,
 .pricing-card .price .number:after {
 content: "/day";
 }

 .mockup {
 background-image: url(image.png);
 /*Pour créer une image référencée dans la CSS, utilisez la commande 'Exporter la CSS sélectionnée'.*/
 background-repeat: no-repeat;
 position: absolute;
 left: 1233px;
 top: 167px;
 width: 589px;
 height: 582px;
 }


 .orange-axmy {
 color: #FD4D00;
 }

 .orange-b-axmy {
 background-color: #FD4D00;
 }

 .grey-axmy {
 color: #515153;
 }

 .grey-b-axmy {
 background-color: #515153;
 }

 </style>
</head>

<body>

 <!-- Full Page Intro -->
 <div class="view jarallax" style="background-image: url('/img/landing/creativite.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
 <!-- Mask & flexbox options-->
 <div class="mask rgba-stylish-strong d-flex justify-content-center align-items-center">
 <!-- Content -->
 <div class="container">
 <!--Grid row-->
 <div class="row wow fadeIn">
 <!--Grid column-->
 <div class="col-md-12 text-center">
 <h1 class="display-4 font-weight-bold mb-0 pt-md-5 pt-5 white-text text-uppercase wow fadeInDown" data-wow-delay="0.2s">Libérer votre créativité </h1>
 <hr class="white title-hr" style="width: 70%;">
 <h5 class="pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text wow fadeInUp" data-wow-delay="0.2s">Nous nous chargeons d' assurer la
 <strong class="orange-axmy">pérénnité</strong> et d' optimiser le
 <strong class="orange-axmy">coût global</strong>, pour vos
 <strong class="orange-axmy">clients</strong>.</h5>
 <div class="wow fadeInUp" data-wow-delay="0.4s">
 <a href="https://www.prisederendezvous.axmy.co/" class="btn btn-rounded white-text z-depth-5 ml-lg-0 orange-b-axmy wow fadeIn"
 data-wow-delay="0.3s">Prener rendez-vous</a>
 </div>
 </div>
 <!--Grid column-->
 </div>
 <!--Grid row-->
 </div>
 <!-- Content -->
 </div>
 <!-- Mask & flexbox options-->
 </div>
 <!-- Full Page Intro -->
 @stop @section('content')
 <div class="container">
 <!-- Section: Features v.3 -->
 <section class="my-5">
 <!-- Section heading -->
 <h2 class="h1-responsive font-weight-bold text-center my-5">Libérer la créativité de la contrainte du coût</h2>
 <!-- Section description -->
 <p class="lead grey-text text-center w-responsive mx-auto mb-5">
 La conception architecturale
 </p>
 <!-- Grid row -->
 <div class="row">
 <!-- Grid column -->
 <div class="col-lg-5 text-center text-lg-left">
 <canvas id="myChart" style="max-width: 500px;"></canvas>
 </div>
 <!-- Grid column -->
 <!-- Grid column -->
 <div class="col-lg-7">
 <!-- Grid row -->
 <div class="row mb-3">
 <!-- Grid column -->
 <div class="col-xl-10 col-md-11 col-10">
 <h5 class="font-weight-bold mb-3">Safety</h5>
 <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem
 ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
 </div>
 <!-- Grid column -->
 </div>
 <!-- Grid row -->
 </div>
 <!--Grid column-->
 </div>
 <!-- Grid row -->
 </section>
 <!-- Section: Features v.3 -->
 </div>
 <div class="container">
 <!--Section: Pricing v.4-->
 <section class="text-center pb-3 my-5">
 <!-- Section heading -->
 <h2 class="h1-responsive font-weight-bold text-center my-5">Ce que nous faisons ?</h2>
 <!-- Section description -->
 <p class="lead grey-text text-center w-responsive mx-auto mb-5">Nous
 <strong class="orange-axmy">concevons</strong> des plans d’entretiens
 <strong class="orange-axmy">sur-mesure</strong> en exploitants les meilleurs techniques et
 <strong class="orange-axmy">innovations</strong> dans le domaine.
 <br> Nous libérons votre créativité des contraintes, et nous
 <strong class="orange-axmy"> préservons </strong> vos ouvrages des effets de leurs exploitations et du temps.</p>
 <!--Grid row-->
 <div class="row">
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-cubes fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Modélisation
 </h3>
 <p class="grey-text">
 Détermination des besoins fonctionnels et non fonctionnels.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-map fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Ordonnancement
 </h3>
 <p class="grey-text">
 Étude et description des tâches élémentaires et de leurs interactions.
 <br>Détermination des moyens.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-euro fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Chiffrage
 </h3>
 <p class="grey-text">
 Évaluation du coût structurel de l'entretien.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-globe fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Co²
 </h3>
 <p class="grey-text">
 Évaluation et réduction, de l'empreinte carbone des prestations d'entretien.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-search-plus fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Recherche opérationnelle
 </h3>
 <p class="grey-text">
 Développement de techniques et de process, adapté aux besoins de la structure.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 <!--Grid column-->
 <div class="col-lg-4 col-md-12 mb-4">
 <!--Card-->
 <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s">
 <!--Content-->
 <div class="text-center">
 <div class="card-body">
 <div class="d-flex justify-content-center">
 <div class="card-circle d-flex justify-content-center align-items-center grey-text">
 <i class="fa fa-legal fa-3x text-center"></i>
 </div>
 </div>
 <h3 class="orange-axmy">
 Réglementation
 </h3>
 <p class="grey-text">
 La dimension législative est un cadre pour certaines activités et influence le coût de l'entretien.
 </p>
 </div>
 </div>
 </div>
 <!--Card-->
 </div>
 <!--Grid column-->
 </section>
 <!--Section: Pricing v.4-->
 </div>
 <!-- Streak -->
 <div class="streak streak-photo streak-long-2 " style="background-image: url('/img/landing/archistreak.jpg');">
 <div class="flex-center mask rgba-black-strong">
 <div class="container">
 <div class="row">
 <div class="col-md-12">
 <h2 class="text-center white-text">
 <strong>Concentrez-vous sur votre
 <strong class="orange-axmy">cœur</strong> de métier</strong>
 </h2>
 </div>
 </div>
 <!-- Section heading -->
 </div>
 <!--First row-->
 </div>
 </div>
 </div>
 <!-- Streak -->
 @stop @section('contact')
 <section class="section pb-5" id="contact">
 <div class="row">
 <div class="col-md-6 offset-3">
 <form action="{{ route('landing_page_maitre_oeuvre.store') }}" method="POST">
 @csrf
 <div class=" text-center formHeader mb-1 pt-3">
 <p class="h5 text-center mb-4">Contacter-nous !</p>
 <p> Nous vous remercions de votre intérêt pour les services d'Axmy.
 <br> Veuillez compléter le formulaire.
 <br> Vous recevrez une réponse dans les
 <strong>6 heures.</strong>
 <br>
 <i class="font-italic">
 <strong>Tous </strong>les champs sont
 <strong>nécessaires</strong>.</i>
 </p>
 </div>
 <hr sclass="orange-axmy">
 <br>
 <br>
 <div class="row">
 <div class="col-6">
 <div class="md-form" {{ $errors->has('nom') ? ' has-error' : '' }}>
 <i class="fa fa-user prefix" style="color: #FD4D00;"></i>
 <input type="text" name="nom" id="nom" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Min: 3 caractères" required=" required" value="{{old('nom')}}">
 <label for="nom" class="control-label">Nom </label>
 @if ($errors->has('nom'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('nom') !!}</small>
 </span>
 @endif
 </div>
 </div>
 <div class="col-6">
 <div class="md-form" {{ $errors->has('prenom') ? ' has-error' : '' }}>
 <i class="fa fa-user prefix orange-axmy"></i>
 <input type="text" name="prenom" id="prenom" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Min: 3 caractères" required="required" value="{{old('nom')}}">
 <label for="prenom" class="control-label">Prénom </label>
 @if ($errors->has('prenom'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('prenom') !!}</small>
 </span>
 @endif
 </div>
 </div>
 <div class="col">
 <div class="md-form" {{ $errors->has('fonction') ? ' has-error' : '' }}>
 <i class="fa fa-envelope prefix orange-axmy"></i>
 <input type="text" name="fonction" id="fonction" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Email valide" required="required" value="{{old('fonction')}}">
 <label for="fonction" class="control-label">Fonction </label>
 @if ($errors->has('fonction'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('fonction') !!}</small>
 </span>
 @endif
 </div>
 <div class="md-form" {{ $errors->has('email') ? ' has-error' : '' }}>
 <i class="fa fa-envelope prefix orange-axmy"></i>
 <input type="email" name="email" id="email" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Email valide" required="required" value="{{old('email')}}">
 <label for="email" class="control-label">Email professionnel </label>
 @if ($errors->has('email'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('email') !!}</small>
 </span>
 @endif
 </div>
 <div class="md-form ui-widget" {{ $errors->has('objet') ? ' has-error' : '' }}>
 <i class="fa fa-tag prefix orange-axmy"></i>
 <input type="text" name="objet" id="objet" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom"
 title="Min: 3 caractères" required="required" value="{{old('objet')}}">
 <label for="objet" class="control-label">Objet </label>
 @if ($errors->has('objet'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('objet') !!}</small>
 </span>
 @endif
 </div>
 <div class="md-form" {{ $errors->has('msg') ? ' has-error' : '' }}>
 <i class="fa fa-pencil prefix orange-axmy"></i>
 <textarea type="text" name="msg" id="msg" class="md-textarea" lenght="255" style="height: 100px" required="required" value="{{old('msg')}}"></textarea>
 <label for="msg" class="control-label">Message </label>
 @if ($errors->has('msg'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('msg') !!}</small>
 </span>
 @endif
 </div>
 <!-- CONSENTEMENT checkbox -->
 <div class="form-check mr-3" {{ $errors->has('consentement') ? ' has-error' : '' }} >
 <input class="form-check-input" type="checkbox" name="consentement[]" value="0" id="consentement" required="required">
 <label class="form-check-label blue-grey-text" for="consentement" style="color: grey; font-size: 12px;">En cochant la case vous nous autorisez à vous contactez</label>
 @if ($errors->has('consentement'))
 <span class="help-block">
 <small style="color: red;">{!! $errors->first('consentement') !!}</small>
 </span>
 @endif
 </div>
 <br>
 <br>
 <div class="text-center">
 <button type="submit" class="btn btn-outline-warning orange-b-axmy">Hello axmy
 <i class="fa fa-paper-plane-o ml-3"></i>
 </button>
 </div>
 </form>
 </div>
 </div>
 </section>

 <!-- JQuery -->
 <!-- Jquery core JavaScript -->
 <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
 <!-- MDB core JavaScript -->
 <script src="js/popper.min.js" type="text/javascript"></script>
 <!-- Bootstrap tooltips -->
 <script src="js/bootstrap.min.js" type="text/javascript"></script>
 <!-- MDB core JavaScript -->
 <script src="js/mdb.min.js" type="text/javascript"></script>

 <script type="text/javascript">
 //Animation init
 new WOW().init();

 var ctx = document.getElementById("myChart").getContext('2d');
 var myChart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
 datasets: [{
 label: '# of Votes',
 data: [12, 19, 3, 5, 2, 3],
 backgroundColor: [
 'rgba(255, 99, 132, 0.2)',
 'rgba(54, 162, 235, 0.2)',
 'rgba(255, 206, 86, 0.2)',
 'rgba(75, 192, 192, 0.2)',
 'rgba(153, 102, 255, 0.2)',
 'rgba(255, 159, 64, 0.2)'
 ],
 borderColor: [
 'rgba(255,99,132,1)',
 'rgba(54, 162, 235, 1)',
 'rgba(255, 206, 86, 1)',
 'rgba(75, 192, 192, 1)',
 'rgba(153, 102, 255, 1)',
 'rgba(255, 159, 64, 1)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 scales: {
 yAxes: [{
 ticks: {
 beginAtZero: true
 }
 }]
 }
 }
 });

 </script>
</body>

</html>

hamdinirania pro answered 6 years ago

Yes, nothing special, especially I only use MDBootstrap. Here is the rest of the code. But the error message reads: 757 Uncaught ReferenceError: Chart is not defined, I had this error create: 755 Uncaught ReferenceError: WOW is not defined for init animation, I solved the problem with two script 
Start your code here
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
that's all my code
Start your code here
Js :
<!-- JQuery --> <!-- Jquery core JavaScript --> <script src="{{ asset('js/jquery-3.3.1.min.js') }}" type="text/javascript" charset="utf-8" async defer></script> <!-- MDB core JavaScript --> <script src="{{ asset('js/popper.min.js') }}" type="text/javascript" charset="utf-8" async defer></script> <!-- Bootstrap tooltips --> <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript" charset="utf-8" async defer></script> <!-- MDB core JavaScript --> <script src="{{ asset('js/mdb.min.js') }}" type="text/javascript" charset="utf-8" async defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script> <script type="text/javascript"> //Animation init new WOW().init(); var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); </script> HTML : @extends('layouts.master_landings',['title' => 'Architecte']) @section('tête') <!-- Full Page Intro --> <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('/img/landing/creativite.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;"> <!-- Mask & flexbox options--> <div class="mask rgba-stylish-strong d-flex justify-content-center align-items-center"> <!-- Content --> <div class="container"> <!--Grid row--> <div class="row wow fadeIn"> <!--Grid column--> <div class="col-md-12 text-center"> <h1 class="display-4 font-weight-bold mb-0 pt-md-5 pt-5 white-text text-uppercase wow fadeInDown" data-wow-delay="0.2s">Libérer votre créativité </h1> <hr class="white title-hr" style="width: 70%;"> <h5 class="pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text wow fadeInUp" data-wow-delay="0.2s">Nous nous chargeons d' assurer la <strong class="orange-axmy">pérénnité</strong> et d' optimiser le <strong class="orange-axmy">coût global</strong>, pour vos <strong class="orange-axmy">clients</strong>.</h5> <div class="wow fadeInUp" data-wow-delay="0.4s"> <a href="https://www.prisederendezvous.axmy.co/" class="btn btn-rounded white-text z-depth-5 ml-lg-0 orange-b-axmy wow fadeIn" data-wow-delay="0.3s">Prener rendez-vous</a> </div> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!-- Content --> </div> <!-- Mask & flexbox options--> </div> <!-- Full Page Intro --> @stop @section('content') <div class="container"> <!-- Section: Features v.3 --> <section class="my-5"> <!-- Section heading --> <h2 class="h1-responsive font-weight-bold text-center my-5">Libérer la créativité de la contrainte du coût</h2> <!-- Section description --> <p class="lead grey-text text-center w-responsive mx-auto mb-5"> La conception architecturale </p> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-lg-5 text-center text-lg-left"> <canvas id="myChart" style="max-width: 500px;"></canvas> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-lg-7"> <!-- Grid row --> <div class="row mb-3"> <!-- Grid column --> <div class="col-xl-10 col-md-11 col-10"> <h5 class="font-weight-bold mb-3">Safety</h5> <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p> </div> <!-- Grid column --> </div> <!-- Grid row --> </div> <!--Grid column--> </div> <!-- Grid row --> </section> <!-- Section: Features v.3 --> </div> <div class="container"> <!--Section: Pricing v.4--> <section class="text-center pb-3 my-5"> <!-- Section heading --> <h2 class="h1-responsive font-weight-bold text-center my-5">Ce que nous faisons ?</h2> <!-- Section description --> <p class="lead grey-text text-center w-responsive mx-auto mb-5">Nous <strong class="orange-axmy">concevons</strong> des plans d’entretiens <strong class="orange-axmy">sur-mesure</strong> en exploitants les meilleurs techniques et <strong class="orange-axmy">innovations</strong> dans le domaine.<br> Nous libérons votre créativité des contraintes, et nous<strong class="orange-axmy"> préservons </strong> vos ouvrages des effets de leurs exploitations et du temps.</p> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-cubes fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Modélisation </h3> <p class="grey-text"> Détermination des besoins fonctionnels et non fonctionnels. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-map fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Ordonnancement </h3> <p class="grey-text"> Étude et description des tâches élémentaires et de leurs interactions.<br>Détermination des moyens. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-euro fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Chiffrage </h3> <p class="grey-text"> Évaluation du coût structurel de l'entretien. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-globe fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Co² </h3> <p class="grey-text"> Évaluation et réduction, de l'empreinte carbone des prestations d'entretien. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-search-plus fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Recherche opérationnelle </h3> <p class="grey-text"> Développement de techniques et de process, adapté aux besoins de la structure. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card z-depth-0 wow slideInUp" data-wow-delay="0.3s"> <!--Content--> <div class="text-center"> <div class="card-body"> <div class="d-flex justify-content-center"> <div class="card-circle d-flex justify-content-center align-items-center grey-text"> <i class="fa fa-legal fa-3x text-center"></i> </div> </div> <h3 class="orange-axmy"> Réglementation </h3> <p class="grey-text"> La dimension législative est un cadre pour certaines activités et influence le coût de l'entretien. </p> </div> </div> </div> <!--Card--> </div> <!--Grid column--> </section> <!--Section: Pricing v.4--> </div> <!-- Streak --> <div class="streak streak-photo streak-long-2 " style="background-image: url('/img/landing/archistreak.jpg');"> <div class="flex-center mask rgba-black-strong"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="text-center white-text"> <strong>Concentrez-vous sur votre <strong class="orange-axmy">cœur</strong> de métier</strong> </h2> </div> </div> <!-- Section heading --> </div> <!--First row--> </div> </div> </div> <!-- Streak --> @stop @section('contact') <section class="section pb-5" id="contact"> <div class="row"> <div class="col-md-6 offset-3"> <form action="{{ route('landing_page_maitre_oeuvre.store') }}" method="POST"> @csrf <div class=" text-center formHeader mb-1 pt-3"> <p class="h5 text-center mb-4">Contacter-nous !</p> <p> Nous vous remercions de votre intérêt pour les services d'Axmy.<br> Veuillez compléter le formulaire.<br> Vous recevrez une réponse dans les <strong>6 heures.</strong><br><i class="font-italic"><strong>Tous </strong>les champs sont <strong>nécessaires</strong>.</i></p> </div> <hr sclass="orange-axmy"> <br> <br> <div class="row"> <div class="col-6"> <div class="md-form" {{ $errors->has('nom') ? ' has-error' : '' }}> <i class="fa fa-user prefix" style="color: #FD4D00;"></i> <input type="text" name="nom" id="nom" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Min: 3 caractères" required=" required" value="{{old('nom')}}"> <label for="nom" class="control-label">Nom </label> @if ($errors->has('nom')) <span class="help-block"><small style="color: red;">{!! $errors->first('nom') !!}</small></span> @endif </div> </div> <div class="col-6"> <div class="md-form" {{ $errors->has('prenom') ? ' has-error' : '' }}> <i class="fa fa-user prefix orange-axmy"></i> <input type="text" name="prenom" id="prenom" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Min: 3 caractères" required="required" value="{{old('nom')}}"> <label for="prenom" class="control-label">Prénom </label> @if ($errors->has('prenom')) <span class="help-block"><small style="color: red;">{!! $errors->first('prenom') !!}</small></span> @endif </div> </div> <div class="col"> <div class="md-form" {{ $errors->has('fonction') ? ' has-error' : '' }}> <i class="fa fa-envelope prefix orange-axmy"></i> <input type="text" name="fonction" id="fonction" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Email valide" required="required" value="{{old('fonction')}}"> <label for="fonction" class="control-label">Fonction </label> @if ($errors->has('fonction')) <span class="help-block"><small style="color: red;" >{!! $errors->first('fonction') !!}</small></span> @endif </div> <div class="md-form" {{ $errors->has('email') ? ' has-error' : '' }}> <i class="fa fa-envelope prefix orange-axmy"></i> <input type="email" name="email" id="email" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Email valide" required="required" value="{{old('email')}}"> <label for="email" class="control-label">Email professionnel </label> @if ($errors->has('email')) <span class="help-block"><small style="color: red;" >{!! $errors->first('email') !!}</small></span> @endif </div> <div class="md-form ui-widget" {{ $errors->has('objet') ? ' has-error' : '' }}> <i class="fa fa-tag prefix orange-axmy"></i> <input type="text" name="objet" id="objet" class="form-control" autocomplete="nope" data-toggle="tooltip" data-placement="bottom" title="Min: 3 caractères" required="required" value="{{old('objet')}}"> <label for="objet" class="control-label">Objet </label> @if ($errors->has('objet')) <span class="help-block"><small style="color: red;" >{!! $errors->first('objet') !!}</small></span> @endif </div> <div class="md-form" {{ $errors->has('msg') ? ' has-error' : '' }}> <i class="fa fa-pencil prefix orange-axmy"></i> <textarea type="text" name="msg" id="msg" class="md-textarea" lenght="255" style="height: 100px" required="required" value="{{old('msg')}}"></textarea> <label for="msg" class="control-label">Message </label> @if ($errors->has('msg')) <span class="help-block"><small style="color: red;" >{!! $errors->first('msg') !!}</small></span> @endif </div> <!-- CONSENTEMENT checkbox --> <div class="form-check mr-3" {{ $errors->has('consentement') ? ' has-error' : '' }} > <input class="form-check-input" type="checkbox" name="consentement[]" value="0" id="consentement" required="required"> <label class="form-check-label blue-grey-text" for="consentement" style="color: grey; font-size: 12px;">En cochant la case vous nous autorisez à vous contactez</label> @if ($errors->has('consentement')) <span class="help-block"><small style="color: red;" >{!! $errors->first('consentement') !!}</small></span> @endif </div> <br><br> <div class="text-center"> <button type="submit" class="btn btn-outline-warning orange-b-axmy">Hello axmy <i class="fa fa-paper-plane-o ml-3"></i></button> </div> </form> </div> </div> </section> @stop CSS : <!-- Font Awesome --> <link rel="stylesheet" type="text/css" href="{{ asset('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css') }}"> <!-- Bootstrap core CSS --> <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}"> <!-- Material Design Bootstrap --> <link rel="stylesheet" type="text/css" href="{{ asset('css/mdb.min.css') }}"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <style> .h1{ font-family: 'Lato', sans-serif; font-size: 20px; } .p{ font-family: 'Lato', sans-serif; font-size: 18px; } </style> {{-- stepper de la la landing page SG --}} <style type="text/css" media="screen"> .steps-form-2 { display: table; width: 100%; position: relative; } .steps-form-2 .steps-row-2 { display: table-row; } .steps-form-2 .steps-row-2:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 2px; background-color: #7283a7; } .steps-form-2 .steps-row-2 .steps-step-2 { display: table-cell; text-align: center; position: relative; } .steps-form-2 .steps-row-2 .steps-step-2 p { margin-top: 0.5rem; } .steps-form-2 .steps-row-2 .steps-step-2 button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 { width: 70px; height: 70px; border: 2px solid #59698D; background-color: white !important; color: #59698D !important; border-radius: 50%; padding: 22px 18px 15px 18px; margin-top: -22px; } .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2:hover { border: 2px solid #4285F4; color: #4285F4 !important; background-color: white !important; } .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 .fa { font-size: 1.7rem; } </style> {{-- /stepper de la la landing page SG --}} <style> html, body, header, .jarallax { height: 100%; } @media (min-width: 560px) and (max-width: 740px) { html, body, header, .jarallax { height: 500px; } } @media (min-width: 800px) and (max-width: 850px) { .navbar:not(.top-nav-collapse) { background: #FFFFFF!important; } .navbar { box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12) !important; } } .font-small { font-size: 0.9rem; } @media (max-width: 1025px) { .stepper.timeline-simple li { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } } .stepper.timeline-simple li a { padding: 0px; left: 50%; } @media (max-width: 450px) { .stepper.timeline-simple li a { left: 6%; } } @media (min-width: 451px) and (max-width: 1025px) { .stepper.timeline-simple li a { left: 6%; } } .stepper.timeline-simple li a .circle { margin-top: 0.9rem; width: 23px; height: 23px; line-height: 23px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; margin-left: -12px; background-color: #ccc; z-index: 2; } .stepper.timeline-simple li .step-content { width: 45%; float: left; border-radius: 2px; position: relative; } .stepper.timeline-simple li .step-content:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #e0e0e0; border-right: 0 solid #e0e0e0; border-bottom: 15px solid transparent; content: " "; } .stepper.timeline-simple li .step-content:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } @media (max-width: 450px) { .stepper.timeline-simple li .step-content { width: 80%; left: 3rem; margin-right: 3rem; margin-bottom: 2rem; float: right; } .stepper.timeline-simple li .step-content:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .stepper.timeline-simple li .step-content:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } } @media (min-width: 451px) and (max-width: 1025px) { .stepper.timeline-simple li .step-content { width: 85%; left: 3rem; margin-right: 3rem; margin-bottom: 2rem; float: right; } .stepper.timeline-simple li .step-content:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .stepper.timeline-simple li .step-content:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } } .stepper.timeline-simple li.timeline-inverted { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .stepper.timeline-simple li.timeline-inverted .step-content { float: right; } .stepper.timeline-simple li.timeline-inverted .step-content:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .stepper.timeline-simple li.timeline-inverted .step-content:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .stepper.stepper-vertical.timeline-simple li:not(:last-child):after { content: " "; position: absolute; width: 2px; background-color: #9e9e9e; left: 50%; top: 32px; height: 100%; margin-left: -1.5px; } @media (max-width: 450px) { .stepper.stepper-vertical.timeline-simple li:not(:last-child):after { left: 6%; } } @media (min-width: 451px) and (max-width: 1025px) { .stepper.stepper-vertical.timeline-simple li:not(:last-child):after { left: 6%; } } .stepper-vertical li .step-content p { line-height: 1.75; } .pricing-card .price .number:after, .pricing-card .price .number:after { content: "/day"; } </style> <style> .mockup{ background-image : url(image.png); /*Pour créer une image référencée dans la CSS, utilisez la commande 'Exporter la CSS sélectionnée'.*/ background-repeat : no-repeat; position : absolute ; left : 1233px; top : 167px; width : 589px; height : 582px; } </style> {{-- MES CLASS --}} <style type="text/css" media="screen"> .orange-axmy{ color: #FD4D00; } .orange-b-axmy{ background-color: #FD4D00; } .grey-axmy{ color: #515153; } .grey-b-axmy{ background-color: #515153; } </style>   Nothing more !

hamdinirania pro answered 6 years ago 

js :
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});

HTML:

<!-- Section: Features v.3 -->
    <section class="my-5">
        <!-- Section heading -->
        <h2 class="h1-responsive font-weight-bold text-center my-5">Why is it so great?</h2>
        <!-- Section description -->
        <p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <!-- Grid row -->
        <div class="row">
            <!-- Grid column -->
            <div class="col-lg-5 text-center text-lg-left">
                <canvas id="myChart" style="max-width: 500px;"></canvas>
            </div>
            <!-- Grid column -->
            <!-- Grid column -->
            <div class="col-lg-7">
                <!-- Grid row -->
                <div class="row mb-3">
                    <!-- Grid column -->
                    <div class="col-xl-10 col-md-11 col-10">
                        <h5 class="font-weight-bold mb-3">Safety</h5>
                        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
                    </div>
                    <!-- Grid column -->
                </div>
                <!-- Grid row -->
            </div>
            <!--Grid column-->
        </div>
        <!-- Grid row -->
    </section>
    <!-- Section: Features v.3 -->

CSS:
Nothing more


I use the framework Laravel

Thanks !

Piotr Glejzer staff commented 6 years ago

I copied and pasted your code to my file and everything is working well.Is that all your code?
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
hamdinirania
Pro User 15Support score
2Questions 3Answers 0Snippets