first commit project deteksi
This commit is contained in:
Deni Catur Kusumawati
parent
8c38789fa3
commit
262456ee0b
57
app.py
57
app.py
|
|
@ -1,4 +1,6 @@
|
|||
from flask import Flask, render_template, request, jsonify
|
||||
from sklearn.metrics import accuracy_score
|
||||
import tensorflow as tf
|
||||
from tensorflow.keras.models import load_model
|
||||
from tensorflow.keras.preprocessing import image
|
||||
import numpy as np
|
||||
|
|
@ -8,21 +10,33 @@ import uuid
|
|||
import tempfile
|
||||
import os
|
||||
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
dic = {0: 'GIANT', 1: 'LEUKOSIT', 2: 'NORMAL'}
|
||||
|
||||
model = load_model('static/assets/models/Klasifikasi-Et Exception-96.92.h5')
|
||||
# with custom_object_scope({'error_rate': error_rate}):
|
||||
# model = load_model('static/assets/models/Klasifikasi-Et Exception-96.92.h5')
|
||||
|
||||
def error_rate(y_true, y_pred):
|
||||
incorrect = tf.not_equal(tf.argmax(y_true, axis=-1), tf.argmax(y_pred, axis=-1))
|
||||
return tf.reduce_mean(tf.cast(incorrect, tf.float32))
|
||||
|
||||
def load_custom_model(model_path):
|
||||
with tf.keras.utils.custom_object_scope({'error_rate': error_rate}):
|
||||
model = load_model(model_path)
|
||||
return model
|
||||
|
||||
model_path = 'static/assets/models/Klasifikasi-Et Exception-97.69.h5'
|
||||
loaded_model = load_custom_model(model_path)
|
||||
|
||||
# Compile the model with whatever settings you need
|
||||
#model.compile(optimizer=tf.keras.optimizers.Adam(learning_rate=0.001), loss='categorical_crossentropy', metrics=['accuracy'])
|
||||
|
||||
def predict_label(img_path):
|
||||
i = image.load_img(img_path, target_size=(224, 224))
|
||||
i = image.img_to_array(i) / 255.0
|
||||
i = i.reshape(1, 224, 224, 3)
|
||||
|
||||
p = model.predict(i)
|
||||
p = loaded_model.predict(i)
|
||||
|
||||
|
||||
predicted_class = np.argmax(p, axis=-1)
|
||||
|
|
@ -50,15 +64,15 @@ def main():
|
|||
return render_template("index.html")
|
||||
|
||||
@app.route("/giant", methods=['GET'])
|
||||
def cerscospora():
|
||||
def giant():
|
||||
return render_template("giant.html")
|
||||
|
||||
@app.route("/leukosit", methods=['GET'])
|
||||
def rust():
|
||||
def leukosit():
|
||||
return render_template("leukosit.html")
|
||||
|
||||
@app.route("/normal", methods=['GET'])
|
||||
def healthy():
|
||||
def normal():
|
||||
return render_template("normal.html")
|
||||
|
||||
@app.route("/classification", methods=['GET', 'POST'])
|
||||
|
|
@ -78,34 +92,7 @@ def classification():
|
|||
except Exception as e:
|
||||
# Tangani kesalahan jika terjadi
|
||||
return f'Terjadi kesalahan: {str(e)}'
|
||||
|
||||
@app.route("/handing", methods=['GET'])
|
||||
def handing():
|
||||
clasify = request.args.get('clasify')
|
||||
data = []
|
||||
|
||||
if clasify == "GIANT":
|
||||
data.extend([
|
||||
{"text": "Periksa tanaman secara rutin ", "image": "static/assets/images//handling/ru1.jpg"},
|
||||
{"text": "Pemangkasan pada penyakit yang terinfeksi penyakit rust untuk mengurangi penyebaran penyakit tersebut", "image": "static/assets/images//handling/ru2.jpg"},
|
||||
{"text": "Pengunaan fungsida, penggunaan fungsida ini dapat di gunakan untuk mengendalikan pertumbuhan jamur penyebab penyakit rust", "image": "static/assets/images//handling/ru3.jpg"},
|
||||
{"text": "Mengatur kelembaban, Upaya agar kelembababan udara di sekitar tanaman kopi tidak terlalu tinggi karena kelembababn yang tinggi mendukung pertumbuhan jamur", "image": "static/assets/images//handling/ru4.jpg"},
|
||||
])
|
||||
elif clasify == "LEUKOSIT":
|
||||
data.extend([
|
||||
{"text": "Petani dapat mengendalikan penyakit ini menggunakan teknik sanitasi dengan menggunting daun yang sakit kemudian dibakar atau dibenamkan ke dalam tanah.", "image": "static/assets/images//handling/ce1.jpg"},
|
||||
{"text": "Mengurangi kelembapan tanah dengan cara mengurangi penyiraman.", "image": "static/assets/images//handling/ce2.jpg"},
|
||||
{"text": "Menjarangkan tanaman naungan sehingga sinar matahari dapat langsung masuk.", "image": "static/assets/images//handling/ce3.jpg"},
|
||||
{"text": "Melakukan pemupukan berimbang, dan menggunakan fungisida yang tepat.", "image": "static/assets/images//handling/ce4.jpg"},
|
||||
])
|
||||
|
||||
|
||||
response = {
|
||||
"class": clasify,
|
||||
"data": data
|
||||
}
|
||||
|
||||
return jsonify(response)
|
||||
|
||||
|
||||
@app.route("/submit", methods=['POST'])
|
||||
def get_output():
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,190 +0,0 @@
|
|||
.custom-card {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid #75a05d; /* Warna tepi card */
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
}
|
||||
|
||||
.custom-card .card-header {
|
||||
background-color: #75a05d; /* Warna latar belakang header */
|
||||
color: white; /* Warna teks header */
|
||||
border-bottom: 1px solid #75a05d; /* Garis bawah header */
|
||||
border-radius: 10px 10px 0 0; /* Sudut bulat di bagian atas */
|
||||
text-align: center; /* Meletakkan teks di tengah */
|
||||
}
|
||||
|
||||
.custom-card .card-body {
|
||||
padding: 20px; /* Ruang dalam tubuh kartu */
|
||||
}
|
||||
|
||||
|
||||
|
||||
#result {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sample-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#image {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.image_area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height:100%;
|
||||
}
|
||||
|
||||
.preview {
|
||||
overflow: hidden;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
margin: 10px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.modal-lg{
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: .5s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image_area:hover .overlay {
|
||||
height: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#penjelasanContainer {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pop-card {
|
||||
background-color: #ffffff !important; /* Ganti warna latar belakang menjadi hitam */
|
||||
border: 1px solid #75a05d;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
.pop-card .card-header {
|
||||
background-color: #75a05d; /* Warna latar belakang header */
|
||||
color: white; /* Warna teks header */
|
||||
border-bottom: 1px solid #75a05d; /* Garis bawah header */
|
||||
border-radius: 10px 10px 0 0; /* Sudut bulat di bagian atas */
|
||||
text-align: center; /* Meletakkan teks di tengah */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pop-card .card-body {
|
||||
padding: 20px; /* Ruang dalam tubuh kartu */
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #000; /* Adjust the color as needed */
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.card canvas {
|
||||
width: auto; /* Lebar canvas */
|
||||
height: auto; /* Tinggi canvas menyesuaikan */
|
||||
display: block; /* Memastikan elemen canvas menjadi block element */
|
||||
}
|
||||
|
||||
.card canvas {
|
||||
width: 200px; /* Lebar pie chart */
|
||||
height: 200px; /* Tinggi pie chart */
|
||||
}
|
||||
|
||||
|
||||
.title_cs {
|
||||
text-align: center;
|
||||
margin-top: 80px; /* Jarak dari bagian atas */
|
||||
margin-bottom: 80px; /* Jarak ke elemen di bawahnya */
|
||||
}
|
||||
|
||||
.title_cs h1 {
|
||||
color: #037AFB;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* Untuk posisi tengah di halaman, bisa gunakan height: 100vh; pada container jika perlu */
|
||||
}
|
||||
|
||||
.centered-image {
|
||||
max-width: auto;
|
||||
height: auto;
|
||||
/* Atur properti lainnya sesuai kebutuhan */
|
||||
}
|
||||
|
||||
/* CSS untuk mengubah warna ikon panah menjadi hijau muda */
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
color: #037AFB;/* Ubah warna sesuai dengan hijau muda yang diinginkan */
|
||||
/* Jika ikon panah berupa SVG atau gambar, kamu perlu menyesuaikan properti ini */
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%);
|
||||
}
|
||||
|
||||
/* Jika butuh mengubah warna latar belakang dari panah, bisa ditambahkan properti berikut */
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
background-color: transparent; /* Untuk membuat latar belakang menjadi transparan */
|
||||
color: #037AFB; /* Untuk mengubah warna panah (jika menggunakan teks) */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -1,665 +0,0 @@
|
|||
/* Admin 2 Theme */
|
||||
|
||||
body {
|
||||
background: #242935;
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.loader {
|
||||
background: #222531;
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
.material-design-hamburger__layer {
|
||||
background: rgba(116, 121, 133, .5);
|
||||
}
|
||||
|
||||
.material-design-hamburger:hover .material-design-hamburger__layer {
|
||||
background: rgba(116, 121, 133, 1)!important;
|
||||
}
|
||||
|
||||
.lime-header .navbar-nav > li > a {
|
||||
color: rgba(116, 121, 133, .5);
|
||||
}
|
||||
|
||||
.lime-header .navbar-nav > li > a:hover {
|
||||
color: rgba(116, 121, 133, 1);
|
||||
}
|
||||
|
||||
.lime-header .navbar-nav > li.show > a,
|
||||
.lime-header .navbar-nav > li > a:hover {
|
||||
color: rgba(116, 121, 133, 1);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background: #181A25!important;
|
||||
}
|
||||
|
||||
.lime-header .navbar-nav .dropdown .dropdown-menu li a:hover,
|
||||
.dropdown-menu a:hover {
|
||||
background: #242736;
|
||||
color: #b1b9bd;
|
||||
}
|
||||
|
||||
.lime-header .navbar-nav .dropdown .dropdown-menu li a.active:hover
|
||||
.dropdown-menu a.active:hover {
|
||||
background: #037AFB;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lime-header .navbar-nav .dropdown .dropdown-menu li.divider {
|
||||
background: #242736;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top-color: #242736;
|
||||
}
|
||||
|
||||
.lime-header .search input {
|
||||
background: #2C3041;
|
||||
}
|
||||
|
||||
.lime-header .search:hover input,
|
||||
.lime-header .search input:focus,
|
||||
.lime-header .search input:active {
|
||||
background: #3c4054;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
background: rgba(36, 41, 53, .975);
|
||||
}
|
||||
|
||||
.search-results .search-results-header a#closeSearch {
|
||||
color: rgba(158, 162, 173, .5);
|
||||
}
|
||||
|
||||
search-results .search-results-header a#closeSearch:hover {
|
||||
color: rgba(158, 162, 173, 1)!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
.lime-sidebar {
|
||||
background: #202431;
|
||||
}
|
||||
|
||||
.lime-sidebar .lime-sidebar-inner ul li a {
|
||||
color: rgba(116, 121, 133, .8);
|
||||
}
|
||||
|
||||
.lime-sidebar .lime-sidebar-inner ul li a:hover,
|
||||
.lime-sidebar .lime-sidebar-inner ul li.open > a {
|
||||
color: rgba(138, 142, 153, 1);
|
||||
}
|
||||
|
||||
.lime-sidebar .lime-sidebar-inner ul li.active-page > a,
|
||||
.lime-sidebar .lime-sidebar-inner > ul > li > a.active:hover {
|
||||
color: #037AFB;
|
||||
}
|
||||
|
||||
.lime-sidebar .lime-sidebar-inner ul li ul.sub-menu li a.active {
|
||||
color: #9ea3ad;
|
||||
}
|
||||
|
||||
.lime-sidebar .lime-sidebar-inner ul li.sidebar-title {
|
||||
color: rgba(116, 121, 133, .5);
|
||||
}
|
||||
|
||||
.lime-sidebar .lime-sidebar-inner ul li ul.sub-menu {
|
||||
border-color: rgba(116, 121, 133, .2);
|
||||
}
|
||||
|
||||
|
||||
/* Theme Settings */
|
||||
|
||||
.theme-settings-sidebar {
|
||||
background: #212431;
|
||||
}
|
||||
|
||||
.theme-settings-sidebar .theme-item .theme-title {
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
|
||||
/* Components */
|
||||
|
||||
.card {
|
||||
background: #2C3041;
|
||||
box-shadow: 0 3px 10px rgba(0,0, 0,.1);
|
||||
}
|
||||
|
||||
.card .card-body .card-title {
|
||||
color: rgba(255,255,255,.4);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card.text-white .card-body .card-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
background: #202431;
|
||||
border-color: rgba(116, 121, 133, .4);
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: #1F2431;
|
||||
}
|
||||
|
||||
.table {
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.table * {
|
||||
border-color: rgba(116, 121, 133, .3)!important;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background: #242935;
|
||||
border-color: #3d4352;
|
||||
}
|
||||
|
||||
.form-control:hover {
|
||||
background: #242935;
|
||||
border-color: #4f5566;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #242935;
|
||||
box-shadow: none;
|
||||
color: #384C6D;
|
||||
box-shadow: 0 0 0 0.2rem rgba(3, 122, 251, 0.25);
|
||||
background: #242935;
|
||||
}
|
||||
|
||||
.custom-control-label::before {
|
||||
background: #242935;
|
||||
border-color: #3d4352;
|
||||
}
|
||||
|
||||
.custom-control-input:disabled~.custom-control-label::before {
|
||||
background: #242935;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background: #3d4352;
|
||||
border-color: #3d4352;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.custom-file-label {
|
||||
background: #242935;
|
||||
border-color: #3d4352;
|
||||
}
|
||||
|
||||
.custom-file-label:hover {
|
||||
background: #242935;
|
||||
border-color: #4f5566;
|
||||
}
|
||||
|
||||
.custom-file-label:focus {
|
||||
border-color: #242935;
|
||||
box-shadow: none;
|
||||
color: #384C6D;
|
||||
box-shadow: 0 0 0 0.2rem rgba(3, 122, 251, 0.25);
|
||||
background: #242935;
|
||||
}
|
||||
|
||||
.custom-file-label::after {
|
||||
background: #3d4352;
|
||||
border-color: #3d4352;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background: #242935;
|
||||
border-color: #3d4352;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.custom-range::-webkit-slider-runnable-track {
|
||||
background-color: #242935;
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
.btn.active,
|
||||
.btn:active {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
.btn.btn-secondary {
|
||||
background: #3d4352;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.btn.btn-secondary:focus,
|
||||
.btn.btn-secondary.active,
|
||||
.btn.btn-secondary:active,
|
||||
.btn.btn-secondary:hover {
|
||||
background: #4f5566!important;
|
||||
color: #9ba0ab!important;
|
||||
}
|
||||
|
||||
.btn.btn-dark {
|
||||
background: #202431;
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.btn.btn-dark:focus,
|
||||
.btn.btn-dark.active,
|
||||
.btn.btn-dark:active,
|
||||
.btn.btn-dark:hover {
|
||||
background: #1c202b!important;
|
||||
color: #747985!important;
|
||||
}
|
||||
|
||||
.btn.btn-link {
|
||||
color: #037AFB;
|
||||
text-decoration: none!important;
|
||||
}
|
||||
|
||||
.btn.btn-link:hover {
|
||||
background: #1c202b!important;
|
||||
}
|
||||
|
||||
.btn.btn-outline-secondary {
|
||||
border: 1px solid #3D4352;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.btn.btn-outline-secondary:hover {
|
||||
background: #3D4352;
|
||||
border-color: #3D4352;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.btn.btn-outline-dark {
|
||||
border: 1px solid #202431;
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.btn.btn-outline-dark:hover {
|
||||
background: #202431;
|
||||
border-color: #202431;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.btn.btn-outline-light {
|
||||
color: #F4F4F5;
|
||||
}
|
||||
|
||||
.btn.btn-secondary:focus,
|
||||
.btn.btn-secondary.active,
|
||||
.btn.btn-secondary:active {
|
||||
background: #4f5566!important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary:not(:disabled):not(.disabled):active:focus,
|
||||
.btn-secondary:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-secondary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.5);
|
||||
}
|
||||
|
||||
pre {
|
||||
color: #b4b6b9;
|
||||
}
|
||||
|
||||
.table .thead-dark th {
|
||||
color: #a2a2a2;
|
||||
background-color: #212431;
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: #383c4e;
|
||||
}
|
||||
|
||||
.table.table-bordered thead th {
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.table.table-hover tbody tr:hover {
|
||||
background: #383c4e;
|
||||
color: #a2a2a2;
|
||||
}
|
||||
|
||||
.alert.alert-secondary,
|
||||
.badge.badge-secondary {
|
||||
background: #3d4352;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.alert.alert-dark,
|
||||
.badge.badge-dark {
|
||||
background: #202431;
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #037AFB;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-item.show .nav-link,
|
||||
.nav-tabs .nav-link.active {
|
||||
border-color: #037AFB;
|
||||
background: #037AFB;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-item .nav-link:hover {
|
||||
border-color: #2C3041;
|
||||
background: #2C3041;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
background-color: #1F2431;
|
||||
border-color: rgba(116, 121, 133, .3);;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #2C3041;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,.4);
|
||||
}
|
||||
|
||||
.modal-header .close i {
|
||||
color: rgba(158, 162, 173, .5);
|
||||
}
|
||||
|
||||
.modal-header .close:hover i,
|
||||
.modal-header .close:focus {
|
||||
color: rgba(158, 162, 173, 1);
|
||||
}
|
||||
|
||||
.page-link {
|
||||
background: #3d4352;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.page-item.active .page-link,
|
||||
.page-link:focus,
|
||||
.page-link:active,
|
||||
.page-link:hover {
|
||||
background: #4f5566!important;
|
||||
color: #9ba0ab!important;
|
||||
}
|
||||
|
||||
.popover {
|
||||
border: 0;
|
||||
box-shadow: 0 3px 10px rgba(0,0, 0,.1);
|
||||
background: #3d4352;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
padding: 9px 15px;
|
||||
background: #1F2431;
|
||||
border-bottom-color: #414553;
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: 9px 15px;
|
||||
font-size: 13px;
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.popover .arrow:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bs-popover-auto[x-placement^=right] > .arrow::after,
|
||||
.bs-popover-right > .arrow::after {
|
||||
border-right-color: #3d4352;
|
||||
}
|
||||
|
||||
.bs-popover-auto[x-placement^=top] > .arrow::after,
|
||||
.bs-popover-top > .arrow::after {
|
||||
border-top-color: #3d4352;
|
||||
}
|
||||
|
||||
.bs-popover-auto[x-placement^=bottom] > .arrow::after,
|
||||
.bs-popover-bottom > .arrow::after {
|
||||
border-bottom-color: #3d4352;
|
||||
}
|
||||
|
||||
.bs-popover-auto[x-placement^=left] > .arrow::after,
|
||||
.bs-popover-left > .arrow::after {
|
||||
border-left-color: #3d4352;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background-color: rgba(31, 36, 49,.9);
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background-color: rgba(31, 36, 49,.97);
|
||||
border-bottom: 1px solid rgba(116, 121, 133, .2);
|
||||
}
|
||||
|
||||
.plupload_filelist_header,
|
||||
.plupload_filelist_footer,
|
||||
.plupload_scroll .plupload_filelist {
|
||||
background: transparent;
|
||||
border-color: rgba(116, 121, 133, .3);
|
||||
}
|
||||
|
||||
.plupload_filelist_header,
|
||||
.plupload_filelist_footer,
|
||||
.plupload_file_status span {
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.plupload_filelist li {
|
||||
background: transparent;
|
||||
border-color: rgba(116, 121, 133, .3);
|
||||
}
|
||||
|
||||
.plupload_button {
|
||||
background: #3d4352;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.plupload_button:hover{
|
||||
background: #4f5566!important;
|
||||
color: #9ba0ab!important;
|
||||
}
|
||||
|
||||
.plupload_disabled,
|
||||
a.plupload_disabled {
|
||||
background: #4f5566;
|
||||
color: #9ba0ab;
|
||||
}
|
||||
|
||||
.irs--flat .irs-line,
|
||||
.irs--flat .irs-min,
|
||||
.irs--flat .irs-max {
|
||||
background-color: #1F2331;
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.irs--flat .irs-grid-text {
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
|
||||
/* Content */
|
||||
|
||||
.info-text ul {
|
||||
list-style-type: circle;
|
||||
color: rgba(255,255,255,.5);
|
||||
padding-left: 25px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-image {
|
||||
background: url(../../images/dashboard-info-2.svg) center center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.social-media-list .social-media-item {
|
||||
border-bottom: 1px solid rgba(116, 121, 133, .3);
|
||||
}
|
||||
|
||||
.divider,
|
||||
.page-title .divider {
|
||||
background: rgba(116, 121, 133, .3);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
background: #202431;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
color: rgba(116, 121, 133,.5);
|
||||
}
|
||||
|
||||
|
||||
/* Pages */
|
||||
|
||||
/* Profile */
|
||||
|
||||
.profile-header .profile-img img {
|
||||
border-color: #2C3041;
|
||||
}
|
||||
|
||||
.post-header .post-info span.post-author {
|
||||
font-weight: normal;
|
||||
color: rgba(255,255,255,.4);
|
||||
}
|
||||
|
||||
.story-list .story .story-info span.story-author {
|
||||
color: rgba(255,255,255,.4);
|
||||
}
|
||||
|
||||
.mutual-friends-list img {
|
||||
border-color: rgba(116, 121, 133,.3);
|
||||
}
|
||||
|
||||
.post-actions,
|
||||
.post-comments {
|
||||
border-color: rgba(116, 121, 133,.3);
|
||||
}
|
||||
|
||||
.post-actions ul li a {
|
||||
color: #677284;
|
||||
}
|
||||
|
||||
.post-actions ul li a:hover {
|
||||
color: #818a98;
|
||||
}
|
||||
|
||||
.post-comments .post-comm {
|
||||
background: #242935;
|
||||
}
|
||||
|
||||
.post-comments .post-comm .comment-container span.comment-author {
|
||||
color: rgba(255,255,255,.4);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* Mailbox */
|
||||
|
||||
.email-list li a {
|
||||
border-color: rgba(116, 121, 133,.3);
|
||||
}
|
||||
|
||||
.email-list-item,
|
||||
.mailbox-menu ul li a {
|
||||
color: #677284;
|
||||
}
|
||||
|
||||
.mail-header .mail-title {
|
||||
color: #8791a1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* Todo */
|
||||
|
||||
.todo-menu h3 {
|
||||
color: #8791a1;
|
||||
}
|
||||
|
||||
.todo-menu ul li a {
|
||||
color: #677284;
|
||||
}
|
||||
|
||||
.todo-list ul li a {
|
||||
background: #242935;
|
||||
border-color: #3d4352;
|
||||
color: #677284;
|
||||
}
|
||||
|
||||
|
||||
/* File Manager */
|
||||
|
||||
.file-manager-menu ul li a {
|
||||
color: #677284;
|
||||
}
|
||||
|
||||
.folder .folder-info a {
|
||||
color: #747985;
|
||||
}
|
||||
|
||||
.file .file-info span.file-date,
|
||||
.file .file-info span.file-size,
|
||||
.folder .folder-info span {
|
||||
color: rgba(116, 121, 133,.4);
|
||||
}
|
||||
|
||||
|
||||
/* Pricing */
|
||||
|
||||
.pricing {
|
||||
border-color: rgba(116, 121, 133,.3);
|
||||
}
|
||||
|
||||
.pricing li + li {
|
||||
border-color: rgba(116, 121, 133,.3);
|
||||
}
|
||||
|
||||
.pricing span {
|
||||
color: rgba(116, 121, 133,.4);
|
||||
}
|
||||
|
||||
|
||||
/* Help Center */
|
||||
|
||||
.help-menu ul li a,
|
||||
.help-topics li a {
|
||||
color: #677284;
|
||||
}
|
||||
|
||||
.help-menu ul li a:hover {
|
||||
color: #8792a3;
|
||||
}
|
||||
|
||||
|
||||
/* Dashboard */
|
||||
|
||||
.popular-product-list ul li {
|
||||
border-color: rgba(116, 121, 133,.3);
|
||||
}
|
||||
|
|
@ -36,7 +36,14 @@
|
|||
background-color: #a00a86; /* Warna latar belakang saat hover */
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
margin-left: 5px; /* Sesuaikan jarak antara logo dan teks */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4572,7 +4572,7 @@ fieldset:disabled .btn {
|
|||
.nav {
|
||||
--bs-nav-link-padding-x: 1rem;
|
||||
--bs-nav-link-padding-y: 0.5rem;
|
||||
--bs-nav-link-font-weight: ;
|
||||
--bs-nav-link-font-weight: 1rem;
|
||||
--bs-nav-link-color: var(--bs-link-color);
|
||||
--bs-nav-link-hover-color: var(--bs-link-hover-color);
|
||||
--bs-nav-link-disabled-color: #6c757d;
|
||||
|
|
@ -4713,7 +4713,7 @@ fieldset:disabled .btn {
|
|||
--bs-navbar-active-color: rgba(52, 71, 103, 0.9);
|
||||
--bs-navbar-brand-padding-y: 0.59375rem;
|
||||
--bs-navbar-brand-margin-end: 1rem;
|
||||
--bs-navbar-brand-font-size: 0.875rem;
|
||||
--bs-navbar-brand-font-size: 1rem;
|
||||
--bs-navbar-brand-color: rgba(52, 71, 103, 0.9);
|
||||
--bs-navbar-brand-hover-color: rgba(52, 71, 103, 0.9);
|
||||
--bs-navbar-nav-link-padding-x: 0.5rem;
|
||||
|
|
@ -4755,6 +4755,8 @@ fieldset:disabled .btn {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navbar-brand:hover,
|
||||
.navbar-brand:focus {
|
||||
color: var(--bs-navbar-brand-hover-color);
|
||||
|
|
@ -4763,7 +4765,7 @@ fieldset:disabled .btn {
|
|||
.navbar-nav {
|
||||
--bs-nav-link-padding-x: 0;
|
||||
--bs-nav-link-padding-y: 0.5rem;
|
||||
--bs-nav-link-font-weight: ;
|
||||
--bs-nav-link-font-weight: 1rem;
|
||||
--bs-nav-link-color: var(--bs-navbar-color);
|
||||
--bs-nav-link-hover-color: var(--bs-navbar-hover-color);
|
||||
--bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
|
||||
|
|
@ -8963,6 +8965,7 @@ fieldset:disabled .btn {
|
|||
|
||||
.w-100 {
|
||||
width: 100% !important;
|
||||
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
|
|
@ -22368,7 +22371,7 @@ html {
|
|||
color: #344767;
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navbar.navbar-absolute {
|
||||
|
|
@ -22425,6 +22428,7 @@ html {
|
|||
|
||||
.navbar-light {
|
||||
background-color: #fff !important;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-toggler {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 324 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 181 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 604 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 565 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 528 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 379 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 552 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 403 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 690 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 702 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 420 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 700 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
let labels = [];
|
||||
let dataValues = [];
|
||||
|
||||
//fungsi tombol clear data
|
||||
function clearImage() {
|
||||
document.getElementById("upload_image").value = "";
|
||||
$("#result").empty();
|
||||
|
|
@ -57,6 +57,7 @@ $(document).ready(function () {
|
|||
}
|
||||
});
|
||||
|
||||
//halaman modal image crop
|
||||
$modal
|
||||
.on("shown.bs.modal", function () {
|
||||
cropper = new Cropper(image, {
|
||||
|
|
@ -88,7 +89,8 @@ $(document).ready(function () {
|
|||
while (base64data.length % 4 !== 0) {
|
||||
base64data += "=";
|
||||
}
|
||||
|
||||
|
||||
//hasil deteksi
|
||||
$.ajax({
|
||||
url: "/submit",
|
||||
method: "POST",
|
||||
|
|
@ -107,15 +109,15 @@ $(document).ready(function () {
|
|||
<div style="display: grid; grid-template-columns: 50% auto; align-items: center;">
|
||||
<img id="image" height="80%" width="50%" src="${data.img_path}">
|
||||
<div>
|
||||
<h6>Hasil: ${label}</h6>
|
||||
<p>Probabilitas Terbesar: ${highest_probability.toFixed(2)}%</p>
|
||||
<h6>Result: ${label}</h6>
|
||||
<p>Greatest Probability: ${highest_probability.toFixed(2)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Div untuk konten tambahan -->
|
||||
<div>
|
||||
<p>Sistem mengidentifikasi bahwa objek yang dipilih termasuk kedalam kelas ${label}. Untuk penjelasan selengkapnya, dapat klik button berikut</p>
|
||||
<p>The system identifies that the selected object belongs to the class ${label}. For a full explanation, you can click the following button</p>
|
||||
|
||||
<button class="btn btn-info" onclick="location.href='${getLink(label)}'">Baca Selengkapnya</button>
|
||||
<button class="btn btn-sm bg-gradient-dark btn-round mb-0 me-1" onclick="location.href='${getLink(label)}'">Read More</button>
|
||||
</div>
|
||||
|
||||
`);
|
||||
|
|
@ -124,7 +126,7 @@ $(document).ready(function () {
|
|||
|
||||
|
||||
|
||||
// mengambil data untuk pie chart dari respons JSON
|
||||
// mengambil data untuk pie chart probabilitas dari respons JSON
|
||||
const labels = [data.label];
|
||||
|
||||
const dataValues = [data.highest_probability];
|
||||
|
|
@ -173,10 +175,10 @@ $(document).ready(function () {
|
|||
};
|
||||
|
||||
|
||||
// Dapatkan elemen canvas untuk pie chart
|
||||
// mendapatkan elemen canvas untuk pie chart
|
||||
const ctx = document.getElementById('pieChart').getContext('2d');
|
||||
|
||||
// Buat pie chart menggunakan Chart.js
|
||||
// Membuat pie chart menggunakan Chart.js
|
||||
if (window.pieChart && window.pieChart.destroy) {
|
||||
window.pieChart.destroy();
|
||||
}
|
||||
|
|
@ -209,7 +211,7 @@ function clearChartData() {
|
|||
dataValues.length = 0;
|
||||
}
|
||||
|
||||
//carousel tutorial
|
||||
//modal tutorial
|
||||
$(document).ready(function(){
|
||||
$('#tutorialCarousel').carousel();
|
||||
});
|
||||
|
|
@ -223,16 +225,6 @@ function showTutorial() {
|
|||
$('#tutorialModal').modal('hide');
|
||||
}
|
||||
|
||||
// Fungsi pengaturan slide sebelumnya
|
||||
function prevSlide() {
|
||||
$('#tutorialCarousel').carousel('prev');
|
||||
}
|
||||
|
||||
// Fungsi pengaturan slide selanjutnya
|
||||
function nextSlide() {
|
||||
$('#tutorialCarousel').carousel('next');
|
||||
}
|
||||
|
||||
// menutup modal crop
|
||||
function closeCrop() {
|
||||
document.getElementById("upload_image").value = "";
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
|
@ -1,276 +0,0 @@
|
|||
let labels = [];
|
||||
let dataValues = [];
|
||||
|
||||
function clearImage() {
|
||||
document.getElementById("upload_image").value = "";
|
||||
$("#result").empty();
|
||||
$("#penjelasan").hide();
|
||||
$("#penjelasan").empty();
|
||||
$("#hasilDeteksi").hide();
|
||||
$("#pie").hide();
|
||||
// clearChartData();
|
||||
|
||||
|
||||
|
||||
|
||||
// Tambahkan pemanggilan AJAX untuk menghapus gambar
|
||||
$.ajax({
|
||||
url: "/delete_image",
|
||||
type: "POST",
|
||||
success: function (response) {
|
||||
console.log(response);
|
||||
},
|
||||
error: function (error) {
|
||||
console.error(error);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function getLink(prediction) {
|
||||
if (prediction === "Healthy") {
|
||||
return "/healthy";
|
||||
} else if (prediction === "Cerscospora") {
|
||||
return "/cerscospora";
|
||||
} else if (prediction === "Rust") {
|
||||
return "/rust";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Cropping
|
||||
$(document).ready(function () {
|
||||
var $modal = $("#modal");
|
||||
var image = document.getElementById("sample_image");
|
||||
var cropper;
|
||||
|
||||
$("#upload_image").change(function (event) {
|
||||
var files = event.target.files;
|
||||
|
||||
var done = function (url) {
|
||||
image.src = url;
|
||||
$modal.modal("show");
|
||||
};
|
||||
|
||||
if (files && files.length > 0) {
|
||||
reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
done(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
$modal
|
||||
.on("shown.bs.modal", function () {
|
||||
cropper = new Cropper(image, {
|
||||
aspectRatio: 1,
|
||||
viewMode: 3,
|
||||
preview: ".preview",
|
||||
minCropBoxWidth: 100, // Menetapkan lebar minimum crop box menjadi 100 piksel
|
||||
minCropBoxHeight: 100, // Menetapkan tinggi minimum crop box menjadi 100 piksel
|
||||
maxCropBoxWidth: 100, // Menetapkan lebar maksimum crop box menjadi 100 piksel
|
||||
maxCropBoxHeight: 100, // Menetapkan tinggi maksimum crop box menjadi 100 piksel
|
||||
});
|
||||
})
|
||||
.on("hidden.bs.modal", function () {
|
||||
cropper.destroy();
|
||||
cropper = null;
|
||||
});
|
||||
|
||||
$("#crop").click(function () {
|
||||
canvas = cropper.getCroppedCanvas({
|
||||
width: 224,
|
||||
height: 224,
|
||||
});
|
||||
|
||||
canvas.toBlob(function (blob) {
|
||||
var reader = new FileReader();
|
||||
reader.onloadend = function () {
|
||||
var base64data = reader.result.split(",")[1];
|
||||
|
||||
while (base64data.length % 4 !== 0) {
|
||||
base64data += "=";
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "/submit",
|
||||
method: "POST",
|
||||
data: { image: base64data },
|
||||
success: function (data) {
|
||||
$modal.modal("hide");
|
||||
$("#uploaded_image").attr("src", data.img_path);
|
||||
|
||||
var label = data.label;
|
||||
var highest_probability = data.highest_probability;
|
||||
|
||||
$("#hasilDeteksi").show();
|
||||
$("#result").empty();
|
||||
|
||||
var buttonClass =
|
||||
label === "Healthy" ? "btn-success" : "btn-warning";
|
||||
|
||||
var penangananButtonLabel =
|
||||
label === "Healthy"
|
||||
? "Tidak ada penanganan"
|
||||
: "Penanganan penyakit " + label;
|
||||
|
||||
$("#result").append(`
|
||||
<div style="display: grid; grid-template-columns: 50% auto; align-items: center;">
|
||||
<img id="image" height="70%" width="70%" src="${data.img_path}">
|
||||
<div>
|
||||
<h4>Hasil: <button class="btn ${buttonClass}" '">${label}</button></h4>
|
||||
<p>Probabilitas Terbesar: ${highest_probability.toFixed(2)}%</p>
|
||||
${
|
||||
label === "Healthy"
|
||||
? `<button class="btn ${buttonClass}">${penangananButtonLabel}</button>`
|
||||
: `<button class="btn btn-info" onclick="showPenjelasan('${label}')">${penangananButtonLabel}</button>`
|
||||
}
|
||||
<br>
|
||||
<br>
|
||||
<button class="btn btn-info" onclick="location.href='${getLink(label)}'">Baca Selengkapnya</button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Ambil data untuk pie chart dari respons JSON
|
||||
const labels = [data.label];
|
||||
|
||||
const dataValues = [data.highest_probability];
|
||||
|
||||
|
||||
for (const label in data.other_probabilities) {
|
||||
labels.push(label);
|
||||
dataValues.push(data.other_probabilities[label]);
|
||||
}
|
||||
|
||||
console.log('Labels:', labels);
|
||||
console.log('Data Values:', dataValues);
|
||||
|
||||
// Menentukan warna berdasarkan label
|
||||
const backgroundColors = labels.map(label => {
|
||||
switch (label) {
|
||||
case 'GIANT':
|
||||
return 'rgba(0, 100, 0, 0.7)'; // Hijau
|
||||
case 'LEUKOSIT':
|
||||
return 'rgba(255, 206, 86, 0.7)'; // Kuning
|
||||
case 'NORMAL':
|
||||
return 'rgba(102, 51, 0, 0.7)'; // Ungu
|
||||
// Tambahkan warna untuk label lain jika diperlukan
|
||||
default:
|
||||
return 'rgba(255, 99, 132, 0.7)'; // Warna default
|
||||
}
|
||||
});
|
||||
|
||||
// Buat konfigurasi untuk pie chart dengan warna yang sudah ditentukan
|
||||
const config = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: dataValues,
|
||||
backgroundColor: backgroundColors,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
aspectRatio: 1,
|
||||
maintainAspectRatio: false,
|
||||
width: 100,
|
||||
height: 100
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Dapatkan elemen canvas untuk pie chart
|
||||
const ctx = document.getElementById('pieChart').getContext('2d');
|
||||
|
||||
// Buat pie chart menggunakan Chart.js
|
||||
if (window.pieChart && window.pieChart.destroy) {
|
||||
window.pieChart.destroy();
|
||||
}
|
||||
|
||||
window.pieChart = new Chart(ctx, config);
|
||||
|
||||
// Menampilkan elemen card setelah chart dibuat
|
||||
$("#pie").show();
|
||||
|
||||
// Menampilkan kembali elemen card setelah chart dibuat
|
||||
const pieCard = document.getElementById('pie');
|
||||
pieCard.style.display = 'block';
|
||||
|
||||
|
||||
|
||||
},
|
||||
error: function (error) {
|
||||
console.log(error);
|
||||
},
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function showPenjelasan(penyakit) {
|
||||
var penjelasanContainer = document.getElementById("penjelasanContainer");
|
||||
|
||||
$.ajax({
|
||||
url: `/handing?clasify=${penyakit}`,
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
let clasify = response.class;
|
||||
let guides = response.data;
|
||||
|
||||
console.log(penyakit)
|
||||
var cardBody = penjelasanContainer.querySelector(".card-body");
|
||||
|
||||
let penjelasan =
|
||||
`<div style='max-height: 300px; overflow: auto;'><p>${clasify} terdeteksi. Berikut adalah langkah-langkah penanganan yang dapat Anda lakukan:</p>`;
|
||||
|
||||
guides.map((data, i) => {
|
||||
penjelasan += "<li>" + data.text;
|
||||
|
||||
if (data.image != null) {
|
||||
penjelasan +=
|
||||
"<img src='" +
|
||||
data.image +
|
||||
"' style='width: 100px; height: 100px; object-fit: cover; display: block; margin: 0 auto' />";
|
||||
}
|
||||
penjelasan += "</li>";
|
||||
});
|
||||
|
||||
penjelasan += "</div>";
|
||||
cardBody.innerHTML = penjelasan;
|
||||
penjelasanContainer.style.display = "block";
|
||||
},
|
||||
error: function (error) {
|
||||
console.error(error);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function closePenjelasan() {
|
||||
var penjelasanContainer = document.getElementById("penjelasanContainer");
|
||||
penjelasanContainer.style.display = "none";
|
||||
}
|
||||
|
||||
function clearChartData() {
|
||||
labels.length = 0;
|
||||
dataValues.length = 0;
|
||||
}
|
||||
|
||||
|
||||
function showTutorial() {
|
||||
$('#tutorialModal').modal('show'); // Tampilkan modal
|
||||
}
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
showTutorial();
|
||||
};
|
||||
|
|
@ -1,297 +0,0 @@
|
|||
|
||||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
var submenu_animation_speed = 200,
|
||||
submenu_opacity_animation = true;
|
||||
|
||||
|
||||
|
||||
var simulateClick = function (elem) {
|
||||
// Create our event (with options)
|
||||
var evt = new MouseEvent('click', {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
view: window
|
||||
});
|
||||
// If cancelled, don't dispatch our event
|
||||
var canceled = !elem.dispatchEvent(evt);
|
||||
};
|
||||
|
||||
var delay = (function(){
|
||||
var timer = 0;
|
||||
return function(callback, ms){
|
||||
clearTimeout (timer);
|
||||
timer = setTimeout(callback, ms);
|
||||
};
|
||||
})();
|
||||
|
||||
var limeSidebar = function() {
|
||||
|
||||
if ($('.material-design-hamburger__icon').length === 1) {
|
||||
document.querySelector('.material-design-hamburger__icon').addEventListener(
|
||||
'click',
|
||||
function() {
|
||||
var child;
|
||||
document.body.classList.toggle('background--blur');
|
||||
this.parentNode.nextElementSibling.classList.toggle('menu--on');
|
||||
|
||||
child = this.childNodes[1].classList;
|
||||
|
||||
if (child.contains('material-design-hamburger__icon--to-arrow')) {
|
||||
child.remove('material-design-hamburger__icon--to-arrow');
|
||||
child.add('material-design-hamburger__icon--from-arrow');
|
||||
} else {
|
||||
child.remove('material-design-hamburger__icon--from-arrow');
|
||||
child.add('material-design-hamburger__icon--to-arrow');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
$(window).click(function() {
|
||||
if($('body').hasClass('sidebar-show')) {
|
||||
var navToggle = document.querySelector('.navigation-toggle a');
|
||||
simulateClick(navToggle);
|
||||
}
|
||||
});
|
||||
|
||||
$('.lime-sidebar').click(function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
$('.navigation-toggle a').on('click', function(){
|
||||
$('body').toggleClass('sidebar-show');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var select_sub_menus = $('.accordion-menu li:not(.open) .sub-menu'),
|
||||
active_page_sub_menu_link = $('.accordion-menu li.active-page > a');
|
||||
|
||||
// Hide all sub-menus
|
||||
select_sub_menus.hide();
|
||||
|
||||
|
||||
if(submenu_opacity_animation == false) {
|
||||
$('.sub-menu li').each(function(i){
|
||||
$(this).addClass('animation');
|
||||
});
|
||||
};
|
||||
|
||||
// Accordion
|
||||
$('.accordion-menu li a').on('click', function() {
|
||||
var sub_menu = $(this).next('.sub-menu'),
|
||||
parent_list_el = $(this).parent('li'),
|
||||
active_list_element = $('.accordion-menu > li.open'),
|
||||
show_sub_menu = function() {
|
||||
sub_menu.slideDown(submenu_animation_speed);
|
||||
parent_list_el.addClass('open');
|
||||
if(submenu_opacity_animation === true) {
|
||||
$('.open .sub-menu li').each(function(i){
|
||||
var t = $(this);
|
||||
setTimeout(function(){ t.addClass('animation'); }, (i+1) * 25);
|
||||
});
|
||||
};
|
||||
},
|
||||
hide_sub_menu = function() {
|
||||
if(submenu_opacity_animation === true) {
|
||||
$('.open .sub-menu li').each(function(i){
|
||||
var t = $(this);
|
||||
setTimeout(function(){ t.removeClass('animation'); }, (i+1) * 15);
|
||||
});
|
||||
};
|
||||
sub_menu.slideUp(submenu_animation_speed);
|
||||
parent_list_el.removeClass('open');
|
||||
},
|
||||
hide_active_menu = function() {
|
||||
$('.accordion-menu > li.open > .sub-menu').slideUp(submenu_animation_speed);
|
||||
active_list_element.removeClass('open');
|
||||
};
|
||||
|
||||
if(sub_menu.length) {
|
||||
|
||||
if(!parent_list_el.hasClass('open')) {
|
||||
if(active_list_element.length) {
|
||||
hide_active_menu();
|
||||
};
|
||||
show_sub_menu();
|
||||
} else {
|
||||
hide_sub_menu();
|
||||
};
|
||||
|
||||
return false;
|
||||
|
||||
};
|
||||
});
|
||||
|
||||
if($('.active-page > .sub-menu').length) {
|
||||
active_page_sub_menu_link.click();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
var limeHeader = function(){
|
||||
if($('body').hasClass('header-fixed')) {
|
||||
$(window).scroll(function(){
|
||||
var st = $(this).scrollTop(),
|
||||
stf = 20;
|
||||
if (st > stf){
|
||||
$('.lime-header').addClass('scroll-header');
|
||||
} else {
|
||||
$('.lime-header').removeClass('scroll-header');
|
||||
}
|
||||
});
|
||||
|
||||
$(window).on('load', function(){
|
||||
var st = $(this).scrollTop(),
|
||||
stf = 0;
|
||||
if (st > stf){
|
||||
$('.lime-header').addClass('scroll-header');
|
||||
} else {
|
||||
$('.lime-header').removeClass('scroll-header');
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
var theme_settings = function() {
|
||||
|
||||
$(window).click(function() {
|
||||
if($('body').hasClass('show-theme-settings')) {
|
||||
var navToggle = document.querySelector('.theme-settings-link');
|
||||
simulateClick(navToggle);
|
||||
}
|
||||
});
|
||||
|
||||
$('.theme-settings-sidebar').click(function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
$('.theme-settings-link').on('click', function() {
|
||||
$('body').toggleClass('show-theme-settings');
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
var search_f = function() {
|
||||
$('#search input').on('input', function() {
|
||||
var value = $(this).val();
|
||||
if(value.length > 0) {
|
||||
$('body').addClass('searching');
|
||||
$('span.search-input-value').html(value);
|
||||
} else {
|
||||
$('body').removeClass('searching');
|
||||
}
|
||||
$('.search-results .search-result-list').fadeOut(1);
|
||||
delay(function(){
|
||||
if(!$.trim($('#search input').val()).length != 0) {
|
||||
$('.search-results .search-result-list').fadeOut(1);
|
||||
} else {
|
||||
$('.search-results .search-result-list').fadeIn();
|
||||
}
|
||||
}, 500 );
|
||||
});
|
||||
|
||||
$(document).keyup(function(e) {
|
||||
if($('body').hasClass('searching')) {
|
||||
if (e.keyCode === 27) {
|
||||
$('body').removeClass('searching');
|
||||
} // Close on escape
|
||||
}
|
||||
});
|
||||
|
||||
$(document).mouseup(function (e){
|
||||
var container = $(".search-results");
|
||||
var container2 = $("#search input");
|
||||
if (!container.is(e.target)
|
||||
&& !container2.is(e.target)
|
||||
&& container.has(e.target).length === 0
|
||||
&& container2.has(e.target).length === 0) {
|
||||
$('body').removeClass('searching');
|
||||
}
|
||||
});
|
||||
|
||||
$('#closeSearch').on('click', function(){
|
||||
$('body').removeClass('searching');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var plugins_init = function(){
|
||||
// Slimscroll
|
||||
$('.slimscroll').slimScroll({
|
||||
wheelStep: 5
|
||||
});
|
||||
|
||||
$('[data-toggle="popover"]').popover();
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
|
||||
var imageCrop = function(){
|
||||
if($(".image-crop").length) {
|
||||
var $image = $(".image-crop > img");
|
||||
|
||||
$image.cropper({
|
||||
preview: ".img-preview"
|
||||
});
|
||||
|
||||
$("#zoomIn").on('click', function() {
|
||||
$image.cropper('zoom', 0.1);
|
||||
});
|
||||
|
||||
$("#zoomOut").on('click', function() {
|
||||
$image.cropper('zoom', -0.1);
|
||||
});
|
||||
|
||||
$("#rotateLeft").on('click', function() {
|
||||
$image.cropper('rotate', 45);
|
||||
});
|
||||
|
||||
$("#rotateRight").on('click', function() {
|
||||
$image.cropper('rotate', -45);
|
||||
});
|
||||
|
||||
$("#clear").on('click', function() {
|
||||
$image.cropper('clear');
|
||||
});
|
||||
|
||||
var $replaceWith = $('#replaceWith');
|
||||
$('#replace').click(function () {
|
||||
$image.cropper('replace', $replaceWith.val());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
imageCrop();
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
var validation = Array.prototype.filter.call(forms, function(form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
|
||||
};
|
||||
|
||||
limeSidebar();
|
||||
limeHeader();
|
||||
theme_settings();
|
||||
search_f();
|
||||
plugins_init();
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(window).on("load", function () {
|
||||
setTimeout(function() {
|
||||
$('body').addClass('no-loader')}, 1000)
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
$(document).ready(function(){"use strict";var e,o=function(e){var o=new MouseEvent("click",{bubbles:!0,cancelable:!0,view:window});e.dispatchEvent(o)},n=(e=0,function(o,n){clearTimeout(e),e=setTimeout(o,n)});!function(){1===$(".material-design-hamburger__icon").length&&document.querySelector(".material-design-hamburger__icon").addEventListener("click",function(){var e;document.body.classList.toggle("background--blur"),this.parentNode.nextElementSibling.classList.toggle("menu--on"),(e=this.childNodes[1].classList).contains("material-design-hamburger__icon--to-arrow")?(e.remove("material-design-hamburger__icon--to-arrow"),e.add("material-design-hamburger__icon--from-arrow")):(e.remove("material-design-hamburger__icon--from-arrow"),e.add("material-design-hamburger__icon--to-arrow"))}),$(window).click(function(){if($("body").hasClass("sidebar-show")){var e=document.querySelector(".navigation-toggle a");o(e)}}),$(".lime-sidebar").click(function(e){e.stopPropagation()}),$(".navigation-toggle a").on("click",function(){return $("body").toggleClass("sidebar-show"),!1});var e=$(".accordion-menu li:not(.open) .sub-menu"),n=$(".accordion-menu li.active-page > a");e.hide(),$(".accordion-menu li a").on("click",function(){var e=$(this).next(".sub-menu"),o=$(this).parent("li"),n=$(".accordion-menu > li.open");if(e.length)return o.hasClass("open")?($(".open .sub-menu li").each(function(e){var o=$(this);setTimeout(function(){o.removeClass("animation")},15*(e+1))}),e.slideUp(200),o.removeClass("open")):(n.length&&($(".accordion-menu > li.open > .sub-menu").slideUp(200),n.removeClass("open")),e.slideDown(200),o.addClass("open"),$(".open .sub-menu li").each(function(e){var o=$(this);setTimeout(function(){o.addClass("animation")},25*(e+1))})),!1}),$(".active-page > .sub-menu").length&&n.click()}(),$("body").hasClass("header-fixed")&&($(window).scroll(function(){$(this).scrollTop()>20?$(".lime-header").addClass("scroll-header"):$(".lime-header").removeClass("scroll-header")}),$(window).on("load",function(){$(this).scrollTop()>0?$(".lime-header").addClass("scroll-header"):$(".lime-header").removeClass("scroll-header")})),$(window).click(function(){if($("body").hasClass("show-theme-settings")){var e=document.querySelector(".theme-settings-link");o(e)}}),$(".theme-settings-sidebar").click(function(e){e.stopPropagation()}),$(".theme-settings-link").on("click",function(){return $("body").toggleClass("show-theme-settings"),!1}),$("#search input").on("input",function(){var e=$(this).val();e.length>0?($("body").addClass("searching"),$("span.search-input-value").html(e)):$("body").removeClass("searching"),$(".search-results .search-result-list").fadeOut(1),n(function(){0!=!$.trim($("#search input").val()).length?$(".search-results .search-result-list").fadeOut(1):$(".search-results .search-result-list").fadeIn()},500)}),$(document).keyup(function(e){$("body").hasClass("searching")&&27===e.keyCode&&$("body").removeClass("searching")}),$(document).mouseup(function(e){var o=$(".search-results"),n=$("#search input");o.is(e.target)||n.is(e.target)||0!==o.has(e.target).length||0!==n.has(e.target).length||$("body").removeClass("searching")}),$("#closeSearch").on("click",function(){$("body").removeClass("searching")}),function(){$(".slimscroll").slimScroll({wheelStep:5}),$('[data-toggle="popover"]').popover(),$('[data-toggle="tooltip"]').tooltip();!function(){if($(".image-crop").length){var e=$(".image-crop > img");e.cropper({preview:".img-preview"}),$("#zoomIn").on("click",function(){e.cropper("zoom",.1)}),$("#zoomOut").on("click",function(){e.cropper("zoom",-.1)}),$("#rotateLeft").on("click",function(){e.cropper("rotate",45)}),$("#rotateRight").on("click",function(){e.cropper("rotate",-45)}),$("#clear").on("click",function(){e.cropper("clear")});var o=$("#replaceWith");$("#replace").click(function(){e.cropper("replace",o.val())})}}(),window.addEventListener("load",function(){var e=document.getElementsByClassName("needs-validation");Array.prototype.filter.call(e,function(e){e.addEventListener("submit",function(o){!1===e.checkValidity()&&(o.preventDefault(),o.stopPropagation()),e.classList.add("was-validated")},!1)})},!1)}()}),$(window).on("load",function(){setTimeout(function(){$("body").addClass("no-loader")},1e3)});
|
||||
Binary file not shown.
|
|
@ -1,585 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
var options = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "Desktops",
|
||||
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
|
||||
}],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'straight'
|
||||
},
|
||||
title: {
|
||||
text: 'Product Trends by Month',
|
||||
align: 'left'
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.5
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#apex1"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
var options2 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
series: [{
|
||||
name: 'series1',
|
||||
data: [31, 40, 28, 51, 42, 109, 100]
|
||||
}, {
|
||||
name: 'series2',
|
||||
data: [11, 32, 45, 32, 34, 52, 41]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
var chart2 = new ApexCharts(
|
||||
document.querySelector("#apex2"),
|
||||
options2
|
||||
);
|
||||
|
||||
chart2.render();
|
||||
|
||||
var options3 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||||
}, {
|
||||
name: 'Free Cash Flow',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '$ (thousands)'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart3 = new ApexCharts(
|
||||
document.querySelector("#apex3"),
|
||||
options3
|
||||
);
|
||||
|
||||
chart3.render();
|
||||
|
||||
var options4 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
|
||||
}
|
||||
}
|
||||
|
||||
var chart4 = new ApexCharts(
|
||||
document.querySelector("#apex4"),
|
||||
options4
|
||||
);
|
||||
|
||||
chart4.render();
|
||||
|
||||
var options5 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'candlestick',
|
||||
},
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
title: {
|
||||
text: 'CandleStick Chart',
|
||||
align: 'left'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart5 = new ApexCharts(
|
||||
document.querySelector("#apex5"),
|
||||
options5
|
||||
);
|
||||
|
||||
chart5.render();
|
||||
|
||||
|
||||
var options6 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
zoom: {
|
||||
enabled: true,
|
||||
type: 'xy'
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "SAMPLE A",
|
||||
data: [
|
||||
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
|
||||
},{
|
||||
name: "SAMPLE B",
|
||||
data: [
|
||||
[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
|
||||
},{
|
||||
name: "SAMPLE C",
|
||||
data: [
|
||||
[21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0], [16.4, 0]]
|
||||
}],
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
labels: {
|
||||
formatter: function(val) {
|
||||
return parseFloat(val).toFixed(1)
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7
|
||||
}
|
||||
}
|
||||
|
||||
var chart6 = new ApexCharts(
|
||||
document.querySelector("#apex6"),
|
||||
options6
|
||||
);
|
||||
|
||||
chart6.render();
|
||||
|
||||
|
||||
|
||||
var options7 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
stacked: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 2, 5],
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
},
|
||||
colors: ['#3A5794', '#A5C351', '#E14A84'],
|
||||
series: [{
|
||||
name: 'Facebook',
|
||||
type: 'column',
|
||||
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
|
||||
}, {
|
||||
name: 'Vine',
|
||||
type: 'area',
|
||||
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
|
||||
}, {
|
||||
name: 'Dribbble',
|
||||
type: 'line',
|
||||
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
|
||||
}],
|
||||
fill: {
|
||||
opacity: [0.85,0.25,1],
|
||||
gradient: {
|
||||
inverseColors: false,
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
opacityFrom: 0.85,
|
||||
opacityTo: 0.55,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
xaxis: {
|
||||
type:'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if(typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " views";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
useSeriesColors: true
|
||||
},
|
||||
markers: {
|
||||
customHTML: [
|
||||
function() {
|
||||
return ''
|
||||
}, function() {
|
||||
return ''
|
||||
}, function() {
|
||||
return ''
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart7 = new ApexCharts(
|
||||
document.querySelector("#apex7"),
|
||||
options7
|
||||
);
|
||||
|
||||
chart7.render();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// CHARTJS *****
|
||||
|
||||
|
||||
new Chart(document.getElementById("chartjs1"),{"type":"line","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"borderColor":"rgb(75, 192, 192)","lineTension":0.1}]},"options":{}});
|
||||
|
||||
|
||||
new Chart(document.getElementById("chartjs2"),{"type":"bar","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"backgroundColor":["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],"borderColor":["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)","rgb(54, 162, 235)","rgb(153, 102, 255)","rgb(201, 203, 207)"],"borderWidth":1}]},"options":{"scales":{"yAxes":[{"ticks":{"beginAtZero":true}}]}}});
|
||||
|
||||
new Chart(document.getElementById("chartjs3"),{"type":"radar","data":{"labels":["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"],"datasets":[{"label":"My First Dataset","data":[65,59,90,81,56,55,40],"fill":true,"backgroundColor":"rgba(255, 99, 132, 0.2)","borderColor":"rgb(255, 99, 132)","pointBackgroundColor":"rgb(255, 99, 132)","pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff","pointHoverBorderColor":"rgb(255, 99, 132)"},{"label":"My Second Dataset","data":[28,48,40,19,96,27,100],"fill":true,"backgroundColor":"rgba(54, 162, 235, 0.2)","borderColor":"rgb(54, 162, 235)","pointBackgroundColor":"rgb(54, 162, 235)","pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff","pointHoverBorderColor":"rgb(54, 162, 235)"}]},"options":{"elements":{"line":{"tension":0,"borderWidth":3}}}});
|
||||
|
||||
new Chart(document.getElementById("chartjs4"),{"type":"doughnut","data":{"labels":["Red","Blue","Yellow"],"datasets":[{"label":"My First Dataset","data":[300,50,100],"backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]}]}});
|
||||
});
|
||||
|
|
@ -1,615 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
var options = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
foreColor: '#747985'
|
||||
},
|
||||
series: [{
|
||||
name: "Desktops",
|
||||
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
|
||||
}],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'straight'
|
||||
},
|
||||
title: {
|
||||
text: 'Product Trends by Month',
|
||||
align: 'left'
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['#242835', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.5
|
||||
},
|
||||
borderColor: '#747985'
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#apex1"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
var options2 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area',
|
||||
foreColor: '#747985'
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
series: [{
|
||||
name: 'series1',
|
||||
data: [31, 40, 28, 51, 42, 109, 100]
|
||||
}, {
|
||||
name: 'series2',
|
||||
data: [11, 32, 45, 32, 34, 52, 41]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#747985'
|
||||
}
|
||||
}
|
||||
|
||||
var chart2 = new ApexCharts(
|
||||
document.querySelector("#apex2"),
|
||||
options2
|
||||
);
|
||||
|
||||
chart2.render();
|
||||
|
||||
var options3 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
foreColor: '#747985'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||||
}, {
|
||||
name: 'Free Cash Flow',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '$ (thousands)'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#747985'
|
||||
}
|
||||
}
|
||||
|
||||
var chart3 = new ApexCharts(
|
||||
document.querySelector("#apex3"),
|
||||
options3
|
||||
);
|
||||
|
||||
chart3.render();
|
||||
|
||||
var options4 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
foreColor: '#747985'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#747985'
|
||||
}
|
||||
}
|
||||
|
||||
var chart4 = new ApexCharts(
|
||||
document.querySelector("#apex4"),
|
||||
options4
|
||||
);
|
||||
|
||||
chart4.render();
|
||||
|
||||
var options5 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'candlestick',
|
||||
foreColor: '#747985'
|
||||
},
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
title: {
|
||||
text: 'CandleStick Chart',
|
||||
align: 'left'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#747985'
|
||||
}
|
||||
}
|
||||
|
||||
var chart5 = new ApexCharts(
|
||||
document.querySelector("#apex5"),
|
||||
options5
|
||||
);
|
||||
|
||||
chart5.render();
|
||||
|
||||
|
||||
var options6 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
zoom: {
|
||||
enabled: true,
|
||||
type: 'xy'
|
||||
},
|
||||
foreColor: '#747985'
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "SAMPLE A",
|
||||
data: [
|
||||
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
|
||||
},{
|
||||
name: "SAMPLE B",
|
||||
data: [
|
||||
[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
|
||||
},{
|
||||
name: "SAMPLE C",
|
||||
data: [
|
||||
[21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0], [16.4, 0]]
|
||||
}],
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
labels: {
|
||||
formatter: function(val) {
|
||||
return parseFloat(val).toFixed(1)
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#747985'
|
||||
}
|
||||
}
|
||||
|
||||
var chart6 = new ApexCharts(
|
||||
document.querySelector("#apex6"),
|
||||
options6
|
||||
);
|
||||
|
||||
chart6.render();
|
||||
|
||||
|
||||
|
||||
var options7 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
stacked: false,
|
||||
foreColor: '#747985'
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 2, 5],
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
},
|
||||
colors: ['#3A5794', '#A5C351', '#E14A84'],
|
||||
series: [{
|
||||
name: 'Facebook',
|
||||
type: 'column',
|
||||
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
|
||||
}, {
|
||||
name: 'Vine',
|
||||
type: 'area',
|
||||
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
|
||||
}, {
|
||||
name: 'Dribbble',
|
||||
type: 'line',
|
||||
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
|
||||
}],
|
||||
fill: {
|
||||
opacity: [0.85,0.25,1],
|
||||
gradient: {
|
||||
inverseColors: false,
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
opacityFrom: 0.85,
|
||||
opacityTo: 0.55,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
xaxis: {
|
||||
type:'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if(typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " views";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
useSeriesColors: true
|
||||
},
|
||||
markers: {
|
||||
customHTML: [
|
||||
function() {
|
||||
return ''
|
||||
}, function() {
|
||||
return ''
|
||||
}, function() {
|
||||
return ''
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#747985'
|
||||
}
|
||||
}
|
||||
|
||||
var chart7 = new ApexCharts(
|
||||
document.querySelector("#apex7"),
|
||||
options7
|
||||
);
|
||||
|
||||
chart7.render();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// CHARTJS *****
|
||||
|
||||
Chart.defaults.global.defaultFontColor = '#747985';
|
||||
new Chart(document.getElementById("chartjs1"),{"type":"line","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"borderColor":"rgb(75, 192, 192)","lineTension":0.1}]},"options":{}});
|
||||
|
||||
|
||||
new Chart(document.getElementById("chartjs2"),{"type":"bar","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"backgroundColor":["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],"borderColor":["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)","rgb(54, 162, 235)","rgb(153, 102, 255)","rgb(201, 203, 207)"],"borderWidth":1}]},"options":{"scales":{"yAxes":[{"ticks":{"beginAtZero":true}}]}}});
|
||||
|
||||
new Chart(document.getElementById("chartjs3"),{"type":"radar","data":{"labels":["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"],"datasets":[{"label":"My First Dataset","data":[65,59,90,81,56,55,40],"fill":true,"backgroundColor":"rgba(255, 99, 132, 0.2)","borderColor":"rgb(255, 99, 132)","pointBackgroundColor":"rgb(255, 99, 132)","pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff","pointHoverBorderColor":"rgb(255, 99, 132)"},{"label":"My Second Dataset","data":[28,48,40,19,96,27,100],"fill":true,"backgroundColor":"rgba(54, 162, 235, 0.2)","borderColor":"rgb(54, 162, 235)","pointBackgroundColor":"rgb(54, 162, 235)","pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff","pointHoverBorderColor":"rgb(54, 162, 235)"}]},"options":{"elements":{"line":{"tension":0,"borderWidth":3}},scale: { ticks: {
|
||||
fontColor: "#747985",
|
||||
backdropColor: "transparent",
|
||||
} }}});
|
||||
|
||||
new Chart(document.getElementById("chartjs4"),{"type":"doughnut","data":{"labels":["Red","Blue","Yellow"],"datasets":[{"label":"My First Dataset","data":[300,50,100],"backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]}]}});
|
||||
|
||||
});
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
$('#themes-info').on('hidden.bs.modal', function (e) {
|
||||
|
||||
setTimeout(function() {
|
||||
toastr.options = {
|
||||
progressBar: true,
|
||||
showMethod: 'fadeIn',
|
||||
hideMethod: 'fadeOut',
|
||||
timeOut: 5000
|
||||
};
|
||||
toastr.success('Try searching something!');
|
||||
}, 1000);
|
||||
});
|
||||
var ctx = document.getElementById('visitorsChart');
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors'],
|
||||
datasets: [{
|
||||
|
||||
label: 'Total',
|
||||
data: [3, 6, 4, 5, 6, 5, 3, 5, 6, 5, 4],
|
||||
backgroundColor: '#5780F7'
|
||||
}, {
|
||||
label: 'Unique',
|
||||
data: [2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2],
|
||||
backgroundColor: '#F4F4F5'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: 0 // place legend on the right side of chart
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: 0,
|
||||
stacked: true,
|
||||
ticks: {
|
||||
display: 0
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: 0,
|
||||
stacked: true,
|
||||
ticks: {
|
||||
display: 0
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
|
||||
colors:['#FFCD36', '#5780F7', '#06BA54'],
|
||||
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
series: [{
|
||||
name: 'Space',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 63, 60]
|
||||
}, {
|
||||
name: 'Modern',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 89, 95]
|
||||
}, {
|
||||
name: 'Alpha',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41, 39, 46]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan'],
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#apex1"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
$(window).on('load', function() {
|
||||
setTimeout(function() {
|
||||
$('#themes-info').modal('show');
|
||||
}, 1600)
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
$('#themes-info').on('hidden.bs.modal', function (e) {
|
||||
|
||||
setTimeout(function() {
|
||||
toastr.options = {
|
||||
progressBar: true,
|
||||
showMethod: 'fadeIn',
|
||||
hideMethod: 'fadeOut',
|
||||
timeOut: 5000
|
||||
};
|
||||
toastr.success('Try searching something!');
|
||||
}, 1000);
|
||||
});
|
||||
var ctx = document.getElementById('visitorsChart');
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors', 'Visitors'],
|
||||
datasets: [{
|
||||
|
||||
label: 'Total',
|
||||
data: [3, 6, 4, 5, 6, 5, 3, 5, 6, 5, 4],
|
||||
backgroundColor: '#5780F7'
|
||||
}, {
|
||||
label: 'Unique',
|
||||
data: [2, 4, 2, 4, 2, 4, 2, 4, 2, 4, 2],
|
||||
backgroundColor: '#1F2331'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: 0 // place legend on the right side of chart
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: 0,
|
||||
stacked: true,
|
||||
ticks: {
|
||||
display: 0
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: 0,
|
||||
stacked: true,
|
||||
ticks: {
|
||||
display: 0
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
foreColor: '#747985'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
|
||||
colors:['#FFCD36', '#5780F7', '#06BA54'],
|
||||
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
series: [{
|
||||
name: 'Space',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 63, 60]
|
||||
}, {
|
||||
name: 'Modern',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 89, 95]
|
||||
}, {
|
||||
name: 'Alpha',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41, 39, 46]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan'],
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#747985'
|
||||
}
|
||||
}
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#apex1"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
new Chart(document.getElementById("productsChart"),{
|
||||
"type": "doughnut",
|
||||
"data": {
|
||||
"labels": ["Alpha","Space","Modern"],
|
||||
"datasets": [{
|
||||
"label": "My First Dataset",
|
||||
"data": [327,82,145],
|
||||
"backgroundColor": ["#06BA54","#FFCD36","#E6E6E6"]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(window).on('load', function() {
|
||||
setTimeout(function() {
|
||||
$('#themes-info').modal('show');
|
||||
}, 1600)
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
$("#zoom_01").elevateZoom();
|
||||
$("#zoom_02").elevateZoom({ zoomType : "inner", cursor: "crosshair" });
|
||||
$("#zoom_03").elevateZoom({ zoomType : "lens", lensShape : "round", lensSize : 200 });
|
||||
$("#zoom_04").elevateZoom({scrollZoom : true, zoomWindowPosition: 11});
|
||||
|
||||
});
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
$("#uploader").pluploadQueue({
|
||||
// General settings
|
||||
runtimes : 'html5,flash,silverlight,html4',
|
||||
url : "/examples/upload",
|
||||
|
||||
chunk_size : '1mb',
|
||||
rename : true,
|
||||
dragdrop: true,
|
||||
|
||||
filters : {
|
||||
// Maximum file size
|
||||
max_file_size : '10mb',
|
||||
// Specify what files to browse for
|
||||
mime_types: [
|
||||
{title : "Image files", extensions : "jpg,gif,png"},
|
||||
{title : "Zip files", extensions : "zip"}
|
||||
]
|
||||
},
|
||||
|
||||
// Resize images on clientside if we can
|
||||
resize: {
|
||||
width : 200,
|
||||
height : 200,
|
||||
quality : 90,
|
||||
crop: true // crop to exact dimensions
|
||||
},
|
||||
|
||||
|
||||
// Flash settings
|
||||
flash_swf_url : '../../assets/plugins/plupload/js/Moxie.swf',
|
||||
|
||||
// Silverlight settings
|
||||
silverlight_xap_url : '../../assets/plugins/plupload/js/Moxie.xap'
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
$('select').select2();
|
||||
|
||||
$(".js-example-basic-multiple-limit").select2({
|
||||
maximumSelectionLength: 2
|
||||
});
|
||||
|
||||
$(".js-example-tokenizer").select2({
|
||||
tags: true,
|
||||
tokenSeparators: [',', ' ']
|
||||
});
|
||||
|
||||
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
|
||||
|
||||
$(".js-example-data-array").select2({
|
||||
data: data
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
$("#slider1").ionRangeSlider();
|
||||
|
||||
$("#slider2").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
prefix: "$"
|
||||
});
|
||||
|
||||
$("#slider3").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500
|
||||
});
|
||||
|
||||
$("#slider4").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500,
|
||||
step: 250
|
||||
});
|
||||
});
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
$('#successToast').on('click', function(){
|
||||
toastr.success('Are you the 6 fingered man?')
|
||||
});
|
||||
|
||||
$('#infoToast').on('click', function(){
|
||||
toastr.info('I do not think that means what you think it means.')
|
||||
});
|
||||
|
||||
$('#warningToast').on('click', function(){
|
||||
toastr.warning('Inconceivable!')
|
||||
});
|
||||
|
||||
$('#dangerToast').on('click', function(){
|
||||
toastr.error('Have fun storming the castle!')
|
||||
});
|
||||
});
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
var input = document.querySelector('#todo-search');
|
||||
var log;
|
||||
|
||||
input.addEventListener('input', updateValue);
|
||||
|
||||
function updateValue(e) {
|
||||
log = e.target.value;
|
||||
}
|
||||
|
||||
|
||||
input.addEventListener('input', updateList);
|
||||
|
||||
function updateList(e) {
|
||||
$('.todo-list ul li a').each(function( index ) {
|
||||
if ($(this).text().toLowerCase().indexOf(log.toLowerCase()) >= 0) {
|
||||
$(this).fadeIn(300);
|
||||
} else {
|
||||
$(this).fadeOut(300);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('.todo-list ul li a input[type="checkbox"]').change(function() {
|
||||
if($(this).prop('checked') > 0) {
|
||||
$(this).parent().addClass('done');
|
||||
} else {
|
||||
$(this).parent().removeClass('done');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
/*!
|
||||
* Start Bootstrap - Creative v7.0.7 (https://startbootstrap.com/theme/creative)
|
||||
* Copyright 2013-2023 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-creative/blob/master/LICENSE)
|
||||
*/
|
||||
//
|
||||
// Scripts
|
||||
//
|
||||
|
||||
window.addEventListener('DOMContentLoaded', event => {
|
||||
|
||||
// Navbar shrink function
|
||||
var navbarShrink = function () {
|
||||
const navbarCollapsible = document.body.querySelector('#mainNav');
|
||||
if (!navbarCollapsible) {
|
||||
return;
|
||||
}
|
||||
if (window.scrollY === 0) {
|
||||
navbarCollapsible.classList.remove('navbar-shrink')
|
||||
} else {
|
||||
navbarCollapsible.classList.add('navbar-shrink')
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Shrink the navbar
|
||||
navbarShrink();
|
||||
|
||||
// Shrink the navbar when page is scrolled
|
||||
document.addEventListener('scroll', navbarShrink);
|
||||
|
||||
// Activate Bootstrap scrollspy on the main nav element
|
||||
const mainNav = document.body.querySelector('#mainNav');
|
||||
if (mainNav) {
|
||||
new bootstrap.ScrollSpy(document.body, {
|
||||
target: '#mainNav',
|
||||
rootMargin: '0px 0px -40%',
|
||||
});
|
||||
};
|
||||
|
||||
// Collapse responsive navbar when toggler is visible
|
||||
const navbarToggler = document.body.querySelector('.navbar-toggler');
|
||||
const responsiveNavItems = [].slice.call(
|
||||
document.querySelectorAll('#navbarResponsive .nav-link')
|
||||
);
|
||||
responsiveNavItems.map(function (responsiveNavItem) {
|
||||
responsiveNavItem.addEventListener('click', () => {
|
||||
if (window.getComputedStyle(navbarToggler).display !== 'none') {
|
||||
navbarToggler.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Activate SimpleLightbox plugin for portfolio items
|
||||
new SimpleLightbox({
|
||||
elements: '#portfolio a.portfolio-box'
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue