added admin interface

This commit is contained in:
kicap1992
2021-12-21 00:25:43 +08:00
parent 9adf18c7b9
commit a25104fadc
3496 changed files with 280326 additions and 7 deletions

321
admin/assets/js/common.js Normal file
View File

@ -0,0 +1,321 @@
$(function() {
"use strict";
skinChanger();
initSparkline();
CustomJs();
setTimeout(function() {
$('.page-loader-wrapper').fadeOut();
}, 50);
});
// Sparkline
function initSparkline() {
$(".sparkline").each(function() {
var $this = $(this);
$this.sparkline('html', $this.data());
});
}
//Skin changer
function skinChanger() {
$('.choose-skin li').on('click', function() {
var $body = $('body');
var $this = $(this);
var existTheme = $('.choose-skin li.active').data('theme');
$('.choose-skin li').removeClass('active');
$body.removeClass('theme-' + existTheme);
$this.addClass('active');
var newTheme = $('.choose-skin li.active').data('theme');
$body.addClass('theme-' + $this.data('theme'));
var darkLogo = "../assets/images/icon-dark.svg";
var lightLogo = "../assets/images/icon-light.svg";
if(newTheme == 'orange' || newTheme == 'purple' || newTheme == 'green'){
$('#left-sidebar .navbar-brand .logo').attr('src', darkLogo);
}
else{
$('#left-sidebar .navbar-brand .logo').attr('src', lightLogo);
}
});
}
// All custom js
function CustomJs() {
// sidebar navigation
$('#main-menu').metisMenu();
// sidebar nav scrolling
// $('#left-sidebar .sidebar-scroll').slimScroll({
// height: 'calc(100vh - 65px)',
// wheelStep: 10,
// touchScrollStep: 50,
// color: '#efefef',
// size: '2px',
// borderRadius: '3px',
// alwaysVisible: false,
// position: 'right',
// });
// cwidget scroll
$('.cwidget-scroll').slimScroll({
height: '320px',
wheelStep: 10,
touchScrollStep: 50,
color: '#efefef',
size: '2px',
borderRadius: '3px',
alwaysVisible: false,
position: 'right',
});
// toggle fullwidth layout
$('.btn-toggle-fullwidth').on('click', function() {
if(!$('body').hasClass('layout-fullwidth')) {
$('body').addClass('layout-fullwidth');
$(this).find(".fa").toggleClass('fa-arrow-left fa-arrow-right');
} else {
$('body').removeClass('layout-fullwidth');
$(this).find(".fa").toggleClass('fa-arrow-left fa-arrow-right');
}
});
// off-canvas menu toggle
$('.btn-toggle-offcanvas').on('click', function() {
$('body').toggleClass('offcanvas-active');
});
$('#main-content').on('click', function() {
$('body').removeClass('offcanvas-active');
});
$('.right_toggle, .overlay').on('click', function() {
$('#rightbar').toggleClass('open');
$('.overlay').toggleClass('open');
});
// adding effect dropdown menu
$('.dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).animate({
top: '100%'
}, 200);
});
$('.dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).animate({
top: '80%'
}, 200);
});
// navbar search form
$('.navbar-form.search-form input[type="text"]')
.on('focus', function() {
$(this).animate({
width: '+=50px'
}, 300);
})
.on('focusout', function() {
$(this).animate({
width: '-=50px'
}, 300);
});
// Bootstrap tooltip init
if($('[data-toggle="tooltip"]').length > 0) {
$('[data-toggle="tooltip"]').tooltip();
}
if($('[data-toggle="popover"]').length > 0) {
$('[data-toggle="popover"]').popover();
}
$(window).on('load', function() {
// for shorter main content
if($('#main-content').height() < $('#left-sidebar').height()) {
$('#main-content').css('min-height', $('#left-sidebar').innerHeight() - $('footer').innerHeight());
}
});
$(window).on('load resize', function() {
if($(window).innerWidth() < 420) {
$('.navbar-brand logo.svg').attr('src', '../assets/images/icon-light.svg');
} else {
$('.navbar-brand icon-light.svg').attr('src', '../assets/images/logo.svg');
}
});
// Wait card Js
$('[data-toggle="cardloading"]').on('click', function () {
var effect = $(this).data('loadingEffect');
var $loading = $(this).parents('.card').waitMe({
effect: effect,
text: 'Loading...',
bg: 'rgba(255,255,255,0.90)',
color: '#555'
});
setTimeout(function () {
//Loading hide
$loading.waitMe('hide');
}, 2000);
});
// Full screen class
$('.full-screen').on('click', function() {
$(this).parents('.card').toggleClass('fullscreen');
});
// Select all checkbox
$('.check-all').on('click',function(){
if(this.checked){
$(this).parents('.check-all-parent').find('.checkbox-tick').each(function(){
this.checked = true;
});
}else{
$(this).parents('.check-all-parent').find('.checkbox-tick').each(function(){
this.checked = false;
});
}
});
$('.checkbox-tick').on('click',function(){
if($(this).parents('.check-all-parent').find('.checkbox-tick:checked').length == $(this).parents('.check-all-parent').find('.checkbox-tick').length){
$(this).parents('.check-all-parent').find('.check-all').prop('checked',true);
}else{
$(this).parents('.check-all-parent').find('.check-all').prop('checked',false);
}
});
}
// toggle function
$.fn.clickToggle = function( f1, f2 ) {
return this.each( function() {
var clicked = false;
$(this).bind('click', function() {
if(clicked) {
clicked = false;
return f2.apply(this, arguments);
}
clicked = true;
return f1.apply(this, arguments);
});
});
};
window.hexabit= {
colors: {
'blue': '#467fcf',
'blue-darkest': '#0e1929',
'blue-darker': '#1c3353',
'blue-dark': '#3866a6',
'blue-light': '#7ea5dd',
'blue-lighter': '#c8d9f1',
'blue-lightest': '#edf2fa',
'azure': '#45aaf2',
'azure-darkest': '#0e2230',
'azure-darker': '#1c4461',
'azure-dark': '#3788c2',
'azure-light': '#7dc4f6',
'azure-lighter': '#c7e6fb',
'azure-lightest': '#ecf7fe',
'indigo': '#6574cd',
'indigo-darkest': '#141729',
'indigo-darker': '#282e52',
'indigo-dark': '#515da4',
'indigo-light': '#939edc',
'indigo-lighter': '#d1d5f0',
'indigo-lightest': '#f0f1fa',
'purple': '#a55eea',
'purple-darkest': '#21132f',
'purple-darker': '#42265e',
'purple-dark': '#844bbb',
'purple-light': '#c08ef0',
'purple-lighter': '#e4cff9',
'purple-lightest': '#f6effd',
'pink': '#f66d9b',
'pink-darkest': '#31161f',
'pink-darker': '#622c3e',
'pink-dark': '#c5577c',
'pink-light': '#f999b9',
'pink-lighter': '#fcd3e1',
'pink-lightest': '#fef0f5',
'red': '#e74c3c',
'red-darkest': '#2e0f0c',
'red-darker': '#5c1e18',
'red-dark': '#b93d30',
'red-light': '#ee8277',
'red-lighter': '#f8c9c5',
'red-lightest': '#fdedec',
'orange': '#fd9644',
'orange-darkest': '#331e0e',
'orange-darker': '#653c1b',
'orange-dark': '#ca7836',
'orange-light': '#feb67c',
'orange-lighter': '#fee0c7',
'orange-lightest': '#fff5ec',
'yellow': '#f1c40f',
'yellow-darkest': '#302703',
'yellow-darker': '#604e06',
'yellow-dark': '#c19d0c',
'yellow-light': '#f5d657',
'yellow-lighter': '#fbedb7',
'yellow-lightest': '#fef9e7',
'lime': '#7bd235',
'lime-darkest': '#192a0b',
'lime-darker': '#315415',
'lime-dark': '#62a82a',
'lime-light': '#a3e072',
'lime-lighter': '#d7f2c2',
'lime-lightest': '#f2fbeb',
'green': '#5eba00',
'green-darkest': '#132500',
'green-darker': '#264a00',
'green-dark': '#4b9500',
'green-light': '#8ecf4d',
'green-lighter': '#cfeab3',
'green-lightest': '#eff8e6',
'teal': '#2bcbba',
'teal-darkest': '#092925',
'teal-darker': '#11514a',
'teal-dark': '#22a295',
'teal-light': '#6bdbcf',
'teal-lighter': '#bfefea',
'teal-lightest': '#eafaf8',
'cyan': '#17a2b8',
'cyan-darkest': '#052025',
'cyan-darker': '#09414a',
'cyan-dark': '#128293',
'cyan-light': '#5dbecd',
'cyan-lighter': '#b9e3ea',
'cyan-lightest': '#e8f6f8',
'gray': '#868e96',
'gray-darkest': '#1b1c1e',
'gray-darker': '#36393c',
'gray-dark': '#6b7278',
'gray-light': '#aab0b6',
'gray-lighter': '#dbdde0',
'gray-lightest': '#f3f4f5',
'gray-dark': '#343a40',
'gray-dark-darkest': '#0a0c0d',
'gray-dark-darker': '#15171a',
'gray-dark-dark': '#2a2e33',
'gray-dark-light': '#717579',
'gray-dark-lighter': '#c2c4c6',
'gray-dark-lightest': '#ebebec'
}
};
// Wraptheme Website live chat widget js please remove on your project
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5c6d4867f324050cfe342c69/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();

14
admin/assets/js/index.js Normal file
View File

@ -0,0 +1,14 @@
$(function() {
"use strict";
// notification popup
toastr.options.closeButton = true;
toastr.options.positionClass = 'toast-bottom-right';
toastr.options.showDuration = 1000;
toastr['info']('Hello, welcome to HexaBit, a unique admin Template.');
});

View File

@ -0,0 +1,206 @@
$(function() {
"use strict";
initDonutChart();
var options;
// Categories Statistics
var dataMultiple = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [{
name: 'series-WebDesign',
data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
}, {
name: 'series-Lifestyle',
data: [89, 350, 360, 380, 315, 425, 466, 502, 520, 629, 725, 402],
}, {
name: 'series-Sports',
data: [159, 235, 305, 380, 379, 477, 450, 280, 530, 680, 699, 902],
}, {
name: 'series-News',
data: [173, 523, 360, 159, 358, 416, 431, 520, 545, 249, 700, 945],
}]
};
options = {
lineSmooth: false,
height: "300px",
low: 0,
high: 'auto',
series: {
'series-WebDesign': {
showPoint: true,
},
},
options: {
responsive: true,
legend: false
},
plugins: [
Chartist.plugins.legend({
legendNames: ['WebDesign', 'Lifestyle', 'Sports', 'News']
})
]
};
new Chartist.Line('#Categories_Statistics', dataMultiple, options);
});
function initDonutChart() {
Morris.Donut({
element: 'donut_chart',
data: [{
label: 'Tablet',
value: 15
}, {
label: 'Desktops',
value: 45
}, {
label: 'Mobile',
value: 40
}
],
colors: ['#f15a24', '#f7931e', '#ffb83b'],
formatter: function(y) {
return y + '%'
}
});
}
/*VectorMap Init*/
$(function() {
"use strict";
var mapData = {
"US": 298,
"SA": 200,
"AU": 760,
"IN": 2000000,
"GB": 120,
};
if( $('#world-map-markers').length > 0 ){
$('#world-map-markers').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
borderColor: '#fff',
borderOpacity: 0.25,
borderWidth: 0,
color: '#e6e6e6',
regionStyle : {
initial : {
fill : '#eaeaea'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#000',
'stroke-width' : 1,
'stroke-opacity': 0.4
},
},
markers : [{
latLng : [21.00, 78.00],
name : 'INDIA : 350'
},
{
latLng : [-33.00, 151.00],
name : 'Australia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 250'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#49c5b6',
"SA": '#667add',
"AU": '#50d38a',
"IN": '#60bafd',
"GB": '#ff758e',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});
}
if( $('#india').length > 0 ){
$('#india').vectorMap({
map : 'in_mill',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#f4f4f4'
}
}
});
}
if( $('#usa').length > 0 ){
$('#usa').vectorMap({
map : 'us_aea_en',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#f4f4f4'
}
}
});
}
if( $('#australia').length > 0 ){
$('#australia').vectorMap({
map : 'au_mill',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#f4f4f4'
}
}
});
}
if( $('#uk').length > 0 ){
$('#uk').vectorMap({
map : 'uk_mill_en',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#f4f4f4'
}
}
});
}
});

View File

@ -0,0 +1,90 @@
"use strict";
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2018-07-12',
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-07-01',
className: 'bg-info',
},
{
title: 'Long Event',
start: '2018-07-07',
end: '2018-07-10',
className: 'bg-danger'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-08-09T16:00:00',
className: 'bg-dark'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-06-16T16:00:00',
className: 'bg-success'
},
{
title: 'Conference',
start: '2018-08-11',
end: '2018-08-14',
className: 'bg-primary'
},
{
title: 'Meeting',
start: '2018-08-12T10:30:00',
end: '2018-08-12 T12:30:00',
className: 'bg-warning'
},
{
title: 'Lunch',
start: '2018-08-12T12:00:00',
className: 'bg-dark'
},
{
title: 'Meeting',
start: '2018-08-12T14:30:00',
className: 'bg-secondary'
},
{
title: 'Happy Hour',
start: '2018-07-12T17:30:00',
className: 'bg-dark'
},
{
title: 'Dinner',
start: '2018-06-12T20:00:00',
className: 'bg-warning'
},
{
title: 'Birthday Party',
start: '2018-08-13T07:00:00',
className: 'bg-success'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-08-28',
className: 'bg-primary'
}
]
});

View File

@ -0,0 +1,613 @@
$(function() {
"use strict";
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-employment', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 2, 8, 6, 7, 14, 11],
['data2', 5, 15, 11, 15, 21, 25],
['data3', 17, 18, 21, 20, 30, 29]
],
type: 'line', // default type of chart
colors: {
'data1': hexabit.colors["orange"],
'data2': hexabit.colors["blue"],
'data3': hexabit.colors["green"]
},
names: {
// name of each serie
'data1': 'Development',
'data2': 'Marketing',
'data3': 'Sales'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-temperature', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
['data2', 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
],
labels: true,
type: 'line', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["green"]
},
names: {
// name of each serie
'data1': 'Tokyo',
'data2': 'London'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-area', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'area', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-area-spline', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'area-spline', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-area-spline-sracked', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'area-spline', // default type of chart
groups: [
[ 'data1', 'data2']
],
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-spline', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6],
['data2', 0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
],
labels: true,
type: 'spline', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["green"]
},
names: {
// name of each serie
'data1': 'Hestavollane',
'data2': 'Vik'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-spline-rotated', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'spline', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
rotated: true,
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-step', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'step', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-area-step', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'area-step', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-bar', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'bar', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
bar: {
width: 16
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-bar-rotated', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'bar', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
rotated: true,
},
bar: {
width: 16
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-bar-stacked', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'bar', // default type of chart
groups: [
[ 'data1', 'data2']
],
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
bar: {
width: 16
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-pie', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 63],
['data2', 44],
['data3', 12],
['data4', 14]
],
type: 'pie', // default type of chart
colors: {
'data1': hexabit.colors["blue-darker"],
'data2': hexabit.colors["blue"],
'data3': hexabit.colors["blue-light"],
'data4': hexabit.colors["blue-lighter"]
},
names: {
// name of each serie
'data1': 'A',
'data2': 'B',
'data3': 'C',
'data4': 'D'
}
},
axis: {
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-donut', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 63],
['data2', 37]
],
type: 'donut', // default type of chart
colors: {
'data1': hexabit.colors["green"],
'data2': hexabit.colors["green-light"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-scatter', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 11, 8, 15, 18, 19, 17],
['data2', 7, 7, 5, 7, 9, 12]
],
type: 'scatter', // default type of chart
colors: {
'data1': hexabit.colors["blue"],
'data2': hexabit.colors["pink"]
},
names: {
// name of each serie
'data1': 'Maximum',
'data2': 'Minimum'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-combination', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220]
],
type: 'bar', // default type of chart
types: {
'data2': "line",
'data3': "spline",
},
groups: [
[ 'data1', 'data4']
],
colors: {
'data1': hexabit.colors["green"],
'data2': hexabit.colors["pink"],
'data3': hexabit.colors["green"],
'data4': hexabit.colors["blue"]
},
names: {
// name of each serie
'data1': 'Development',
'data2': 'Marketing',
'data3': 'Sales',
'data4': 'Sales'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
},
},
bar: {
width: 16
},
legend: {
show: true, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
});

View File

@ -0,0 +1,96 @@
// Guage Default
defaultGauge = new Gauge(document.getElementById("gauge-default"));
defaultGauge.setTextField(document.getElementById("default-textfield"));
defaultGauge.maxValue = 3000;
defaultGauge.set(1222);
// Gauge Donut
donutGauge = new Donut(document.getElementById("gauge-donut"));
donutGauge.setTextField(document.getElementById("donut-textfield"));
donutGauge.maxValue = 3000;
donutGauge.set(1333);
// Zones
zoneGauge = new Gauge(document.getElementById("gauge-zone"));
var opts = {
angle: -0.25,
lineWidth: 0.2,
radiusScale:0.9,
pointer: {
length: 0.6,
strokeWidth: 0.03,
color: '#000000'
},
staticLabels: {
font: "10px sans-serif",
labels: [200, 500, 2100, 2800],
fractionDigits: 0
},
staticZones: [
{strokeStyle: "#F03E3E", min: 0, max: 200},
{strokeStyle: "#FFDD00", min: 200, max: 500},
{strokeStyle: "#30B32D", min: 500, max: 2100},
{strokeStyle: "#FFDD00", min: 2100, max: 2800},
{strokeStyle: "#F03E3E", min: 2800, max: 3000}
],
limitMax: false,
limitMin: false,
highDpiSupport: true
}
zoneGauge.setOptions(opts);
zoneGauge.setTextField(document.getElementById("zone-textfield"));
zoneGauge.minValue = 0;
zoneGauge.maxValue = 3000;
zoneGauge.set(1444);
//
stepGauge = new Gauge(document.getElementById("gauge-step"));
var bigFont = "14px sans-serif";
var opts = {
angle: 0.1,
radiusScale:0.8,
lineWidth: 0.2,
pointer: {
length: 0.6,
strokeWidth: 0.03,
color: '#000000'
},
staticLabels: {
font: "10px sans-serif",
labels: [{label:200, font: bigFont},
{label:750},
{label:1500},
{label:2250},
{label:3000},
{label:3500, font: bigFont}],
fractionDigits: 0
},
staticZones: [
{strokeStyle: "rgb(255,0,0)", min: 0, max: 500, height: 1.2},
{strokeStyle: "rgb(200,100,0)", min: 500, max: 1000, height: 1.1},
{strokeStyle: "rgb(150,150,0)", min: 1000, max: 1500, height: 1},
{strokeStyle: "rgb(100,200,0)", min: 1500, max: 2000, height: 0.9},
{strokeStyle: "rgb(0,255,0)", min: 2000, max: 3100, height: 0.8},
{strokeStyle: "rgb(80,255,80)", min: 3100, max: 3500, height: 0.7},
{strokeStyle: "rgb(130,130,130)", min: 2470, max: 2530, height: 1}
],
limitMax: false,
limitMin: false,
highDpiSupport: true,
renderTicks: {
divisions: 5,
divWidth: 1.1,
divLength: 0.7,
divColor: '#333333',
subDivisions: 3,
subLength: 0.5,
subWidth: 0.6,
subColor: '#666666'
}
};
stepGauge.setOptions(opts);
//document.getElementById("preview-textfield").className = "preview-textfield";
stepGauge.setTextField(document.getElementById("step-textfield"));
stepGauge.minValue = 0;
stepGauge.maxValue = 3500;
stepGauge.set(2222);

View File

@ -0,0 +1,306 @@
$(function() {
"use strict";
// top products =================
var dataStackedBar = {
labels: ['Q1','Q2','Q3','Q4','Q5','Q6','Q7'],
series: [
[2350,3205,4520,2351,5632,3205,4520],
[2541,2583,1592,2674,2323,1592,2674],
[1212,5214,2325,4235,2519,1212,5214],
]
};
new Chartist.Bar('#chart-top-products', dataStackedBar, {
height: "250px",
stackBars: true,
axisX: {
showGrid: false
},
axisY: {
labelInterpolationFnc: function(value) {
return (value / 1000) + 'k';
}
},
plugins: [
Chartist.plugins.tooltip({
appendToBody: true
}),
Chartist.plugins.legend({
legendNames: ['Data 1', 'Data 2', 'Data 3']
})
]
}).on('draw', function(data) {
if (data.type === 'bar') {
data.element.attr({
style: 'stroke-width: 20px'
});
}
});
// Total Sale =================
$('.knob2').knob({
'format' : function (value) {
return value + '%';
}
});
// Income Analysis =================
$('.sparkline-pie').sparkline('html', {
type: 'pie',
offset: 90,
width: '160px',
height: '160px',
sliceColors: ['#182973', '#29bd73', '#ffcd55']
})
$('#sparkline-compositeline').sparkline('html', {
fillColor: false,
lineColor: '#445771',
width: '200px',
height: '30px',
lineWidth: '1',
});
$('#sparkline-compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], {
composite: true,
fillColor: false,
lineColor: '#182973',
lineWidth: '1',
chartRangeMin: 0,
chartRangeMax: 10
});
$('#sparkline-compositeline').sparkline([6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7, 4, 1, 5, 7, 9, 9, 8, 7, 6], {
composite: true,
fillColor: false,
lineColor: '#ffcd55',
lineWidth: '1',
chartRangeMin: 0,
chartRangeMax: 10
});
$('.sparkline-pie2').sparkline('html', {
type: 'pie',
offset: 90,
width: '160px',
height: '160px',
sliceColors: ['#05b4d8', '#35cd3a', '#716aca']
})
// =================
$('.sparkbar').sparkline('html', { type: 'bar' });
// BTC =================
$('#sparkline16').sparkline([155, 161, 170, 205, 198, 245, 279, 301, 423], {
type: 'line',
width: '100%',
height: '390',
chartRangeMax:100,
resize: true,
lineColor: '#84b3df',
fillColor: '#182973',
highlightLineColor: 'rgba(0,0,0,.1)',
highlightSpotColor: 'rgba(0,0,0,.2)',
});
$('#sparkline16').sparkline([4, 5, 7, 5, 10, 12, 22, 32, 41, 32], {
type: 'line',
width: '100%',
height: '290',
chartRangeMax: 100,
lineColor: '#8f8ff0',
fillColor: '#29bd73',
composite: true,
resize: true,
highlightLineColor: 'rgba(0,0,0,.1)',
highlightSpotColor: 'rgba(0,0,0,.2)',
});
// Our Location ======
var mapData = {
"US": 298,
"AU": 760,
"CA": 870,
"IN": 2000000,
"GB": 120,
};
if( $('#world-map-markers').length > 0 ){
$('#world-map-markers').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
borderColor: '#fff',
borderOpacity: 0.25,
borderWidth: 0,
color: '#e6e6e6',
regionStyle : {
initial : {
fill : '#ebebeb'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#000',
'stroke-width' : 1,
'stroke-opacity': 0.4
},
},
markers: [
{ latLng: [37.09,-95.71], name: 'America' },
{ latLng: [-25.27, 133.77], name: 'Australia' },
{ latLng: [56.13,-106.34], name: 'Canada' },
{ latLng: [20.59,78.96], name: 'India' },
{ latLng: [55.37,-3.43], name: 'United Kingdom' },
],
series: {
regions: [{
values: {
"US": '#bdf3f5',
"AU": '#f9f1d8',
"IN": '#ffd4c3',
"GB": '#e0eff5',
"CA": '#efebf4',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});
}
// line chart =========================
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
]
};
var options = {
height: "300px",
showPoint: true,
lineSmooth: true,
axisX: {
showGrid: false
},
plugins: [
Chartist.plugins.tooltip({
appendToBody: true
}),
]
};
new Chartist.Line('#newline_chart', data, options);
// donut chart
var dataDonut = {
series: [20, 10, 25, 40, 5]
};
new Chartist.Pie('#donut_chart', dataDonut, {
height: "220px",
donut: true,
donutWidth: 25,
donutSolid: true,
startAngle: 270,
showLabel: true
});
});
// Visitors Statistics =============
$(function() {
var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];
// first correct the timestamps - they are recorded as the daily
// midnights in UTC+0100, but Flot always displays dates in UTC
// so we have to add one hour to hit the midnights in the plot
for (var i = 0; i < d.length; ++i) {
d[i][0] += 60 * 60 * 1000;
}
// helper for returning the weekends in a period
function weekendAreas(axes) {
var markings = [],
d = new Date(axes.xaxis.min);
// go to the first Saturday
d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
d.setUTCSeconds(0);
d.setUTCMinutes(0);
d.setUTCHours(0);
var i = d.getTime();
// when we don't set yaxis, the rectangle automatically
// extends to infinity upwards and downwards
do {
markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
i += 7 * 24 * 60 * 60 * 1000;
} while (i < axes.xaxis.max);
return markings;
}
var options = {
xaxis: {
mode: "time",
tickLength: 5
},
selection: {
mode: "x"
},
grid: {
markings: weekendAreas,
borderColor: '#eaeaea',
tickColor: '#eaeaea',
hoverable: true,
borderWidth: 1,
}
};
var plot = $.plot("#Visitors_chart", [d], options);
// now connect the two
$("#Visitors_chart").bind("plotselected", function (event, ranges) {
// do the zooming
$.each(plot.getXAxes(), function(_, axis) {
var opts = axis.options;
opts.min = ranges.xaxis.from;
opts.max = ranges.xaxis.to;
});
plot.setupGrid();
plot.draw();
plot.clearSelection();
// don't fire event on the overview to prevent eternal loop
overview.setSelection(ranges, true);
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

View File

@ -0,0 +1,276 @@
$(function () {
"use strict";
new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
});
function getChartJs(type) {
var config = null;
if (type === 'radar') {
config = {
type: 'radar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 25, 90, 81, 56, 55, 40],
borderColor: 'rgba(1,188,210, 0.8)',
backgroundColor: 'rgba(1,188,210, 0.5)',
pointBorderColor: 'rgba(1,188,210, 0)',
pointBackgroundColor: 'rgba(1,188,210, 0.8)',
pointBorderWidth: 1
}, {
label: "My Second dataset",
data: [72, 48, 40, 19, 96, 27, 100],
borderColor: 'rgba(36,42,43, 0.8)',
backgroundColor: 'rgba(36,42,43, 0.5)',
pointBorderColor: 'rgba(36,42,43, 0)',
pointBackgroundColor: 'rgba(36,42,43, 0.8)',
pointBorderWidth: 1
}]
},
options: {
responsive: true,
legend: false
}
}
}
return config;
}
//=========================
$(function() {
"use strict";
var options;
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
]
};
// line chart
options = {
height: "300px",
showPoint: true,
axisX: {
showGrid: false
},
lineSmooth: false,
plugins: [
Chartist.plugins.tooltip({
appendToBody: true
}),
]
};
new Chartist.Line('#line-chart', data, options);
// bar chart
options = {
height: "300px",
axisX: {
showGrid: false
},
plugins: [
Chartist.plugins.tooltip({
appendToBody: true
}),
]
};
new Chartist.Bar('#bar-chart', data, options);
// area chart
options = {
height: "270px",
showArea: true,
showLine: false,
showPoint: true,
axisX: {
showGrid: false
},
lineSmooth: false,
};
new Chartist.Line('#area-chart', data, options);
// multiple chart
var dataMultiple = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [{
name: 'series-real',
data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
}, {
name: 'series-projection',
data: [240, 350, 360, 380, 400, 450, 480, 523, 555, 600, 700, 800],
}]
};
options = {
lineSmooth: false,
height: "230px",
low: 0,
high: 'auto',
series: {
'series-projection': {
showPoint: true,
},
},
options: {
responsive: true,
legend: false
},
plugins: [
Chartist.plugins.legend({
legendNames: ['Actual', 'Projection']
})
]
};
new Chartist.Line('#multiple-chart', dataMultiple, options);
// pie chart
var dataPie = {
series: [5, 3, 4]
};
var labels = ['Direct', 'Organic', 'Referral'];
var sum = function(a, b) {
return a + b;
};
new Chartist.Pie('#pie-chart', dataPie, {
height: "270px",
labelInterpolationFnc: function(value, idx) {
var percentage = Math.round(value / dataPie.series.reduce(sum) * 100) + '%';
return labels[idx] + ' (' + percentage + ')';
}
});
// donut chart
var dataDonut = {
series: [20, 10, 30, 40]
};
new Chartist.Pie('#donut-chart', dataDonut, {
height: "270px",
donut: true,
donutWidth: 60,
donutSolid: true,
startAngle: 270,
showLabel: true
});
// stacked bar chart
var dataStackedBar = {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [
[800000, 1200000, 360000, 1300000],
[200000, 400000, 500000, 300000],
[100000, 200000, 400000, 600000]
]
};
new Chartist.Bar('#stackedbar-chart', dataStackedBar, {
height: "270px",
stackBars: true,
axisX: {
showGrid: false
},
axisY: {
labelInterpolationFnc: function(value) {
return (value / 1000) + 'k';
}
},
plugins: [
Chartist.plugins.tooltip({
appendToBody: true
}),
]
}).on('draw', function(data) {
if (data.type === 'bar') {
data.element.attr({
style: 'stroke-width: 30px'
});
}
});
// horizontal bar chart
var dataHorizontalBar = {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
};
new Chartist.Bar('#horizontalbar-chart', dataHorizontalBar, {
height: "270px",
seriesBarDistance: 15,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 75
}
});
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var chartColors = window.chartColors;
var color = Chart.helpers.color;
var config = {
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
color(chartColors.red).alpha(0.5).rgbString(),
color(chartColors.orange).alpha(0.5).rgbString(),
color(chartColors.yellow).alpha(0.5).rgbString(),
color(chartColors.green).alpha(0.5).rgbString(),
color(chartColors.blue).alpha(0.5).rgbString(),
],
label: 'My dataset' // for legend
}],
labels: [
"Red",
"Orange",
"Yellow",
"Green",
"Blue"
]
},
options: {
responsive: true,
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Polar Area Chart'
},
scale: {
ticks: {
beginAtZero: true
},
reverse: false
},
animation: {
animateRotate: false,
animateScale: true
}
}
};
window.onload = function() {
var ctx = document.getElementById("chart-area");
window.myPolarArea = Chart.PolarArea(ctx, config);
};
});

View File

@ -0,0 +1,651 @@
// Bar Area
$(function() {
"use strict";
var barArea = getChart("echart-bar_area")
var app = {};
var option = {};
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('bar' + i);
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
}
option = {
legend: {
data: ['bar', 'bar2'],
align: 'right',
bottom: '0',
},
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'15%',
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: true,
splitLine: {
show: false
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
yAxis: {
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
series: [{
name: 'bar',
type: 'bar',
data: data1,
color: '#a27ce6',
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'bar2',
type: 'bar',
data: data2,
color: '#1ab1e3',
animationDelay: function (idx) {
return idx * 5 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
if (option && typeof option === "object") {
barArea.setOption(option, true);
}
$(window).on('resize', function(){
barArea.resize();
});
});
// Rainfall and Evaporation
$(function() {
"use strict";
var app = {};
var option = {};
var rainFall = getChart("echart-rainfall");
option = {
legend: {
data:['data1','data2'],
bottom: '0',
},
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'15%',
},
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : {
type : 'category',
data : ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sept','Oct','Nov','Dec'],
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
yAxis : {
type : 'value',
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
series : [
{
name:'data1',
type:'bar',
color: '#45e5c3',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: 'Max'},
{type : 'min', name: 'Min'}
]
},
markLine : {
data : [
{type : 'average', name: 'Average'}
]
}
},
{
name:'data2',
type:'bar',
color: '#288cff',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : 'Highest', value : 182.2, xAxis: 7, yAxis: 183},
{name : 'Minimum', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : 'Average'}
]
}
}
]
};
if (option && typeof option === "object") {
rainFall.setOption(option, true);
}
$(window).on('resize', function(){
rainFall.resize();
});
});
// Dynamic Data
$(function() {
"use strict";
var dynamicData = getChart("echart-dynamic_data");
var app = {};
var option = {};
option = {
legend: {
data:['Latest transaction price', 'Pre-order queue']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})(),
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
},
{
type: 'category',
boundaryGap: true,
data: (function (){
var res = [];
var len = 10;
while (len--) {
res.push(10 - len - 1);
}
return res;
})(),
},
],
yAxis: [
{
type: 'value',
scale: true,
name: 'price',
max: 30,
min: 0,
boundaryGap: [0.2, 0.2],
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
{
type: 'value',
scale: true,
max: 1200,
min: 0,
boundaryGap: [0.2, 0.2],
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
}
],
series: [
{
color: '#5b39b1',
name:'queue',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
color: '#45e5c3',
name:'Latest transaction',
type:'line',
data:(function (){
var res = [];
var len = 0;
while (len < 10) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
]
};
if (option && typeof option === "object") {
dynamicData.setOption(option, true);
}
$(window).on('resize', function(){
dynamicData.resize();
});
});
// Basic Candlestick
$(function() {
"use strict";
var candleStick = getChart("echart-candlestick");
var app = {};
var option = {};
option = {
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'8%',
},
xAxis: {
data: ['2018-10-24', '2018-10-25', '2018-10-26', '2018-10-27'],
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
},
yAxis: {
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
series: [{
type: 'k',
data: [
{
itemStyle:{
color: '#1ab1e3',
borderColor: '#1ab1e3',
},
value: [20, 30, 10, 35]
},
{
itemStyle:{
color: '#a27ce6',
color0: '#a27ce6',
borderColor: '#a27ce6',
borderColor0: '#a27ce6',
},
value: [40, 35, 30, 55]
},
{
itemStyle:{
color: '#1ab1e3',
borderColor: '#1ab1e3',
},
value: [33, 38, 33, 40]
},
{
itemStyle:{
color: '#ffc323',
borderColor: '#ffc323',
},
value: [40, 40, 32, 42]
},
]
}]
};
if (option && typeof option === "object") {
candleStick.setOption(option, true);
}
$(window).on('resize', function(){
candleStick.resize();
});
});
// Basic Scatter Chart
$(function() {
"use strict";
var basicScatter = getChart("echart-basic_scatter");
var app = {};
var option = {};
option = {
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'5%',
},
xAxis: {
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
yAxis: {
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
series: [{
symbolSize: 15,
color: '#1ab1e3',
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
}]
};
if (option && typeof option === "object") {
basicScatter.setOption(option, true);
}
$(window).on('resize', function(){
basicScatter.resize();
});
});
// Doughnut Chart
$(function() {
"use strict";
var doughnutChart = getChart("echart-doughnut");
var app = {};
var option = {};
option = {
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'5%',
},
legend: {
orient: 'vertical',
x: 'left',
data:['Data1','Data2','Data3','Data4','Data5']
},
series: [
{
name:'Access source',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'Data1', itemStyle: {color: '#ffc323',}},
{value:310, name:'Data2', itemStyle: {color: '#ff758e',}},
{value:234, name:'Data3', itemStyle: {color: '#49c5b6',}},
{value:135, name:'Data4', itemStyle: {color: '#60bafd',}},
{value:1548, name:'Data5', itemStyle: {color: '#a27ce6',}}
]
}
]
};
if (option && typeof option === "object") {
doughnutChart.setOption(option, true);
}
$(window).on('resize', function(){
doughnutChart.resize();
});
});
// Large scale area chart
$(function() {
"use strict";
var largescaleArea = getChart("echart-large_scale_area");
var app = {};
var option = {};
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 300];
for (var i = 1; i < 20000; i++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
grid: {
left: '5%',
right:'0%',
top: '2%',
bottom:'20%',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date,
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
lineStyle:{
color: '#f8f9fa',
}
},
axisLine:{
lineStyle:{
color: '#f8f9fa',
}
},
axisLabel: {
color: '#4D5052',
}
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'Simulation data',
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
color: '#f8f9fa',
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
data: data
}
]
};
if (option && typeof option === "object") {
largescaleArea.setOption(option, true);
}
$(window).on('resize', function(){
largescaleArea.resize();
});
});
function getChart(id){
var dom = document.getElementById(id);
return echarts.init(dom);
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,47 @@
$(function () {
"use strict";
$('.knob').knob({
draw: function () {
// "tron" case
if (this.$.data('skin') == 'tron') {
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = true;
this.g.lineWidth = this.lineWidth;
this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.value);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.previousColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
});

View File

@ -0,0 +1 @@
$(function(){$(".knob").knob({draw:function(){if("tron"==this.$.data("skin")){var t,i=this.angle(this.cv),s=this.startAngle,h=this.startAngle,r=h+i,e=!0;return this.g.lineWidth=this.lineWidth,this.o.cursor&&(h=r-.3)&&(r+=.3),this.o.displayPrevious&&(t=this.startAngle+this.angle(this.value),this.o.cursor&&(s=t-.3)&&(t+=.3),this.g.beginPath(),this.g.strokeStyle=this.previousColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,s,t,!1),this.g.stroke()),this.g.beginPath(),this.g.strokeStyle=e?this.o.fgColor:this.fgColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,h,r,!1),this.g.stroke(),this.g.lineWidth=2,this.g.beginPath(),this.g.strokeStyle=this.o.fgColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth+1+2*this.lineWidth/3,0,2*Math.PI,!1),this.g.stroke(),!1}}})});

View File

@ -0,0 +1,299 @@
$(function() {
"use strict";
MorrisArea();
MorrisLineChart();
MorrisDonutChart();
MorrisBarChart();
});
// Morris-chart
function MorrisArea() {
Morris.Area({
element: 'm_area_chart',
data: [{
period: '2011',
iphone: 45,
ipad: 75,
itouch: 18
}, {
period: '2012',
iphone: 130,
ipad: 110,
itouch: 82
}, {
period: '2013',
iphone: 80,
ipad: 60,
itouch: 85
}, {
period: '2014',
iphone: 78,
ipad: 205,
itouch: 135
}, {
period: '2015',
iphone: 180,
ipad: 124,
itouch: 140
}, {
period: '2016',
iphone: 105,
ipad: 100,
itouch: 85
},
{
period: '2017',
iphone: 210,
ipad: 180,
itouch: 120
}
],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['iPhone', 'iPad', 'iPod Touch'],
pointSize: 2,
fillOpacity: 0,
pointStrokeColors: ['#242a2b', '#00bcd2', '#c0d0d6'],
behaveLikeLine: true,
gridLineColor: '#eeeeee',
lineWidth: 2,
hideHover: 'auto',
lineColors: ['#242a2b', '#00bcd2', '#c0d0d6'],
resize: true
});
Morris.Area({
element: 'm_area_chart2',
data: [{
period: '2012',
SiteA: 0,
SiteB: 10,
}, {
period: '2013',
SiteA: 106,
SiteB: 71,
}, {
period: '2014',
SiteA: 68,
SiteB: 41,
}, {
period: '2015',
SiteA: 89,
SiteB: 285,
}, {
period: '2016',
SiteA: 185,
SiteB: 104,
}, {
period: '2017',
SiteA: 146,
SiteB: 102 ,
}
],
xkey: 'period',
ykeys: ['SiteA', 'SiteB'],
labels: ['Site A', 'Site B'],
pointSize: 0,
fillOpacity: 0.8,
pointStrokeColors: ['#242a2b', '#5dd0fc'],
behaveLikeLine: true,
gridLineColor: '#eeeeee',
lineWidth: 0,
smooth: false,
hideHover: 'auto',
lineColors: ['#242a2b', '#5dd0fc'],
resize: true
});
Morris.Area({
element: 'e_area_chart',
data: [{
period: '2011',
iphone: 10,
ipad: 5,
itouch: 7
}, {
period: '2012',
iphone: 35,
ipad: 89,
itouch: 45
}, {
period: '2013',
iphone: 25,
ipad: 15,
itouch: 102
}, {
period: '2014',
iphone: 80,
ipad: 12,
itouch: 7
}, {
period: '2015',
iphone: 30,
ipad: 32,
itouch: 148
}, {
period: '2016',
iphone: 25,
ipad: 127,
itouch: 40
}, {
period: '2017',
iphone: 98,
ipad: 10,
itouch: 26
}
],
lineColors: ['#00bcd2', '#242a2b', '#c0d0d6'],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['Site A', 'Site B', 'Site C'],
pointSize: 0,
lineWidth: 0,
resize: true,
fillOpacity: 0.8,
behaveLikeLine: true,
gridLineColor: '#eeeeee',
hideHover: 'auto'
});
}
// LINE CHART
function MorrisLineChart() {
var line = new Morris.Line({
element: 'm_line_chart',
resize: true,
data: [{
y: '2014 Q1',
item1: 2356
},
{
y: '2015 Q2',
item1: 2586
},
{
y: '2015 Q3',
item1: 4512
},
{
y: '2015 Q4',
item1: 3265
},
{
y: '2016 Q5',
item1: 6258
},
{
y: '2016 Q6',
item1: 5234
},
{
y: '2016 Q7',
item1: 4725
},
{
y: '2016 Q7',
item1: 7526
},
{
y: '2017 Q7',
item1: 8452
},
{
y: '2017 Q7',
item1: 8931
}
],
xkey: 'y',
ykeys: ['item1'],
labels: ['Item 1'],
gridLineColor: '#eeeeee',
lineColors: ['#242a2b'],
lineWidth: 2,
pointSize: 3,
hideHover: 'auto'
});
}
// Morris donut chart
function MorrisDonutChart() {
Morris.Donut({
element: 'm_donut_chart',
data: [
{
label: "Online Sales",
value: 45,
}, {
label: "Store Sales",
value: 35
},{
label: "Email Sales",
value: 8
}, {
label: "Agent Sales",
value: 12
}],
resize: true,
colors: ['#2cbfb7', '#3dd1c9', '#60ded7', '#a1ece8']
});
}
// Morris bar chart
function MorrisBarChart() {
Morris.Bar({
element: 'm_bar_chart',
data: [{
y: '2012',
a: 80,
b: 56,
c: 89
}, {
y: '2013',
a: 75,
b: 65,
c: 38
}, {
y: '2014',
a: 59,
b: 30,
c: 37
}, {
y: '2015',
a: 75,
b: 65,
c: 40
}, {
y: '2016',
a: 55,
b: 40,
c: 45
}, {
y: '2017',
a: 75,
b: 65,
c: 40
}, {
y: '2018',
a: 87,
b: 88,
c: 36
}],
xkey: 'y',
ykeys: ['a', 'b', 'c'],
labels: ['A', 'B', 'C'],
barColors: ['#55bbc7', '#00bcd2', '#242a2b'],
hideHover: 'auto',
gridLineColor: '#eeeeee',
resize: true
});
}
// Extra chart

View File

@ -0,0 +1,147 @@
$(function() {
"use strict";
// MINI LINE CHARTS
var params = {
width: '60px',
height: '30px',
lineWidth: '2',
lineColor: '#1D92AF',
fillColor: 'rgba(29,146,175,0.2) ',
spotRadius: '2',
highlightLineColor: '#aedaff',
highlightSpotColor: '#71aadb',
spotColor: false,
minSpotColor: false,
maxSpotColor: false,
disableInteraction: false
};
// values from HTML script
$('#demo-sparkline-line1').sparkline('html', params);
params.lineColor = '#ef2020';
params.fillColor = 'rgba(239,32,32,0.2)';
$('#demo-sparkline-line2').sparkline('html', params);
params.lineColor = '#ff9800';
params.fillColor = 'rgba(255,152,0,0.2)';
$('#demo-sparkline-line3').sparkline('html', params);
params.lineColor = '#7CAC25';
params.fillColor = 'rgba(124,172,37,0.2)';
$('#demo-sparkline-line4').sparkline('html', params);
params.lineColor = '#777';
params.fillColor = 'rgba(119,119,119,0.2)';
$('#demo-sparkline-line5').sparkline('html', params);
// values from Javascript
var values1 = getRandomValues();
params.lineColor = '#1D92AF';
params.fillColor = false;
$('#demo-sparkline-line6').sparkline(values1[0], params);
params.lineColor = '#ef2020';
params.fillColor = false;
$('#demo-sparkline-line7').sparkline(values1[1], params);
params.lineColor = '#ff9800';
params.fillColor = false;
$('#demo-sparkline-line8').sparkline(values1[2], params);
params.lineColor = '#7CAC25';
params.fillColor = false;
$('#demo-sparkline-line9').sparkline(values1[3], params);
params.lineColor = '#777';
params.fillColor = false;
$('#demo-sparkline-line10').sparkline(values1[4], params);
// composite line
$('#demo-sparkline-compositeline').sparkline('html', {
fillColor: false,
lineColor: '#ff9800',
width: '200px',
height: '30px',
lineWidth: '2',
});
$('#demo-sparkline-compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], {
composite: true,
fillColor: false,
lineColor: '#777',
lineWidth: '2',
chartRangeMin: 0,
chartRangeMax: 10
});
// MINI BAR CHART
var values2 = getRandomValues();
var paramsBar = {
type: 'bar',
barWidth: 5,
height: 25,
barColor: '#0E9BE2'
};
$('#mini-bar-chart1').sparkline(values2[0], paramsBar);
paramsBar.barColor = '#7CAC25';
$('#mini-bar-chart2').sparkline(values2[1], paramsBar);
paramsBar.barColor = '#FF4402';
$('#mini-bar-chart3').sparkline(values2[2], paramsBar);
paramsBar.barColor = '#ff9800';
$('#mini-bar-chart4').sparkline(values2[3], paramsBar);
paramsBar.barColor = '#777';
$('#mini-bar-chart5').sparkline(values2[4], paramsBar);
// negative values;
$('#mini-bar-negative').sparkline('html', paramsBar);
// stacked bar
$('#mini-bar-stacked').sparkline('html', paramsBar);
// composite bar
$('#demo-sparkline-compositebar').sparkline('html', {
type: 'bar',
barColor: '#7CAC25',
barWidth: 5,
height: 25,
});
$('#demo-sparkline-compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6], {
composite: true,
fillColor: false,
lineColor: '#777',
});
// MINI PIE CHARTS
var paramsPie = {
type: "pie",
width: '30px',
height: '30px',
sliceColors: ["#0E9BE2", "#ff9800", "#7CAC25"]
};
$('#mini-pie-chart1').sparkline('html', paramsPie);
$('#mini-pie-chart2').sparkline('html', paramsPie);
$('#mini-pie-chart3').sparkline('html', paramsPie);
$('#mini-pie-chart4').sparkline('html', paramsPie);
$('#mini-pie-chart5').sparkline('html', paramsPie);
$('#mini-pie-chart6').sparkline('html', paramsPie);
function getRandomValues() {
// data setup
var values = new Array(20);
for (var i = 0; i < values.length; i++) {
values[i] = [5 + randomVal(), 10 + randomVal(), 15 + randomVal(), 20 + randomVal(), 30 + randomVal(),
35 + randomVal(), 40 + randomVal(), 45 + randomVal(), 50 + randomVal()
];
}
return values;
}
function randomVal() {
return Math.floor(Math.random() * 80);
}
});

View File

@ -0,0 +1,59 @@
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var chartColors = window.chartColors;
var color = Chart.helpers.color;
var config = {
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
color(chartColors.red).alpha(0.5).rgbString(),
color(chartColors.orange).alpha(0.5).rgbString(),
color(chartColors.yellow).alpha(0.5).rgbString(),
color(chartColors.green).alpha(0.5).rgbString(),
color(chartColors.blue).alpha(0.5).rgbString(),
],
label: 'My dataset' // for legend
}],
labels: [
"Red",
"Orange",
"Yellow",
"Green",
"Blue"
]
},
options: {
responsive: true,
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Polar Area Chart'
},
scale: {
ticks: {
beginAtZero: true
},
reverse: false
},
animation: {
animateRotate: false,
animateScale: true
}
}
};
window.onload = function() {
var ctx = document.getElementById("chart-area");
window.myPolarArea = Chart.PolarArea(ctx, config);
};

View File

@ -0,0 +1,190 @@
$(function () {
"use strict";
$('.sparkline-pie').sparkline('html', {
type: 'pie',
offset: 90,
width: '150px',
height: '150px',
sliceColors: ['#fb4364', '#7868da', '#3aaaec']
})
drawDocSparklines();
drawMouseSpeedDemo();
});
//Taken from http://omnipotent.net/jquery.sparkline
function drawDocSparklines() {
// Bar + line composite charts
$('#compositebar').sparkline('html', { type: 'bar', barColor: '#aaf' });
$('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
{ composite: true, fillColor: false, lineColor: 'red' });
// Line charts taking their values from the tag
$('.sparkline-1').sparkline();
// Larger line charts for the docs
$('.largeline').sparkline('html',
{ type: 'line', height: '2.5em', width: '4em' });
// Customized line chart
$('#linecustom').sparkline('html',
{
height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa',
minSpotColor: false, maxSpotColor: false, spotColor: '#60bafd', spotRadius: 3
});
// Bar charts using inline values
$('.sparkbar').sparkline('html', { type: 'bar' });
$('.barformat').sparkline([1, 3, 5, 3, 8], {
type: 'bar',
tooltipFormat: '{{value:levels}} - {{value}}',
tooltipValueLookups: {
levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' })
}
});
// Tri-state charts using inline values
$('.sparktristate').sparkline('html', { type: 'tristate' });
$('.sparktristatecols').sparkline('html',
{ type: 'tristate', colorMap: { '-2': '#fa7', '2': '#60bafd' } });
// Composite line charts, the second using values supplied via javascript
$('#compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
$('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
{ composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10 });
// Line charts with normal range marker
$('#normalline').sparkline('html',
{ fillColor: false, normalRangeMin: -1, normalRangeMax: 8 });
$('#normalExample').sparkline('html',
{ fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#60bafd' });
// Discrete charts
$('.discrete1').sparkline('html',
{ type: 'discrete', lineColor: '#1ab1e3', xwidth: 18 });
$('#discrete2').sparkline('html',
{ type: 'discrete', lineColor: '#1ab1e3', thresholdColor: 'red', thresholdValue: 4 });
// Bullet charts
$('.sparkbullet').sparkline('html', { type: 'bullet' });
// Pie charts
$('.sparkpie').sparkline('html', { type: 'pie', height: '2em' });
// Box plots
$('.sparkboxplot').sparkline('html', { type: 'box' });
$('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
{ type: 'box', raw: true, showOutliers: true, target: 6 });
// Box plot with specific field order
$('.boxfieldorder').sparkline('html', {
type: 'box',
tooltipFormatFieldlist: ['med', 'lq', 'uq'],
tooltipFormatFieldlistKey: 'field'
});
// click event demo sparkline
$('.clickdemo').sparkline();
$('.clickdemo').bind('sparklineClick', function (ev) {
var sparkline = ev.sparklines[0],
region = sparkline.getCurrentRegionFields();
value = region.y;
alert("Clicked on x=" + region.x + " y=" + region.y);
});
// mouseover event demo sparkline
$('.mouseoverdemo').sparkline();
$('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
var sparkline = ev.sparklines[0],
region = sparkline.getCurrentRegionFields();
value = region.y;
$('.mouseoverregion').text("x=" + region.x + " y=" + region.y);
}).bind('mouseleave', function () {
$('.mouseoverregion').text('');
});
}
/**
** Draw the little mouse speed animated graph
** This just attaches a handler to the mousemove event to see
** (roughly) how far the mouse has moved
** and then updates the display a couple of times a second via
** setTimeout()
**/
function drawMouseSpeedDemo() {
var mrefreshinterval = 500; // update display every 500ms
var lastmousex = -1;
var lastmousey = -1;
var lastmousetime;
var mousetravel = 0;
var mpoints = [];
var mpoints_max = 30;
$('html').mousemove(function (e) {
var mousex = e.pageX;
var mousey = e.pageY;
if (lastmousex > -1) {
mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
}
lastmousex = mousex;
lastmousey = mousey;
});
var mdraw = function () {
var md = new Date();
var timenow = md.getTime();
if (lastmousetime && lastmousetime != timenow) {
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
mpoints.push(pps);
if (mpoints.length > mpoints_max)
mpoints.splice(0, 1);
mousetravel = 0;
$('#mousespeed').sparkline(mpoints, { width: mpoints.length * 2, tooltipSuffix: ' pixels per second' });
}
lastmousetime = timenow;
setTimeout(mdraw, mrefreshinterval);
};
// We could use setInterval instead, but I prefer to do it this way
setTimeout(mdraw, mrefreshinterval);
}
//====
$("#sparkline14").sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40, 45, 56, 7, 10], {
type: 'line',
width: '100%',
height: '100',
lineColor: '#7868da',
fillColor: 'transparent',
spotColor: '#fff',
minSpotColor: undefined,
maxSpotColor: undefined,
highlightSpotColor: undefined,
highlightLineColor: undefined
});
$('#sparkline16').sparkline([15, 23, 45, 20, 54, 45, 35, 57, 30], {
type: 'line',
width: '100%',
height: '100',
chartRangeMax: 50,
resize: true,
lineColor: '#51aaed',
fillColor: '#60bafd',
highlightLineColor: 'rgba(0,0,0,.1)',
highlightSpotColor: 'rgba(0,0,0,.2)',
});
$('#sparkline16').sparkline([8, 17, 13, 14, 10, 16, 17, 20, 12, 27], {
type: 'line',
width: '100%',
height: '100',
chartRangeMax: 40,
lineColor: '#40c77c',
fillColor: '#50d38a',
composite: true,
resize: true,
highlightLineColor: 'rgba(0,0,0,.1)',
highlightSpotColor: 'rgba(0,0,0,.2)',
});

View File

@ -0,0 +1,117 @@
$(function() {
"use strict";
$('.colorpicker').colorpicker();
//Masked Input ============================================================================================================================
var $demoMaskedInput = $('.demo-masked-input');
//Date
$demoMaskedInput.find('.date').inputmask('dd/mm/yyyy', { placeholder: '__/__/____' });
//Time
$demoMaskedInput.find('.time12').inputmask('hh:mm t', { placeholder: '__:__ _m', alias: 'time12', hourFormat: '12' });
$demoMaskedInput.find('.time24').inputmask('hh:mm', { placeholder: '__:__ _m', alias: 'time24', hourFormat: '24' });
//Date Time
$demoMaskedInput.find('.datetime').inputmask('d/m/y h:s', { placeholder: '__/__/____ __:__', alias: "datetime", hourFormat: '24' });
//Mobile Phone Number
$demoMaskedInput.find('.mobile-phone-number').inputmask('+99 (999) 999-99-99', { placeholder: '+__ (___) ___-__-__' });
//Phone Number
$demoMaskedInput.find('.phone-number').inputmask('+99 (999) 999-99-99', { placeholder: '+__ (___) ___-__-__' });
//Dollar Money
$demoMaskedInput.find('.money-dollar').inputmask('99,99 $', { placeholder: '__,__ $' });
//IP Address
$demoMaskedInput.find('.ip').inputmask('999.999.999.999', { placeholder: '___.___.___.___' });
//Credit Card
$demoMaskedInput.find('.credit-card').inputmask('9999 9999 9999 9999', { placeholder: '____ ____ ____ ____' });
//Email
$demoMaskedInput.find('.email').inputmask({ alias: "email" });
//Serial Key
$demoMaskedInput.find('.key').inputmask('****-****-****-****', { placeholder: '____-____-____-____' });
// Masked Inputs
$('#phone').mask('(999) 999-9999');
$('#phone-ex').mask('(999) 999-9999? x99999');
$('#tax-id').mask('99-9999999');
$('#ssn').mask('999-99-9999');
$('#product-key').mask('a*-999-a999');
// Multiselect
$('#multiselect1, #multiselect2, #single-selection, #multiselect5, #multiselect6').multiselect({
maxHeight: 300
});
//Multi-select
$('#optgroup').multiSelect({ selectableOptgroup: true });
//noUISlider
var sliderBasic = document.getElementById('nouislider_basic_example');
noUiSlider.create(sliderBasic, {
start: [23],
connect: 'lower',
step: 1,
range: {
'min': [0],
'max': [100]
}
});
getNoUISliderValue(sliderBasic, true);
//Range Example
var rangeSlider = document.getElementById('nouislider_range_example');
noUiSlider.create(rangeSlider, {
start: [22860, 75283],
connect: true,
range: {
'min': 15000,
'max': 99999
}
});
getNoUISliderValue(rangeSlider, false);
$('#multiselect3-all').multiselect({
includeSelectAllOption: true,
});
$('#multiselect4-filter').multiselect({
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
maxHeight: 200
});
$('#multiselect-size').multiselect({
buttonClass: 'btn btn-default btn-sm'
});
$('#multiselect-link').multiselect({
buttonClass: 'btn btn-link'
});
$('#multiselect-color').multiselect({
buttonClass: 'btn btn-primary'
});
$('#multiselect-color2').multiselect({
buttonClass: 'btn btn-success'
});
// Date picker
$('.inline-datepicker').datepicker({
todayHighlight: true
});
});
//Get noUISlider Value and write on
function getNoUISliderValue(slider, percentage) {
slider.noUiSlider.on('update', function () {
var val = slider.noUiSlider.get();
if (percentage) {
val = parseInt(val);
val += '%';
}
$(slider).parent().find('span.js-nouislider-value').text(val);
});
}

View File

@ -0,0 +1,22 @@
$(function() {
"use strict";
$('.dropify').dropify();
var drEvent = $('#dropify-event').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
});
drEvent.on('dropify.afterClear', function(event, element) {
alert('File deleted');
});
$('.dropify-fr').dropify({
messages: {
default: 'Glissez-déposez un fichier ici ou cliquez',
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
remove: 'Supprimer',
error: 'Désolé, le fichier trop volumineux'
}
});
});

View File

@ -0,0 +1,7 @@
$(function () {
"use strict";
//CKEditor
CKEDITOR.replace('ckeditor');
CKEDITOR.config.height = 300;
});

View File

@ -0,0 +1,80 @@
$(function () {
"use strict";
//Horizontal form basic
$('#wizard_horizontal').steps({
headerTag: 'h2',
bodyTag: 'section',
transitionEffect: 'slideLeft',
onInit: function (event, currentIndex) {
setButtonWavesEffect(event);
},
onStepChanged: function (event, currentIndex, priorIndex) {
setButtonWavesEffect(event);
}
});
//Vertical form basic
$('#wizard_vertical').steps({
headerTag: 'h2',
bodyTag: 'section',
transitionEffect: 'slideLeft',
stepsOrientation: 'vertical',
onInit: function (event, currentIndex) {
setButtonWavesEffect(event);
},
onStepChanged: function (event, currentIndex, priorIndex) {
setButtonWavesEffect(event);
}
});
//Advanced form with validation
var form = $('#wizard_with_validation').show();
form.steps({
headerTag: 'h3',
bodyTag: 'fieldset',
transitionEffect: 'slideLeft',
onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex > newIndex) { return true; }
if (currentIndex < newIndex) {
form.find('.body:eq(' + newIndex + ') label.error').remove();
form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
}
form.validate().settings.ignore = ':disabled,:hidden';
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex) {
setButtonWavesEffect(event);
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ':disabled';
return form.valid();
},
onFinished: function (event, currentIndex) {
swal("Good job!", "Submitted!", "success");
}
});
form.validate({
highlight: function (input) {
$(input).parents('.form-line').addClass('error');
},
unhighlight: function (input) {
$(input).parents('.form-line').removeClass('error');
},
errorPlacement: function (error, element) {
$(element).parents('.form-group').append(error);
},
rules: {
'confirm': {
equalTo: '#password'
}
}
});
});
function setButtonWavesEffect(event) {
$(event.currentTarget).find('[role="menu"] li a').removeClass('');
$(event.currentTarget).find('[role="menu"] li:not(.disabled) a').addClass('');
}

View File

@ -0,0 +1,98 @@
$(function () {
//Basic Map
var basicMap = new GMaps({
el: '#gmap_basic_example',
lat: -12.043333,
lng: -77.028333
});
//Markers
var markers = new GMaps({
div: '#gmap_markers',
lat: -12.043333,
lng: -77.028333
});
markers.addMarker({
lat: -12.043333,
lng: -77.03,
title: 'Lima',
details: {
database_id: 42,
author: 'HPNeo'
},
click: function (e) {
if (console.log)
console.log(e);
alert('You clicked in this marker');
}
});
markers.addMarker({
lat: -12.042,
lng: -77.028333,
title: 'Marker with InfoWindow',
infoWindow: {
content: '<p>HTML Content</p>'
}
});
//Static maps
var staticMap = GMaps.staticMapURL({
size: [$('#gmap_static_map').width(), 400],
lat: -12.043333,
lng: -77.028333
});
$('<img/>').attr('src', staticMap).appendTo('#gmap_static_map');
//Static maps with markers
var staticMapWithMarkers = GMaps.staticMapURL({
size: [$('#gmap_static_map_with_markers').width(), 400],
lat: -12.043333,
lng: -77.028333,
markers: [
{ lat: -12.043333, lng: -77.028333 },
{
lat: -12.045333, lng: -77.034,
size: 'small'
},
{
lat: -12.045633, lng: -77.022,
color: 'blue'
}
]
});
$('<img/>').attr('src', staticMapWithMarkers).appendTo('#gmap_static_map_with_markers');
//Static maps with polyline
var path = [
[-12.040397656836609, -77.03373871559225],
[-12.040248585302038, -77.03993927003302],
[-12.050047116528843, -77.02448169303511],
[-12.044804866577001, -77.02154422636042],
[-12.040397656836609, -77.03373871559225],
];
var staticMapPolyline = GMaps.staticMapURL({
size: [$('#gmap_static_map_polyline').width(), 400],
lat: -12.043333,
lng: -77.028333,
polyline: {
path: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
// fillColor: '#ffaf2ecc'
}
});
$('<img/>').attr('src', staticMapPolyline).appendTo('#gmap_static_map_polyline');
//Panorama
var panorama = GMaps.createPanorama({
el: '#gmap_panorama',
lat: 42.3455,
lng: -71.0983
});
});

View File

@ -0,0 +1,119 @@
$(function () {
if( $('#world-map-markers').length > 0 ){
$('#world-map-markers').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
borderColor: '#fff',
borderOpacity: 0.25,
borderWidth: 0,
color: '#e6e6e6',
regionStyle : {
initial : {
fill : '#cccccc'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#000',
'stroke-width' : 1,
'stroke-opacity': 0.4
},
},
markers : [{
latLng : [21.00, 78.00],
name : 'INDIA : 350'
},
{
latLng : [-33.00, 151.00],
name : 'Australia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 250'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#2CA8FF',
"SA": '#49c5b6',
"AU": '#18ce0f',
"IN": '#f96332',
"GB": '#FFB236',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});
}
$('#india').vectorMap({
map : 'in_mill',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#f96332'
}
}
});
$('#usa').vectorMap({
map : 'us_aea_en',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#2CA8FF'
}
}
});
$('#australia').vectorMap({
map : 'au_mill',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#18ce0f'
}
}
});
$('#uk').vectorMap({
map : 'uk_mill_en',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#00ced1'
}
}
});
});

View File

@ -0,0 +1 @@
$(function(){$("#world-map-markers").vectorMap({map:"world_mill_en",normalizeFunction:"polynomial",hoverOpacity:.7,hoverColor:!1,backgroundColor:"transparent",regionStyle:{initial:{fill:"rgba(210, 214, 222, 1)","fill-opacity":1,stroke:"none","stroke-width":0,"stroke-opacity":1},hover:{fill:"rgba(255, 193, 7, 2)",cursor:"pointer"},selected:{fill:"yellow"},selectedHover:{}},markerStyle:{initial:{fill:"#fff",stroke:"#FFC107 "}},markers:[{latLng:[37.09,-95.71],name:"America"},{latLng:[51.16,10.45],name:"Germany"},{latLng:[-25.27,133.77],name:"Australia"},{latLng:[56.13,-106.34],name:"Canada"

View File

@ -0,0 +1,6 @@
$(function () {
$('#aniimated-thumbnials').lightGallery({
thumbnail: true,
selector: 'a'
});
});

View File

@ -0,0 +1,94 @@
$(function () {
"use strict";
//Taken from http://ionden.com/a/plugins/ion.rangeSlider/demo.html
$("#range_01").ionRangeSlider();
$("#range_02").ionRangeSlider({
min: 100,
max: 1000,
from: 550
});
$("#range_03").ionRangeSlider({
type: "double",
grid: true,
min: 0,
max: 1000,
from: 200,
to: 800,
prefix: "$"
});
$("#range_04").ionRangeSlider({
type: "double",
grid: true,
min: -1000,
max: 1000,
from: -500,
to: 500
});
$("#range_05").ionRangeSlider({
type: "double",
grid: true,
min: -1000,
max: 1000,
from: -500,
to: 500,
step: 250
});
$("#range_06").ionRangeSlider({
type: "double",
grid: true,
min: -12.8,
max: 12.8,
from: -3.2,
to: 3.2,
step: 0.1
});
$("#range_07").ionRangeSlider({
type: "double",
grid: true,
from: 1,
to: 5,
values: [0, 10, 100, 1000, 10000, 100000, 1000000]
});
$("#range_08").ionRangeSlider({
grid: true,
from: 5,
values: [
"zero", "one",
"two", "three",
"four", "five",
"six", "seven",
"eight", "nine",
"ten"
]
});
$("#range_09").ionRangeSlider({
grid: true,
from: 3,
values: [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
]
});
$("#range_10").ionRangeSlider({
grid: true,
min: 1000,
max: 1000000,
from: 100000,
step: 1000,
prettify_enabled: false
});
});

View File

@ -0,0 +1,4 @@
$(function () {
"use strict";
$('#mainTable').editableTableWidget();
});

View File

@ -0,0 +1,11 @@
'use strict';
$(document).ready(function() {
$('.table').footable({
"paging": {
"enabled": true
},
"sorting": {
"enabled": true
}
});
});

View File

@ -0,0 +1,158 @@
$(function () {
$('.js-basic-example').DataTable();
//Exportable table
$('.js-exportable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "assets/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
// Add row into table
var addRowTable = {
options: {
addButton: "#addToTable",
table: "#addrowExample",
dialog: {}
},
initialize: function() {
this.setVars().build().events()
},
setVars: function() {
return this.$table = $(this.options.table), this.$addButton = $(this.options.addButton), this.dialog = {}, this.dialog.$wrapper = $(this.options.dialog.wrapper), this.dialog.$cancel = $(this.options.dialog.cancelButton), this.dialog.$confirm = $(this.options.dialog.confirmButton), this
},
build: function() {
return this.datatable = this.$table.DataTable({
aoColumns: [null, null, null, {
bSortable: !1
}],
}), window.dt = this.datatable, this
},
events: function() {
var object = this;
return this.$table.on("click", "button.button-save", function(e) {
e.preventDefault(), object.rowSave($(this).closest("tr"))
}).on("click", "button.button-discard", function(e) {
e.preventDefault(), object.rowCancel($(this).closest("tr"))
}).on("click", "button.button-edit", function(e) {
e.preventDefault(), object.rowEdit($(this).closest("tr"))
}).on("click", "button.button-remove", function(e) {
e.preventDefault();
var $row = $(this).closest("tr");
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#dc3545",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function () {
object.rowRemove($row)
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
}), this.$addButton.on("click", function(e) {
e.preventDefault(), object.rowAdd()
}), this.dialog.$cancel.on("click", function(e) {
e.preventDefault(), $.magnificPopup.close()
}), this
},
rowAdd: function() {
this.$addButton.attr({
disabled: "disabled"
});
var actions, data, $row;
actions = ['<button class="btn btn-sm btn-icon btn-pure btn-default on-editing button-save" data-toggle="tooltip" data-original-title="Save" hidden><i class="icon-drawer" aria-hidden="true"></i></button>', '<button class="btn btn-sm btn-icon btn-pure btn-default on-editing button-discard" data-toggle="tooltip" data-original-title="Discard" hidden><i class="icon-close" aria-hidden="true"></i></button>', '<button class="btn btn-sm btn-icon btn-pure btn-default on-default button-edit" data-toggle="tooltip" data-original-title="Edit"><i class="icon-pencil" aria-hidden="true"></i></button>', '<button class="btn btn-sm btn-icon btn-pure btn-default on-default button-remove" data-toggle="tooltip" data-original-title="Remove"><i class="icon-trash" aria-hidden="true"></i></button>'].join(" "), data = this.datatable.row.add(["", "", "", actions]), ($row = this.datatable.row(data[0]).nodes().to$()).addClass("adding").find("td:last").addClass("actions"), this.rowEdit($row), this.datatable.order([0, "asc"]).draw()
},
rowCancel: function($row) {
var $actions, data;
$row.hasClass("adding") ? this.rowRemove($row) : (($actions = $row.find("td.actions")).find(".button-discard").tooltip("hide"), $actions.get(0) && this.rowSetActionsDefault($row), data = this.datatable.row($row.get(0)).data(), this.datatable.row($row.get(0)).data(data), this.handleTooltip($row), this.datatable.draw())
},
rowEdit: function($row) {
var data, object = this;
data = this.datatable.row($row.get(0)).data(), $row.children("td").each(function(i) {
var $this = $(this);
$this.hasClass("actions") ? object.rowSetActionsEditing($row) : $this.html('<input type="text" class="form-control input-block" value="' + data[i] + '"/>')
})
},
rowSave: function($row) {
var $actions, object = this,
values = [];
$row.hasClass("adding") && (this.$addButton.removeAttr("disabled"), $row.removeClass("adding")), values = $row.find("td").map(function() {
var $this = $(this);
return $this.hasClass("actions") ? (object.rowSetActionsDefault($row), object.datatable.cell(this).data()) : $.trim($this.find("input").val())
}), ($actions = $row.find("td.actions")).find(".button-save").tooltip("hide"), $actions.get(0) && this.rowSetActionsDefault($row), this.datatable.row($row.get(0)).data(values), this.handleTooltip($row), this.datatable.draw()
},
rowRemove: function($row) {
$row.hasClass("adding") && this.$addButton.removeAttr("disabled"), this.datatable.row($row.get(0)).remove().draw()
},
rowSetActionsEditing: function($row) {
$row.find(".on-editing").removeAttr("hidden"), $row.find(".on-default").attr("hidden", !0)
},
rowSetActionsDefault: function($row) {
$row.find(".on-editing").attr("hidden", !0), $row.find(".on-default").removeAttr("hidden")
},
handleTooltip: function($row) {
$row.find('[data-toggle="tooltip"]').tooltip()
}
};
$(function() {
addRowTable.initialize()
})

View File

@ -0,0 +1,169 @@
var defaultData = [
{
text: 'Parent 1',
href: '#parent1',
tags: ['4'],
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['0']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['0']
}
]
},
{
text: 'Parent 2',
href: '#parent2',
tags: ['0']
},
{
text: 'Parent 3',
href: '#parent3',
tags: ['0']
},
{
text: 'Parent 4',
href: '#parent4',
tags: ['0']
},
{
text: 'Parent 5',
href: '#parent5' ,
tags: ['0']
}
];
$('#treeview1').treeview({
data: defaultData
});
$('#treeview2').treeview({
levels: 1,
showBorder: false,
data: defaultData
});
$('#treeview3').treeview({
levels: 99,
showBorder: false,
data: defaultData
});
$('#treeview4').treeview({
expandIcon: 'icon-arrow-right',
collapseIcon: 'icon-arrow-down',
nodeIcon: 'icon-folder',
showBorder: false,
data: defaultData
});
$('#treeview5').treeview({
showTags: true,
showBorder: false,
data: defaultData
});
$('#treeview6').treeview({
data: defaultData,
showIcon: false,
showCheckbox: true,
showBorder: false,
});
// Searchable
var $searchableTree = $('#treeview7').treeview({
data: defaultData,
showBorder: false,
});
var search = function(e) {
var pattern = $('#input-search').val();
var options = {
ignoreCase: true,
exactMatch: false,
};
var results = $searchableTree.treeview('search', [ pattern, options ]);
}
$('#btn-search').on('click', search);
$('#input-search').on('keyup', search);
// Selectable
var initSelectableTree = function() {
return $('#treeview8').treeview({
data: defaultData,
showBorder: false,
multiSelect: $('#chk-select-multi').is(':checked'),
onNodeSelected: function(event, node) {
// $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
toastr.options.closeButton = true;
toastr.options.positionClass = 'toast-top-right';
toastr.options.showDuration = 1000;
toastr['info'](node.text + ' was selected');
},
onNodeUnselected: function (event, node) {
// $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
toastr.options.closeButton = true;
toastr.options.positionClass = 'toast-top-right';
toastr.options.showDuration = 1000;
toastr['error'](node.text + ' was unselected');
}
});
};
var $selectableTree = initSelectableTree();
// JSON
var json = '[' +
'{' +
'"text": "Parent 1",' +
'"nodes": [' +
'{' +
'"text": "Child 1",' +
'"nodes": [' +
'{' +
'"text": "Grandchild 1"' +
'},' +
'{' +
'"text": "Grandchild 2"' +
'}' +
']' +
'},' +
'{' +
'"text": "Child 2"' +
'}' +
']' +
'},' +
'{' +
'"text": "Parent 2"' +
'},' +
'{' +
'"text": "Parent 3"' +
'},' +
'{' +
'"text": "Parent 4"' +
'},' +
'{' +
'"text": "Parent 5"' +
'}' +
']';
var $tree = $('#treeview9').treeview({
data: json,
showBorder: false
});

View File

@ -0,0 +1,89 @@
// inline data demo
jQuery('#treeExample1').jstree({
'core' : {
'data' : [
{
"text" : "Root node",
"children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]}
]
}
});
// html demo
jQuery('#treeExample2, #treeExample3, #treeExample4').jstree();
// Json demo
jQuery('#treeExample5').jstree({
'core' : {
'data' : {
"url" : "assets/data/treeview_jstree.json",
"dataType" : "json" // needed only if you do not supply JSON headers
}
}
});
// Ajax demo
jQuery('#treeExample6').jstree({
'core' : {
'data' : {
"url" : "//www.jstree.com/fiddle/?lazy",
"data" : function (node) {
return { "id" : node.id };
}
}
}
});
// data from callback
jQuery('#treeExample7').jstree({
'core' : {
'data' : function (node, cb) {
if(node.id === "#") {
cb([{"text" : "Root", "id" : "1", "children" : true}]);
}
else {
cb(["Child"]);
}
}
}
});
// interaction and events
jQuery('#evts_button').on("click", function () {
var instance = jQuery('#treeExample8').jstree(true);
instance.deselect_all();
instance.select_node('1');
});
jQuery('#treeExample8')
.on("changed.jstree", function (e, data) {
if(data.selected.length) {
alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
}
})
.jstree({
'core' : {
'multiple' : false,
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1", "id" : 1 },
{ "text" : "Child node 2" }
]}
]
}
});
// Checkbox
$("#treeExample9").jstree({
"plugins" : [ "checkbox" ]
});
// Drag and drop
$("#treeExample10").jstree({
"core" : {
"check_callback" : true
},
"plugins" : [ "dnd" ]
});

View File

@ -0,0 +1,16 @@
$(function () {
$('.js-animations').bind('change', function () {
var animation = $(this).val();
$('.js-animating-object').animateCss(animation);
});
});
//Copied from https://github.com/daneden/animate.css
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});

View File

@ -0,0 +1,140 @@
$(function () {
$('.js-sweetalert').on('click', function () {
var type = $(this).data('type');
if (type === 'basic') {
showBasicMessage();
}
else if (type === 'with-title') {
showWithTitleMessage();
}
else if (type === 'success') {
showSuccessMessage();
}
else if (type === 'confirm') {
showConfirmMessage();
}
else if (type === 'cancel') {
showCancelMessage();
}
else if (type === 'with-custom-icon') {
showWithCustomIconMessage();
}
else if (type === 'html-message') {
showHtmlMessage();
}
else if (type === 'autoclose-timer') {
showAutoCloseTimerMessage();
}
else if (type === 'prompt') {
showPromptMessage();
}
else if (type === 'ajax-loader') {
showAjaxLoaderMessage();
}
});
});
//These codes takes from http://t4t5.github.io/sweetalert/
function showBasicMessage() {
swal("Here's a message!");
}
function showWithTitleMessage() {
swal("Here's a message!", "It's pretty, isn't it?");
}
function showSuccessMessage() {
swal("Good job!", "You clicked the button!", "success");
}
function showConfirmMessage() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#dc3545",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
}
function showCancelMessage() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#dc3545",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
}
function showWithCustomIconMessage() {
swal({
title: "Sweet!",
text: "Here's a custom image.",
imageUrl: "../assets/images/sm/avatar2.jpg"
});
}
function showHtmlMessage() {
swal({
title: "HTML <small>Title</small>!",
text: "A custom <span style=\"color: #CC0000\">html<span> message.",
html: true
});
}
function showAutoCloseTimerMessage() {
swal({
title: "Auto close alert!",
text: "I will close in 2 seconds.",
timer: 2000,
showConfirmButton: false
});
}
function showPromptMessage() {
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function (inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!"); return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
}
function showAjaxLoaderMessage() {
swal({
title: "Ajax request example",
text: "Submit to run ajax request",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
}, function () {
setTimeout(function () {
swal("Ajax request finished!");
}, 2000);
});
}

View File

@ -0,0 +1,7 @@
$(function () {
$('.js-modal-buttons .btn').on('click', function () {
var color = $(this).data('color');
$('#mdModal .modal-content').removeAttr('class').addClass('modal-content modal-col-' + color);
$('#mdModal').modal('show');
});
});

View File

@ -0,0 +1,47 @@
$(function () {
$('.jsdemo-notification-button button').on('click', function () {
var placementFrom = $(this).data('placement-from');
var placementAlign = $(this).data('placement-align');
var animateEnter = $(this).data('animate-enter');
var animateExit = $(this).data('animate-exit');
var colorName = $(this).data('color-name');
showNotification(colorName, null, placementFrom, placementAlign, animateEnter, animateExit);
});
});
function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
if (colorName === null || colorName === '') { colorName = 'bg-black'; }
if (text === null || text === '') { text = 'Turning standard Bootstrap alerts'; }
if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
var allowDismiss = true;
$.notify({
message: text
},
{
type: colorName,
allow_dismiss: allowDismiss,
newest_on_top: true,
timer: 50000,
placement: {
from: placementFrom,
align: placementAlign
},
animate: {
enter: animateEnter,
exit: animateExit
},
template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-35" : "") + '" role="alert">' +
'<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
'<span data-notify="icon"></span> ' +
'<span data-notify="title">{1}</span> ' +
'<span data-notify="message">{2}</span>' +
'<div class="progress" data-notify="progressbar">' +
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
'</div>' +
'<a href="{3}" target="{4}" data-notify="url"></a>' +
'</div>'
});
}

View File

@ -0,0 +1,93 @@
$(function () {
//Taken from http://ionden.com/a/plugins/ion.rangeSlider/demo.html
$("#range_01").ionRangeSlider();
$("#range_02").ionRangeSlider({
min: 100,
max: 1000,
from: 550
});
$("#range_03").ionRangeSlider({
type: "double",
grid: true,
min: 0,
max: 1000,
from: 200,
to: 800,
prefix: "$"
});
$("#range_04").ionRangeSlider({
type: "double",
grid: true,
min: -1000,
max: 1000,
from: -500,
to: 500
});
$("#range_05").ionRangeSlider({
type: "double",
grid: true,
min: -1000,
max: 1000,
from: -500,
to: 500,
step: 250
});
$("#range_06").ionRangeSlider({
type: "double",
grid: true,
min: -12.8,
max: 12.8,
from: -3.2,
to: 3.2,
step: 0.1
});
$("#range_07").ionRangeSlider({
type: "double",
grid: true,
from: 1,
to: 5,
values: [0, 10, 100, 1000, 10000, 100000, 1000000]
});
$("#range_08").ionRangeSlider({
grid: true,
from: 5,
values: [
"zero", "one",
"two", "three",
"four", "five",
"six", "seven",
"eight", "nine",
"ten"
]
});
$("#range_09").ionRangeSlider({
grid: true,
from: 3,
values: [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
]
});
$("#range_10").ionRangeSlider({
grid: true,
min: 1000,
max: 1000000,
from: 100000,
step: 1000,
prettify_enabled: false
});
});

View File

@ -0,0 +1,17 @@
$(function () {
$('.dd').nestable();
$('.dd').on('change', function () {
var $this = $(this);
var serializedData = window.JSON.stringify($($this).nestable('serialize'));
$this.parents('div.body').find('textarea').val(serializedData);
});
$('.dd4').nestable();
$('.dd4').on('change', function () {
var $this = $(this);
var serializedData = window.JSON.stringify($($this).nestable('serialize'));
});
});

View File

@ -0,0 +1,9 @@
$(function () {
//Tooltip
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
//Popover
$('[data-toggle="popover"]').popover();
})

View File

@ -0,0 +1,38 @@
$(function () {
"use strict";
initCharts();
});
//Charts
function initCharts() {
//Chart Bar
$('.chart.chart-bar').sparkline(undefined, {
type: 'bar',
barColor: '#f2c80f',
negBarColor: '#fb4364',
barWidth: '4px',
height: '45px'
});
//Chart Pie
$('.chart.chart-pie').sparkline(undefined, {
type: 'pie',
height: '50px',
sliceColors: ['#374649', '#01b8aa', '#f2c80f', '#fd625e']
});
//Chart Line
$('.chart.chart-line').sparkline(undefined, {
type: 'line',
width: '60px',
height: '45px',
lineColor: '#fd625e',
lineWidth: 1.5,
fillColor: 'rgba(0,0,0,0)',
spotColor: 'rgba(255,255,255,0.40)',
maxSpotColor: 'rgba(255,255,255,0.40)',
minSpotColor: 'rgba(255,255,255,0.40)',
spotRadius: 3,
highlightSpotColor: '#3aaaec'
});
}