update
This commit is contained in:
Dwi Swandhana
No files matched your search
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Auto Complete
|
||||
*/
|
||||
|
||||
|
||||
/*jslint browser: true, white: true, plusplus: true */
|
||||
/*global $, countries */
|
||||
|
||||
$(function () {
|
||||
'use strict';
|
||||
|
||||
var countriesArray = $.map(countries, function (value, key) { return { value: value, data: key }; });
|
||||
|
||||
// Setup jQuery ajax mock:
|
||||
$.mockjax({
|
||||
url: '*',
|
||||
responseTime: 2000,
|
||||
response: function (settings) {
|
||||
var query = settings.data.query,
|
||||
queryLowerCase = query.toLowerCase(),
|
||||
re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
|
||||
suggestions = $.grep(countriesArray, function (country) {
|
||||
// return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
|
||||
return re.test(country.value);
|
||||
}),
|
||||
response = {
|
||||
query: query,
|
||||
suggestions: suggestions
|
||||
};
|
||||
|
||||
this.responseText = JSON.stringify(response);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize ajax autocomplete:
|
||||
$('#autocomplete-ajax').autocomplete({
|
||||
// serviceUrl: '/autosuggest/service/url',
|
||||
lookup: countriesArray,
|
||||
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
|
||||
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
|
||||
return re.test(suggestion.value);
|
||||
},
|
||||
onSelect: function(suggestion) {
|
||||
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
|
||||
},
|
||||
onHint: function (hint) {
|
||||
$('#autocomplete-ajax-x').val(hint);
|
||||
},
|
||||
onInvalidateSelection: function() {
|
||||
$('#selction-ajax').html('You selected: none');
|
||||
}
|
||||
});
|
||||
|
||||
var nhlTeams = ['Anaheim Ducks', 'Atlanta Thrashers', 'Boston Bruins', 'Buffalo Sabres', 'Calgary Flames', 'Carolina Hurricanes', 'Chicago Blackhawks', 'Colorado Avalanche', 'Columbus Blue Jackets', 'Dallas Stars', 'Detroit Red Wings', 'Edmonton OIlers', 'Florida Panthers', 'Los Angeles Kings', 'Minnesota Wild', 'Montreal Canadiens', 'Nashville Predators', 'New Jersey Devils', 'New Rork Islanders', 'New York Rangers', 'Ottawa Senators', 'Philadelphia Flyers', 'Phoenix Coyotes', 'Pittsburgh Penguins', 'Saint Louis Blues', 'San Jose Sharks', 'Tampa Bay Lightning', 'Toronto Maple Leafs', 'Vancouver Canucks', 'Washington Capitals'];
|
||||
var nbaTeams = ['Atlanta Hawks', 'Boston Celtics', 'Charlotte Bobcats', 'Chicago Bulls', 'Cleveland Cavaliers', 'Dallas Mavericks', 'Denver Nuggets', 'Detroit Pistons', 'Golden State Warriors', 'Houston Rockets', 'Indiana Pacers', 'LA Clippers', 'LA Lakers', 'Memphis Grizzlies', 'Miami Heat', 'Milwaukee Bucks', 'Minnesota Timberwolves', 'New Jersey Nets', 'New Orleans Hornets', 'New York Knicks', 'Oklahoma City Thunder', 'Orlando Magic', 'Philadelphia Sixers', 'Phoenix Suns', 'Portland Trail Blazers', 'Sacramento Kings', 'San Antonio Spurs', 'Toronto Raptors', 'Utah Jazz', 'Washington Wizards'];
|
||||
var nhl = $.map(nhlTeams, function (team) { return { value: team, data: { category: 'NHL' }}; });
|
||||
var nba = $.map(nbaTeams, function (team) { return { value: team, data: { category: 'NBA' } }; });
|
||||
var teams = nhl.concat(nba);
|
||||
|
||||
// Initialize autocomplete with local lookup:
|
||||
$('#autocomplete').devbridgeAutocomplete({
|
||||
lookup: teams,
|
||||
minChars: 1,
|
||||
onSelect: function (suggestion) {
|
||||
$('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data.category);
|
||||
},
|
||||
showNoSuggestionNotice: true,
|
||||
noSuggestionNotice: 'Sorry, no matching results',
|
||||
groupBy: 'category'
|
||||
});
|
||||
|
||||
// Initialize autocomplete with custom appendTo:
|
||||
$('#autocomplete-custom-append').autocomplete({
|
||||
lookup: countriesArray,
|
||||
appendTo: '#suggestions-container'
|
||||
});
|
||||
|
||||
// Initialize autocomplete with custom appendTo:
|
||||
$('#autocomplete-dynamic').autocomplete({
|
||||
lookup: countriesArray
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,207 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Component: Full-Calendar
|
||||
*/
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var CalendarApp = function() {
|
||||
this.$body = $("body")
|
||||
this.$modal = $('#event-modal'),
|
||||
this.$event = ('#external-events div.external-event'),
|
||||
this.$calendar = $('#calendar'),
|
||||
this.$saveCategoryBtn = $('.save-category'),
|
||||
this.$categoryForm = $('#add-category form'),
|
||||
this.$extEvents = $('#external-events'),
|
||||
this.$calendarObj = null
|
||||
};
|
||||
|
||||
|
||||
/* on drop */
|
||||
CalendarApp.prototype.onDrop = function (eventObj, date) {
|
||||
var $this = this;
|
||||
// retrieve the dropped element's stored Event Object
|
||||
var originalEventObject = eventObj.data('eventObject');
|
||||
var $categoryClass = eventObj.attr('data-class');
|
||||
// we need to copy it, so that multiple events don't have a reference to the same object
|
||||
var copiedEventObject = $.extend({}, originalEventObject);
|
||||
// assign it the date that was reported
|
||||
copiedEventObject.start = date;
|
||||
if ($categoryClass)
|
||||
copiedEventObject['className'] = [$categoryClass];
|
||||
// render the event on the calendar
|
||||
$this.$calendar.fullCalendar('renderEvent', copiedEventObject, true);
|
||||
// is the "remove after drop" checkbox checked?
|
||||
if ($('#drop-remove').is(':checked')) {
|
||||
// if so, remove the element from the "Draggable Events" list
|
||||
eventObj.remove();
|
||||
}
|
||||
},
|
||||
/* on click on event */
|
||||
CalendarApp.prototype.onEventClick = function (calEvent, jsEvent, view) {
|
||||
var $this = this;
|
||||
var form = $("<form></form>");
|
||||
form.append("<label>Change event name</label>");
|
||||
form.append("<div class='input-group m-b-15'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success btn-md waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>");
|
||||
$this.$modal.modal({
|
||||
backdrop: 'static'
|
||||
});
|
||||
$this.$modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function () {
|
||||
$this.$calendarObj.fullCalendar('removeEvents', function (ev) {
|
||||
return (ev._id == calEvent._id);
|
||||
});
|
||||
$this.$modal.modal('hide');
|
||||
});
|
||||
$this.$modal.find('form').on('submit', function () {
|
||||
calEvent.title = form.find("input[type=text]").val();
|
||||
$this.$calendarObj.fullCalendar('updateEvent', calEvent);
|
||||
$this.$modal.modal('hide');
|
||||
return false;
|
||||
});
|
||||
},
|
||||
/* on select */
|
||||
CalendarApp.prototype.onSelect = function (start, end, allDay) {
|
||||
var $this = this;
|
||||
$this.$modal.modal({
|
||||
backdrop: 'static'
|
||||
});
|
||||
var form = $("<form></form>");
|
||||
form.append("<div class='row'></div>");
|
||||
form.find(".row")
|
||||
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
|
||||
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
|
||||
.find("select[name='category']")
|
||||
.append("<option value='bg-danger'>Danger</option>")
|
||||
.append("<option value='bg-success'>Success</option>")
|
||||
.append("<option value='bg-purple'>Purple</option>")
|
||||
.append("<option value='bg-primary'>Primary</option>")
|
||||
.append("<option value='bg-pink'>Pink</option>")
|
||||
.append("<option value='bg-info'>Info</option>")
|
||||
.append("<option value='bg-inverse'>Inverse</option>")
|
||||
.append("<option value='bg-warning'>Warning</option></div></div>");
|
||||
$this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
|
||||
form.submit();
|
||||
});
|
||||
$this.$modal.find('form').on('submit', function () {
|
||||
var title = form.find("input[name='title']").val();
|
||||
var beginning = form.find("input[name='beginning']").val();
|
||||
var ending = form.find("input[name='ending']").val();
|
||||
var categoryClass = form.find("select[name='category'] option:checked").val();
|
||||
if (title !== null && title.length != 0) {
|
||||
$this.$calendarObj.fullCalendar('renderEvent', {
|
||||
title: title,
|
||||
start:start,
|
||||
end: end,
|
||||
allDay: false,
|
||||
className: categoryClass
|
||||
}, true);
|
||||
$this.$modal.modal('hide');
|
||||
}
|
||||
else{
|
||||
alert('You have to give a title to your event');
|
||||
}
|
||||
return false;
|
||||
|
||||
});
|
||||
$this.$calendarObj.fullCalendar('unselect');
|
||||
},
|
||||
CalendarApp.prototype.enableDrag = function() {
|
||||
//init events
|
||||
$(this.$event).each(function () {
|
||||
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
|
||||
// it doesn't need to have a start or end
|
||||
var eventObject = {
|
||||
title: $.trim($(this).text()) // use the element's text as the event title
|
||||
};
|
||||
// store the Event Object in the DOM element so we can get to it later
|
||||
$(this).data('eventObject', eventObject);
|
||||
// make the event draggable using jQuery UI
|
||||
$(this).draggable({
|
||||
zIndex: 999,
|
||||
revert: true, // will cause the event to go back to its
|
||||
revertDuration: 0 // original position after the drag
|
||||
});
|
||||
});
|
||||
}
|
||||
/* Initializing */
|
||||
CalendarApp.prototype.init = function() {
|
||||
this.enableDrag();
|
||||
/* Initialize the calendar */
|
||||
var date = new Date();
|
||||
var d = date.getDate();
|
||||
var m = date.getMonth();
|
||||
var y = date.getFullYear();
|
||||
var form = '';
|
||||
var today = new Date($.now());
|
||||
|
||||
var defaultEvents = [{
|
||||
title: 'Hey!',
|
||||
start: new Date($.now() + 158000000),
|
||||
className: 'bg-purple'
|
||||
},
|
||||
{
|
||||
title: 'See John Deo',
|
||||
start: today,
|
||||
end: today,
|
||||
className: 'bg-success'
|
||||
},
|
||||
{
|
||||
title: 'Meet John Deo',
|
||||
start: new Date($.now() + 168000000),
|
||||
className: 'bg-info'
|
||||
},
|
||||
{
|
||||
title: 'Buy a Theme',
|
||||
start: new Date($.now() + 338000000),
|
||||
className: 'bg-primary'
|
||||
}];
|
||||
|
||||
var $this = this;
|
||||
$this.$calendarObj = $this.$calendar.fullCalendar({
|
||||
slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
|
||||
minTime: '08:00:00',
|
||||
maxTime: '19:00:00',
|
||||
defaultView: 'month',
|
||||
handleWindowResize: true,
|
||||
height: $(window).height() - 200,
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
events: defaultEvents,
|
||||
editable: true,
|
||||
droppable: true, // this allows things to be dropped onto the calendar !!!
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
selectable: true,
|
||||
drop: function(date) { $this.onDrop($(this), date); },
|
||||
select: function (start, end, allDay) { $this.onSelect(start, end, allDay); },
|
||||
eventClick: function(calEvent, jsEvent, view) { $this.onEventClick(calEvent, jsEvent, view); }
|
||||
|
||||
});
|
||||
|
||||
//on new event
|
||||
this.$saveCategoryBtn.on('click', function(){
|
||||
var categoryName = $this.$categoryForm.find("input[name='category-name']").val();
|
||||
var categoryColor = $this.$categoryForm.find("select[name='category-color']").val();
|
||||
if (categoryName !== null && categoryName.length != 0) {
|
||||
$this.$extEvents.append('<div class="external-event bg-' + categoryColor + '" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="mdi mdi-checkbox-blank-circle mr-2 vertical-middle"></i>' + categoryName + '</div>')
|
||||
$this.enableDrag();
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
//init CalendarApp
|
||||
$.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
|
||||
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing CalendarApp
|
||||
function($) {
|
||||
"use strict";
|
||||
$.CalendarApp.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,857 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Chartist chart
|
||||
*/
|
||||
|
||||
//smil-animations Chart
|
||||
|
||||
|
||||
var chart = new Chartist.Line('#smil-animations', {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
series: [
|
||||
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
|
||||
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
|
||||
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
|
||||
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
// Let's put a sequence number aside so we can use it in the event callbacks
|
||||
var seq = 0,
|
||||
delays = 80,
|
||||
durations = 500;
|
||||
|
||||
// Once the chart is fully created we reset the sequence
|
||||
chart.on('created', function() {
|
||||
seq = 0;
|
||||
});
|
||||
|
||||
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
|
||||
chart.on('draw', function(data) {
|
||||
seq++;
|
||||
|
||||
if(data.type === 'line') {
|
||||
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
|
||||
data.element.animate({
|
||||
opacity: {
|
||||
// The delay when we like to start the animation
|
||||
begin: seq * delays + 1000,
|
||||
// Duration of the animation
|
||||
dur: durations,
|
||||
// The value where the animation should start
|
||||
from: 0,
|
||||
// The value where it should end
|
||||
to: 1
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'label' && data.axis === 'x') {
|
||||
data.element.animate({
|
||||
y: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.y + 100,
|
||||
to: data.y,
|
||||
// We can specify an easing function from Chartist.Svg.Easing
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'label' && data.axis === 'y') {
|
||||
data.element.animate({
|
||||
x: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 100,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'point') {
|
||||
data.element.animate({
|
||||
x1: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 10,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
x2: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 10,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
opacity: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: 0,
|
||||
to: 1,
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'grid') {
|
||||
// Using data.axis we get x or y which we can use to construct our animation definition objects
|
||||
var pos1Animation = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data[data.axis.units.pos + '1'] - 30,
|
||||
to: data[data.axis.units.pos + '1'],
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
var pos2Animation = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data[data.axis.units.pos + '2'] - 100,
|
||||
to: data[data.axis.units.pos + '2'],
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
var animations = {};
|
||||
animations[data.axis.units.pos + '1'] = pos1Animation;
|
||||
animations[data.axis.units.pos + '2'] = pos2Animation;
|
||||
animations['opacity'] = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: 0,
|
||||
to: 1,
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
data.element.animate(animations);
|
||||
}
|
||||
});
|
||||
|
||||
// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
|
||||
chart.on('created', function() {
|
||||
if(window.__exampleAnimateTimeout) {
|
||||
clearTimeout(window.__exampleAnimateTimeout);
|
||||
window.__exampleAnimateTimeout = null;
|
||||
}
|
||||
window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Simple line chart
|
||||
new Chartist.Line('#simple-line-chart', {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
||||
series: [
|
||||
[12, 9, 7, 8, 5],
|
||||
[2, 1, 3.5, 7, 3],
|
||||
[1, 3, 4, 5, 6]
|
||||
]
|
||||
}, {
|
||||
fullWidth: true,
|
||||
chartPadding: {
|
||||
right: 40
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Line Scatter Diagram
|
||||
var times = function(n) {
|
||||
return Array.apply(null, new Array(n));
|
||||
};
|
||||
|
||||
var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
|
||||
data.labels.push(index + 1);
|
||||
data.series.forEach(function(series) {
|
||||
series.push(Math.random() * 100)
|
||||
});
|
||||
|
||||
return data;
|
||||
}, {
|
||||
labels: [],
|
||||
series: times(4).map(function() { return new Array() })
|
||||
});
|
||||
|
||||
var options = {
|
||||
showLine: false,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value, index) {
|
||||
return index % 13 === 0 ? 'W' + value : null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (min-width: 640px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value, index) {
|
||||
return index % 4 === 0 ? 'W' + value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
new Chartist.Line('#scatter-diagram', data, options, responsiveOptions);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Line chart with tooltips
|
||||
|
||||
new Chartist.Line('#line-chart-tooltips', {
|
||||
labels: ['1', '2', '3', '4', '5', '6'],
|
||||
series: [
|
||||
{
|
||||
name: 'Fibonacci sequence',
|
||||
data: [1, 2, 3, 5, 8, 13]
|
||||
},
|
||||
{
|
||||
name: 'Golden section',
|
||||
data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
}
|
||||
);
|
||||
|
||||
var $chart = $('#line-chart-tooltips');
|
||||
|
||||
var $toolTip = $chart
|
||||
.append('<div class="tooltip"></div>')
|
||||
.find('.tooltip')
|
||||
.hide();
|
||||
|
||||
$chart.on('mouseenter', '.ct-point', function() {
|
||||
var $point = $(this),
|
||||
value = $point.attr('ct:value'),
|
||||
seriesName = $point.parent().attr('ct:series-name');
|
||||
$toolTip.html(seriesName + '<br>' + value).show();
|
||||
});
|
||||
|
||||
$chart.on('mouseleave', '.ct-point', function() {
|
||||
$toolTip.hide();
|
||||
});
|
||||
|
||||
$chart.on('mousemove', function(event) {
|
||||
$toolTip.css({
|
||||
left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
|
||||
top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Line chart with area
|
||||
|
||||
new Chartist.Line('#chart-with-area', {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
series: [
|
||||
[5, 9, 7, 8, 5, 3, 5, 4]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: true,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
//Bi-polar Line chart with area only
|
||||
|
||||
new Chartist.Line('#bi-polar-line', {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
series: [
|
||||
[1, 2, 3, 1, -2, 0, 1, 0],
|
||||
[-2, -1, -2, -1, -2.5, -1, -2, -1],
|
||||
[0, 0, 0, 1, 2, 2.5, 2, 1],
|
||||
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
|
||||
]
|
||||
}, {
|
||||
high: 3,
|
||||
low: -3,
|
||||
showArea: true,
|
||||
showLine: false,
|
||||
showPoint: false,
|
||||
fullWidth: true,
|
||||
axisX: {
|
||||
showLabel: false,
|
||||
showGrid: false
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//SVG Path animation
|
||||
|
||||
var chart = new Chartist.Line('#svg-animation', {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
series: [
|
||||
[1, 5, 2, 5, 4, 3],
|
||||
[2, 3, 4, 8, 1, 2],
|
||||
[5, 4, 3, 2, 1, 0.5]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: true,
|
||||
showPoint: false,
|
||||
fullWidth: true
|
||||
});
|
||||
|
||||
chart.on('draw', function(data) {
|
||||
if(data.type === 'line' || data.type === 'area') {
|
||||
data.element.animate({
|
||||
d: {
|
||||
begin: 2000 * data.index,
|
||||
dur: 2000,
|
||||
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
|
||||
to: data.path.clone().stringify(),
|
||||
easing: Chartist.Svg.Easing.easeOutQuint
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Line Interpolation / Smoothing
|
||||
|
||||
var chart = new Chartist.Line('#line-smoothing', {
|
||||
labels: [1, 2, 3, 4, 5],
|
||||
series: [
|
||||
[1, 5, 10, 0, 1],
|
||||
[10, 15, 0, 1, 2]
|
||||
]
|
||||
}, {
|
||||
// Remove this configuration to see that chart rendered with cardinal spline interpolation
|
||||
// Sometimes, on large jumps in data values, it's better to use simple smoothing.
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 2
|
||||
}),
|
||||
fullWidth: true,
|
||||
chartPadding: {
|
||||
right: 20
|
||||
},
|
||||
low: 0,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Bi-polar bar chart
|
||||
|
||||
var data = {
|
||||
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
|
||||
series: [
|
||||
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
|
||||
]
|
||||
};
|
||||
|
||||
var options = {
|
||||
high: 10,
|
||||
low: -10,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
};
|
||||
|
||||
new Chartist.Bar('#bi-polar-bar', data, options);
|
||||
|
||||
|
||||
|
||||
|
||||
//Overlapping bars on mobile
|
||||
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
|
||||
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
|
||||
]
|
||||
};
|
||||
|
||||
var options = {
|
||||
seriesBarDistance: 10
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
new Chartist.Bar('#overlapping-bars', data, options, responsiveOptions);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Multi-line labels
|
||||
|
||||
new Chartist.Bar('#multi-line-chart', {
|
||||
labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
|
||||
series: [
|
||||
[60000, 40000, 80000, 70000],
|
||||
[40000, 30000, 70000, 65000],
|
||||
[8000, 3000, 10000, 6000]
|
||||
]
|
||||
}, {
|
||||
seriesBarDistance: 10,
|
||||
axisX: {
|
||||
offset: 60
|
||||
},
|
||||
axisY: {
|
||||
offset: 80,
|
||||
labelInterpolationFnc: function(value) {
|
||||
return value + ' CHF'
|
||||
},
|
||||
scaleMinSpace: 15
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Stacked bar chart
|
||||
|
||||
new Chartist.Bar('#stacked-bar-chart', {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
series: [
|
||||
[800000, 1200000, 1400000, 1300000],
|
||||
[200000, 400000, 500000, 300000],
|
||||
[160000, 290000, 410000, 600000]
|
||||
]
|
||||
}, {
|
||||
stackBars: true,
|
||||
axisY: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return (value / 1000) + 'k';
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
}).on('draw', function(data) {
|
||||
if(data.type === 'bar') {
|
||||
data.element.attr({
|
||||
style: 'stroke-width: 30px'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Horizontal bar chart
|
||||
|
||||
new Chartist.Bar('#horizontal-bar-chart', {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3],
|
||||
[3, 2, 9, 5, 4, 6, 4]
|
||||
]
|
||||
}, {
|
||||
seriesBarDistance: 10,
|
||||
reverseData: true,
|
||||
horizontalBars: true,
|
||||
axisY: {
|
||||
offset: 70
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Extreme responsive configuration
|
||||
|
||||
new Chartist.Bar('#extreme-chart', {
|
||||
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
|
||||
series: [
|
||||
[5, 4, 3, 7],
|
||||
[3, 2, 9, 5],
|
||||
[1, 5, 8, 4],
|
||||
[2, 3, 4, 6],
|
||||
[4, 1, 2, 1]
|
||||
]
|
||||
}, {
|
||||
// Default mobile configuration
|
||||
stackBars: true,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return value.split(/\s+/).map(function(word) {
|
||||
return word[0];
|
||||
}).join('');
|
||||
}
|
||||
},
|
||||
axisY: {
|
||||
offset: 20
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
}, [
|
||||
// Options override for media > 400px
|
||||
['screen and (min-width: 400px)', {
|
||||
reverseData: true,
|
||||
horizontalBars: true,
|
||||
axisX: {
|
||||
labelInterpolationFnc: Chartist.noop
|
||||
},
|
||||
axisY: {
|
||||
offset: 60
|
||||
}
|
||||
}],
|
||||
// Options override for media > 800px
|
||||
['screen and (min-width: 800px)', {
|
||||
stackBars: false,
|
||||
seriesBarDistance: 10
|
||||
}],
|
||||
// Options override for media > 1000px
|
||||
['screen and (min-width: 1000px)', {
|
||||
reverseData: false,
|
||||
horizontalBars: false,
|
||||
seriesBarDistance: 15
|
||||
}]
|
||||
]);
|
||||
|
||||
|
||||
|
||||
|
||||
//Distributed series
|
||||
|
||||
new Chartist.Bar('#distributed-series', {
|
||||
labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
|
||||
series: [20, 60, 120, 200, 180, 20, 10]
|
||||
}, {
|
||||
distributeSeries: true,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Label placement
|
||||
|
||||
new Chartist.Bar('#label-placement-chart', {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3],
|
||||
[3, 2, 9, 5, 4, 6, 4]
|
||||
]
|
||||
}, {
|
||||
axisX: {
|
||||
// On the x-axis start means top and end means bottom
|
||||
position: 'start'
|
||||
},
|
||||
axisY: {
|
||||
// On the y-axis start means left and end means right
|
||||
position: 'end'
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Animating a Donut with Svg.animate
|
||||
|
||||
var chart = new Chartist.Pie('#animating-donut', {
|
||||
series: [10, 20, 50, 20, 5, 50, 15],
|
||||
labels: [1, 2, 3, 4, 5, 6, 7]
|
||||
}, {
|
||||
donut: true,
|
||||
showLabel: false,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
chart.on('draw', function(data) {
|
||||
if(data.type === 'slice') {
|
||||
// Get the total path length in order to use for dash array animation
|
||||
var pathLength = data.element._node.getTotalLength();
|
||||
|
||||
// Set a dasharray that matches the path length as prerequisite to animate dashoffset
|
||||
data.element.attr({
|
||||
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
|
||||
});
|
||||
|
||||
// Create animation definition while also assigning an ID to the animation for later sync usage
|
||||
var animationDefinition = {
|
||||
'stroke-dashoffset': {
|
||||
id: 'anim' + data.index,
|
||||
dur: 1000,
|
||||
from: -pathLength + 'px',
|
||||
to: '0px',
|
||||
easing: Chartist.Svg.Easing.easeOutQuint,
|
||||
// We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
|
||||
fill: 'freeze'
|
||||
}
|
||||
};
|
||||
|
||||
// If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
|
||||
if(data.index !== 0) {
|
||||
animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
|
||||
}
|
||||
|
||||
// We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
|
||||
data.element.attr({
|
||||
'stroke-dashoffset': -pathLength + 'px'
|
||||
});
|
||||
|
||||
// We can't use guided mode as the animations need to rely on setting begin manually
|
||||
// See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
|
||||
data.element.animate(animationDefinition, false);
|
||||
}
|
||||
});
|
||||
|
||||
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
|
||||
chart.on('created', function() {
|
||||
if(window.__anim21278907124) {
|
||||
clearTimeout(window.__anim21278907124);
|
||||
window.__anim21278907124 = null;
|
||||
}
|
||||
window.__anim21278907124 = setTimeout(chart.update.bind(chart), 10000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Simple pie chart
|
||||
|
||||
var data = {
|
||||
series: [5, 3, 4]
|
||||
};
|
||||
|
||||
var sum = function(a, b) { return a + b };
|
||||
|
||||
new Chartist.Pie('#simple-pie', data, {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return Math.round(value / data.series.reduce(sum) * 100) + '%';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Pie chart with custom labels
|
||||
|
||||
var data = {
|
||||
labels: ['Bananas', 'Apples', 'Grapes'],
|
||||
series: [20, 15, 40]
|
||||
};
|
||||
|
||||
var options = {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return value[0]
|
||||
}
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (min-width: 640px)', {
|
||||
chartPadding: 30,
|
||||
labelOffset: 100,
|
||||
labelDirection: 'explode',
|
||||
labelInterpolationFnc: function(value) {
|
||||
return value;
|
||||
}
|
||||
}],
|
||||
['screen and (min-width: 1024px)', {
|
||||
labelOffset: 80,
|
||||
chartPadding: 20
|
||||
}]
|
||||
];
|
||||
|
||||
new Chartist.Pie('#pie-chart', data, options, responsiveOptions);
|
||||
|
||||
|
||||
|
||||
//Gauge chart
|
||||
|
||||
new Chartist.Pie('#gauge-chart', {
|
||||
series: [20, 10, 30, 40]
|
||||
}, {
|
||||
donut: true,
|
||||
donutWidth: 60,
|
||||
startAngle: 270,
|
||||
total: 200,
|
||||
showLabel: false,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Different configuration for different series
|
||||
|
||||
var chart = new Chartist.Line('#different-series', {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
|
||||
// Naming the series with the series object array notation
|
||||
series: [{
|
||||
name: 'series-1',
|
||||
data: [5, 2, -4, 2, 0, -2, 5, -3]
|
||||
}, {
|
||||
name: 'series-2',
|
||||
data: [4, 3, 5, 3, 1, 3, 6, 4]
|
||||
}, {
|
||||
name: 'series-3',
|
||||
data: [2, 4, 3, 1, 4, 5, 3, 2]
|
||||
}]
|
||||
}, {
|
||||
fullWidth: true,
|
||||
// Within the series options you can use the series names
|
||||
// to specify configuration that will only be used for the
|
||||
// specific series.
|
||||
series: {
|
||||
'series-1': {
|
||||
lineSmooth: Chartist.Interpolation.step()
|
||||
},
|
||||
'series-2': {
|
||||
lineSmooth: Chartist.Interpolation.simple(),
|
||||
showArea: true
|
||||
},
|
||||
'series-3': {
|
||||
showPoint: false
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
}, [
|
||||
// You can even use responsive configuration overrides to
|
||||
// customize your series configuration even further!
|
||||
['screen and (max-width: 320px)', {
|
||||
series: {
|
||||
'series-1': {
|
||||
lineSmooth: Chartist.Interpolation.none()
|
||||
},
|
||||
'series-2': {
|
||||
lineSmooth: Chartist.Interpolation.none(),
|
||||
showArea: false
|
||||
},
|
||||
'series-3': {
|
||||
lineSmooth: Chartist.Interpolation.none(),
|
||||
showPoint: true
|
||||
}
|
||||
}
|
||||
}]
|
||||
]);
|
||||
|
||||
|
||||
|
||||
|
||||
//SVG Animations chart
|
||||
|
||||
var chart = new Chartist.Line('#svg-dot-animation', {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
series: [
|
||||
[12, 4, 2, 8, 5, 4, 6, 2, 3, 3, 4, 6],
|
||||
[4, 8, 9, 3, 7, 2, 10, 5, 8, 1, 7, 10]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showLine: false,
|
||||
axisX: {
|
||||
showLabel: false,
|
||||
offset: 0
|
||||
},
|
||||
axisY: {
|
||||
showLabel: false,
|
||||
offset: 0
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
// Let's put a sequence number aside so we can use it in the event callbacks
|
||||
var seq = 0;
|
||||
|
||||
// Once the chart is fully created we reset the sequence
|
||||
chart.on('created', function() {
|
||||
seq = 0;
|
||||
});
|
||||
|
||||
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
|
||||
chart.on('draw', function(data) {
|
||||
if(data.type === 'point') {
|
||||
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
|
||||
data.element.animate({
|
||||
opacity: {
|
||||
// The delay when we like to start the animation
|
||||
begin: seq++ * 80,
|
||||
// Duration of the animation
|
||||
dur: 500,
|
||||
// The value where the animation should start
|
||||
from: 0,
|
||||
// The value where it should end
|
||||
to: 1
|
||||
},
|
||||
x1: {
|
||||
begin: seq++ * 80,
|
||||
dur: 500,
|
||||
from: data.x - 100,
|
||||
to: data.x,
|
||||
// You can specify an easing function name or use easing functions from Chartist.Svg.Easing directly
|
||||
easing: Chartist.Svg.Easing.easeOutQuart
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
|
||||
chart.on('created', function() {
|
||||
if(window.__anim0987432598723) {
|
||||
clearTimeout(window.__anim0987432598723);
|
||||
window.__anim0987432598723 = null;
|
||||
}
|
||||
window.__anim0987432598723 = setTimeout(chart.update.bind(chart), 8000);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,262 @@
|
||||
/**
|
||||
Template Name: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
Author: CoderThemes
|
||||
Email: [email protected]
|
||||
File: Chartjs
|
||||
*/
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var ChartJs = function() {};
|
||||
|
||||
ChartJs.prototype.respChart = function(selector,type,data, options) {
|
||||
// get selector by context
|
||||
var ctx = selector.get(0).getContext("2d");
|
||||
// pointing parent container to make chart js inherit its width
|
||||
var container = $(selector).parent();
|
||||
|
||||
// enable resizing matter
|
||||
$(window).resize( generateChart );
|
||||
|
||||
// this function produce the responsive Chart JS
|
||||
function generateChart(){
|
||||
// make chart width fit with its container
|
||||
var ww = selector.attr('width', $(container).width() );
|
||||
switch(type){
|
||||
case 'Line':
|
||||
new Chart(ctx, {type: 'line', data: data, options: options});
|
||||
break;
|
||||
case 'Doughnut':
|
||||
new Chart(ctx, {type: 'doughnut', data: data, options: options});
|
||||
break;
|
||||
case 'Pie':
|
||||
new Chart(ctx, {type: 'pie', data: data, options: options});
|
||||
break;
|
||||
case 'Bar':
|
||||
new Chart(ctx, {type: 'bar', data: data, options: options});
|
||||
break;
|
||||
case 'Radar':
|
||||
new Chart(ctx, {type: 'radar', data: data, options: options});
|
||||
break;
|
||||
case 'PolarArea':
|
||||
new Chart(ctx, {data: data, type: 'polarArea', options: options});
|
||||
break;
|
||||
}
|
||||
// Initiate new chart or Redraw
|
||||
|
||||
};
|
||||
// run function - render chart at first load
|
||||
generateChart();
|
||||
},
|
||||
|
||||
//init
|
||||
ChartJs.prototype.init = function() {
|
||||
//creating lineChart
|
||||
var lineChart = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
|
||||
datasets: [{
|
||||
label: "Conversion Rate",
|
||||
fill: false,
|
||||
backgroundColor: '#4eb7eb',
|
||||
borderColor: '#4eb7eb',
|
||||
data: [44,60,-33,58,-4,57,-89,60,-33,58]
|
||||
}, {
|
||||
label: "Average Sale Value",
|
||||
fill: false,
|
||||
backgroundColor: '#e3eaef',
|
||||
borderColor: "#e3eaef",
|
||||
borderDash: [5, 5],
|
||||
data: [-68,41,86,-49,2,65,-64,86,-49,2]
|
||||
}]
|
||||
};
|
||||
|
||||
var lineOpts = {
|
||||
responsive: true,
|
||||
// title:{
|
||||
// display:true,
|
||||
// text:'Chart.js Line Chart'
|
||||
// },
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
// scaleLabel: {
|
||||
// display: true,
|
||||
// labelString: 'Month'
|
||||
// },
|
||||
gridLines: {
|
||||
color: "rgba(0,0,0,0.1)"
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: "rgba(255,255,255,0.05)",
|
||||
fontColor: '#fff'
|
||||
},
|
||||
ticks: {
|
||||
max: 100,
|
||||
min: -100,
|
||||
stepSize: 20
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
this.respChart($("#lineChart"),'Line',lineChart, lineOpts);
|
||||
|
||||
//donut chart
|
||||
var donutChart = {
|
||||
labels: [
|
||||
"Bitcoin",
|
||||
"Ethereum",
|
||||
"Litecoin",
|
||||
"Bitcoin Cash",
|
||||
"Cardano"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [80, 50, 100,121,77],
|
||||
backgroundColor: [
|
||||
"#02c0ce",
|
||||
"#4eb7eb",
|
||||
"#e3eaef",
|
||||
"#2d7bf4",
|
||||
"#98a6ad"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#02c0ce",
|
||||
"#4eb7eb",
|
||||
"#e3eaef",
|
||||
"#2d7bf4",
|
||||
"#98a6ad"
|
||||
],
|
||||
hoverBorderColor: "#fff"
|
||||
}]
|
||||
};
|
||||
this.respChart($("#doughnut"),'Doughnut',donutChart);
|
||||
|
||||
|
||||
//Pie chart
|
||||
var pieChart = {
|
||||
labels: [
|
||||
"Desktops",
|
||||
"Tablets",
|
||||
"Mobiles",
|
||||
"Mobiles",
|
||||
"Tablets"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [80, 50, 100,121,77],
|
||||
backgroundColor: [
|
||||
"#02c0ce",
|
||||
"#4eb7eb",
|
||||
"#e3eaef",
|
||||
"#2d7bf4",
|
||||
"#98a6ad"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#02c0ce",
|
||||
"#4eb7eb",
|
||||
"#e3eaef",
|
||||
"#2d7bf4",
|
||||
"#98a6ad"
|
||||
],
|
||||
hoverBorderColor: "#fff"
|
||||
}]
|
||||
};
|
||||
this.respChart($("#pie"),'Pie',pieChart);
|
||||
|
||||
|
||||
//barchart
|
||||
var barChart = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Sales Analytics",
|
||||
backgroundColor: "rgba(2, 192, 206, 0.3)",
|
||||
borderColor: "#02c0ce",
|
||||
borderWidth: 2,
|
||||
hoverBackgroundColor: "rgba(2, 192, 206, 0.7)",
|
||||
hoverBorderColor: "#02c0ce",
|
||||
data: [65, 59, 80, 81, 56, 55, 40,20]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.respChart($("#bar"),'Bar',barChart);
|
||||
|
||||
|
||||
//radar chart
|
||||
var radarChart = {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Desktops",
|
||||
backgroundColor: "rgba(179,181,198,0.2)",
|
||||
borderColor: "rgba(179,181,198,1)",
|
||||
pointBackgroundColor: "rgba(179,181,198,1)",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: "rgba(179,181,198,1)",
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "Tablets",
|
||||
backgroundColor: "rgba(255,99,132,0.2)",
|
||||
borderColor: "rgba(255,99,132,1)",
|
||||
pointBackgroundColor: "rgba(255,99,132,1)",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: "rgba(255,99,132,1)",
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.respChart($("#radar"),'Radar',radarChart);
|
||||
|
||||
//Polar area chart
|
||||
var polarChart = {
|
||||
datasets: [{
|
||||
data: [
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
18
|
||||
],
|
||||
backgroundColor: [
|
||||
"#297ef6",
|
||||
"#45bbe0",
|
||||
"#ebeff2",
|
||||
"#1ea69a"
|
||||
],
|
||||
label: 'My dataset', // for legend
|
||||
hoverBorderColor: "#fff"
|
||||
}],
|
||||
labels: [
|
||||
"Series 1",
|
||||
"Series 2",
|
||||
"Series 3",
|
||||
"Series 4"
|
||||
]
|
||||
};
|
||||
this.respChart($("#polarArea"),'PolarArea',polarChart);
|
||||
},
|
||||
$.ChartJs = new ChartJs, $.ChartJs.Constructor = ChartJs
|
||||
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.ChartJs.init()
|
||||
}(window.jQuery);
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Component: Sparkline Chart
|
||||
*
|
||||
*/
|
||||
$( document ).ready(function() {
|
||||
|
||||
var DrawSparkline = function() {
|
||||
$('#sparkline1').sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '165',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.3)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor:false,
|
||||
minSpotColor: false,
|
||||
spotColor:false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#sparkline1').sparkline([25, 23, 26, 24, 25, 32, 30, 24, 19], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '165',
|
||||
chartRangeMax: 40,
|
||||
lineColor: '#f1556c',
|
||||
fillColor: 'rgba(229, 43, 76, 0.3)',
|
||||
composite: true,
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor:false,
|
||||
minSpotColor: false,
|
||||
spotColor:false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#sparkline2').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
|
||||
type: 'bar',
|
||||
height: '165',
|
||||
barWidth: '10',
|
||||
barSpacing: '3',
|
||||
barColor: '#02c0ce'
|
||||
});
|
||||
|
||||
$('#sparkline3').sparkline([20, 40, 30, 10], {
|
||||
type: 'pie',
|
||||
width: '165',
|
||||
height: '165',
|
||||
sliceColors: ['#02c0ce','#2d7bf4','#e3eaef','#f1556c']
|
||||
});
|
||||
|
||||
$('#sparkline4').sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '165',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#2d7bf4',
|
||||
fillColor: 'transparent',
|
||||
lineWidth: 2,
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor:false,
|
||||
minSpotColor: false,
|
||||
spotColor:false
|
||||
});
|
||||
|
||||
$('#sparkline4').sparkline([25, 23, 26, 24, 25, 32, 30, 24, 19], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '165',
|
||||
chartRangeMax: 40,
|
||||
lineColor: '#4eb7eb',
|
||||
fillColor: 'transparent',
|
||||
composite: true,
|
||||
lineWidth: 2,
|
||||
maxSpotColor:false,
|
||||
minSpotColor: false,
|
||||
spotColor:false,
|
||||
highlightLineColor: 'rgba(0,0,0,1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,1)'
|
||||
});
|
||||
|
||||
$('#sparkline6').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '165',
|
||||
lineColor: '#e3eaef',
|
||||
lineWidth: 2,
|
||||
fillColor: 'rgba(227,234,239,0.3)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)'
|
||||
});
|
||||
|
||||
$('#sparkline6').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
|
||||
type: 'bar',
|
||||
height: '165',
|
||||
barWidth: '10',
|
||||
barSpacing: '5',
|
||||
composite: true,
|
||||
barColor: '#f36270'
|
||||
});
|
||||
|
||||
$("#sparkline7").sparkline([4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 5, 6, 3, 4, 5, 8, 7, 6, 9, 3, 2, 4, 1, 5, 6, 4, 3, 7], {
|
||||
type: 'discrete',
|
||||
width: '280',
|
||||
height: '165',
|
||||
lineColor: '#36404c'
|
||||
});
|
||||
|
||||
$('#sparkline8').sparkline([10,12,12,9,7], {
|
||||
type: 'bullet',
|
||||
width: '280',
|
||||
height: '80',
|
||||
targetColor: '#64c5b1',
|
||||
performanceColor: '#5553ce'
|
||||
});
|
||||
$('#sparkline9').sparkline([4,27,34,52,54,59,61,68,78,82,85,87,91,93,100], {
|
||||
type: 'box',
|
||||
width: '280',
|
||||
height: '80',
|
||||
boxLineColor: '#5553ce',
|
||||
boxFillColor: '#f1f1f1',
|
||||
whiskerColor: '#32c861',
|
||||
outlierLineColor: '#c17d7d',
|
||||
medianColor: '#22e535',
|
||||
lineWidth: 2,
|
||||
targetColor: '#316b1d'
|
||||
});
|
||||
$('#sparkline10').sparkline([1,1,0,1,-1,-1,1,-1,0,0,1,1], {
|
||||
height: '80',
|
||||
width: '100%',
|
||||
type: 'tristate',
|
||||
posBarColor: '#0acf97',
|
||||
negBarColor: '#e3eaef',
|
||||
zeroBarColor: '#ff679b',
|
||||
barWidth: 8,
|
||||
barSpacing: 3,
|
||||
zeroAxis: false
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
DrawMouseSpeed = function () {
|
||||
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;
|
||||
$('#sparkline5').sparkline(mpoints, {
|
||||
tooltipSuffix: ' pixels per second',
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '165',
|
||||
chartRangeMax: 77,
|
||||
maxSpotColor:false,
|
||||
minSpotColor: false,
|
||||
spotColor:false,
|
||||
lineWidth: 1,
|
||||
lineColor: '#313a46',
|
||||
fillColor: 'rgba(49, 58, 70, 0.3)',
|
||||
highlightLineColor: 'rgba(24,147,126,.1)',
|
||||
highlightSpotColor: 'rgba(24,147,126,.2)'
|
||||
});
|
||||
}
|
||||
lastmousetime = timenow;
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
}
|
||||
// We could use setInterval instead, but I prefer to do it this way
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
};
|
||||
|
||||
DrawSparkline();
|
||||
DrawMouseSpeed();
|
||||
|
||||
var resizeChart;
|
||||
|
||||
$(window).resize(function(e) {
|
||||
clearTimeout(resizeChart);
|
||||
resizeChart = setTimeout(function() {
|
||||
DrawSparkline();
|
||||
DrawMouseSpeed();
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Component: Companies
|
||||
*
|
||||
*/
|
||||
$( document ).ready(function() {
|
||||
|
||||
var DrawSparkline = function() {
|
||||
$('#company-1').sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '80',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.1)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor: false,
|
||||
minSpotColor: false,
|
||||
spotColor: false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#company-2').sparkline([0, 25, 48, 32, 36, 20, 85, 56, 36], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '80',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.1)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor: false,
|
||||
minSpotColor: false,
|
||||
spotColor: false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#company-3').sparkline([0, 36, 85, 25, 24, 56, 24, 28, 32], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '80',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.1)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor: false,
|
||||
minSpotColor: false,
|
||||
spotColor: false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#company-4').sparkline([21, 28, 30, 35, 44, 82, 30, 37, 40], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '80',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.1)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor: false,
|
||||
minSpotColor: false,
|
||||
spotColor: false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#company-5').sparkline([32, 28, 35, 89, 10, 15, 25, 37, 45], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '80',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.1)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor: false,
|
||||
minSpotColor: false,
|
||||
spotColor: false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#company-6').sparkline([10, 25, 35, 35, 65, 75, 56, 37, 40], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '80',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.1)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor: false,
|
||||
minSpotColor: false,
|
||||
spotColor: false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#company-7').sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '80',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.1)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor: false,
|
||||
minSpotColor: false,
|
||||
spotColor: false,
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
$('#company-8').sparkline([8, 19, 31, 35, 44, 50, 32, 37, 40], {
|
||||
type: 'line',
|
||||
width: "100%",
|
||||
height: '80',
|
||||
chartRangeMax: 50,
|
||||
lineColor: '#02c0ce',
|
||||
fillColor: 'rgba(2, 192, 206, 0.1)',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
maxSpotColor: false,
|
||||
minSpotColor: false,
|
||||
spotColor: false,
|
||||
lineWidth: 1
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
DrawSparkline();
|
||||
|
||||
var resizeChart;
|
||||
|
||||
$(window).resize(function(e) {
|
||||
clearTimeout(resizeChart);
|
||||
resizeChart = setTimeout(function() {
|
||||
DrawSparkline();
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,282 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Module/App: Flot-Chart
|
||||
*/
|
||||
|
||||
! function($) {
|
||||
"use strict";
|
||||
|
||||
var FlotChart = function() {
|
||||
this.$body = $("body")
|
||||
this.$realData = []
|
||||
};
|
||||
|
||||
//creates plot graph
|
||||
FlotChart.prototype.createPlotGraph = function(selector, data1, data2, data3, labels, colors, borderColor, bgColor) {
|
||||
//shows tooltip
|
||||
function showTooltip(x, y, contents) {
|
||||
$('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css({
|
||||
position : 'absolute',
|
||||
top : y + 5,
|
||||
left : x + 5
|
||||
}).appendTo("body").fadeIn(200);
|
||||
}
|
||||
|
||||
|
||||
$.plot($(selector), [{
|
||||
data : data1,
|
||||
label : labels[0],
|
||||
color : colors[0]
|
||||
}, {
|
||||
data : data2,
|
||||
label : labels[1],
|
||||
color : colors[1]
|
||||
},
|
||||
{
|
||||
data : data3,
|
||||
label : labels[2],
|
||||
color : colors[2]
|
||||
}], {
|
||||
series : {
|
||||
lines : {
|
||||
show : true,
|
||||
fill : true,
|
||||
lineWidth : 2,
|
||||
fillColor : {
|
||||
colors : [{
|
||||
opacity : 0.5
|
||||
}, {
|
||||
opacity : 0.5
|
||||
}, {
|
||||
opacity: 0.8
|
||||
}]
|
||||
}
|
||||
},
|
||||
points : {
|
||||
show : true
|
||||
},
|
||||
shadowSize : 0
|
||||
},
|
||||
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true,
|
||||
borderColor : borderColor,
|
||||
tickColor : "#f9f9f9",
|
||||
borderWidth : 1,
|
||||
labelMargin : 30,
|
||||
backgroundColor : bgColor
|
||||
},
|
||||
legend : {
|
||||
position: "ne",
|
||||
margin : [0, -32],
|
||||
noColumns : 0,
|
||||
labelBoxBorderColor : null,
|
||||
labelFormatter : function(label, series) {
|
||||
// just add some space to labes
|
||||
return '' + label + ' ';
|
||||
},
|
||||
width : 30,
|
||||
height : 2
|
||||
},
|
||||
yaxis : {
|
||||
axisLabel: "Daily Visits",
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
xaxis : {
|
||||
axisLabel: "Last Days",
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
content : '%s: Value of %x is %y',
|
||||
shifts : {
|
||||
x : -60,
|
||||
y : 25
|
||||
},
|
||||
defaultTheme : false
|
||||
},
|
||||
splines: {
|
||||
show: true,
|
||||
tension: 0.1, // float between 0 and 1, defaults to 0.5
|
||||
lineWidth: 1 // number, defaults to 2
|
||||
}
|
||||
});
|
||||
},
|
||||
//end plot graph
|
||||
|
||||
//creates Donut Chart
|
||||
FlotChart.prototype.createDonutGraph = function(selector, labels, datas, colors) {
|
||||
var data = [{
|
||||
label : labels[0],
|
||||
data : datas[0]
|
||||
}, {
|
||||
label : labels[1],
|
||||
data : datas[1]
|
||||
}, {
|
||||
label : labels[2],
|
||||
data : datas[2]
|
||||
},{
|
||||
label : labels[3],
|
||||
data : datas[3]
|
||||
}, {
|
||||
label : labels[4],
|
||||
data : datas[4]
|
||||
}];
|
||||
var options = {
|
||||
series : {
|
||||
pie : {
|
||||
show : true,
|
||||
innerRadius : 0.7
|
||||
}
|
||||
},
|
||||
legend : {
|
||||
position: "sw",
|
||||
margin : [0, 0],
|
||||
noColumns : 2,
|
||||
show : false,
|
||||
labelFormatter : function(label, series) {
|
||||
return '<div style="font-size:14px;"> ' + label + '</div>'
|
||||
},
|
||||
labelBoxBorderColor : null,
|
||||
width : 20
|
||||
},
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true
|
||||
},
|
||||
colors : colors,
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
content : "%s, %p.0%"
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($(selector), data, options);
|
||||
},
|
||||
//creates Combine Chart
|
||||
FlotChart.prototype.createCombineGraph = function(selector, ticks, labels, datas) {
|
||||
|
||||
var data = [{
|
||||
label : labels[0],
|
||||
data : datas[0],
|
||||
lines : {
|
||||
show : true,
|
||||
fill : true
|
||||
},
|
||||
points : {
|
||||
show : true
|
||||
}
|
||||
}, {
|
||||
label : labels[1],
|
||||
data : datas[1],
|
||||
lines : {
|
||||
show : true
|
||||
},
|
||||
points : {
|
||||
show : true
|
||||
}
|
||||
}, {
|
||||
label : labels[2],
|
||||
data : datas[2],
|
||||
bars : {
|
||||
show : true
|
||||
}
|
||||
}];
|
||||
var options = {
|
||||
series : {
|
||||
shadowSize : 0
|
||||
},
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true,
|
||||
tickColor : "#f9f9f9",
|
||||
borderWidth : 1,
|
||||
borderColor : "#eeeeee"
|
||||
},
|
||||
colors : ['#e3eaef','#f1556c','#02c0ce'],
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
defaultTheme : false
|
||||
},
|
||||
legend : {
|
||||
position : "ne",
|
||||
margin : [0, -32],
|
||||
noColumns : 0,
|
||||
labelBoxBorderColor : null,
|
||||
labelFormatter : function(label, series) {
|
||||
// just add some space to labes
|
||||
return '' + label + ' ';
|
||||
},
|
||||
width : 30,
|
||||
height : 2
|
||||
},
|
||||
yaxis : {
|
||||
axisLabel: "Point Value (1000)",
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
xaxis : {
|
||||
axisLabel: "Daily Hours",
|
||||
ticks: ticks,
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($(selector), data, options);
|
||||
},
|
||||
|
||||
//initializing various charts and components
|
||||
FlotChart.prototype.init = function() {
|
||||
//plot graph data
|
||||
var uploads = [[0, 13], [1, 13], [2, 14], [3, 62], [4, 13], [5, 10], [6, 56],[7, 13], [8, 12], [9, 20], [10, 48], [11, 16], [12, 14]];
|
||||
var downloads = [[0, 8], [1, 10], [2, 12], [3, 14], [4, 36], [5, 7], [6, 9],[7, 10], [8, 41], [9, 17], [10, 15], [11, 13], [12, 11]];
|
||||
var downloads1 = [[0, 3], [1, 22], [2, 8], [3, 10], [4, 7], [5, 3], [6, 5],[7, 7], [8, 6], [9, 14], [10, 35], [11, 10], [12, 8]];
|
||||
var plabels = ["Bitcoin", "Ethereum", "Litecoin"];
|
||||
var pcolors = ['#02c0ce','#2d7bf4','#f1556c'];
|
||||
var borderColor = '#f5f5f5';
|
||||
var bgColor = '#fff';
|
||||
this.createPlotGraph("#website-stats", uploads, downloads,downloads1, plabels, pcolors, borderColor, bgColor);
|
||||
|
||||
//Combine graph data
|
||||
var data24Hours = [[0, 201], [1, 520], [2, 337], [3, 261], [4, 157], [5, 95], [6, 200], [7, 250], [8, 320], [9, 500], [10, 152], [11, 214], [12, 364], [13, 449], [14, 558], [15, 282], [16, 379], [17, 429], [18, 518], [19, 470], [20, 330], [21, 245], [22, 358], [23, 74]];
|
||||
var data48Hours = [[0, 311], [1, 630], [2, 447], [3, 371], [4, 267], [5, 205], [6, 310], [7, 360], [8, 430], [9, 610], [10, 262], [11, 324], [12, 474], [13, 559], [14, 668], [15, 392], [16, 489], [17, 539], [18, 628], [19, 580], [20, 440], [21, 355], [22, 468], [23, 184]];
|
||||
var dataDifference = [[23, 727], [22, 128], [21, 110], [20, 92], [19, 172], [18, 63], [17, 150], [16, 592], [15, 12], [14, 246], [13, 52], [12, 149], [11, 123], [10, 2], [9, 325], [8, 10], [7, 15], [6, 89], [5, 65], [4, 77], [3, 600], [2, 200], [1, 385], [0, 200]];
|
||||
var ticks = [[0, "22h"], [1, ""], [2, "00h"], [3, ""], [4, "02h"], [5, ""], [6, "04h"], [7, ""], [8, "06h"], [9, ""], [10, "08h"], [11, ""], [12, "10h"], [13, ""], [14, "12h"], [15, ""], [16, "14h"], [17, ""], [18, "16h"], [19, ""], [20, "18h"], [21, ""], [22, "20h"], [23, ""]];
|
||||
var combinelabels = ["Last 24 Hours", "Last 48 Hours", "Difference"];
|
||||
var combinedatas = [data24Hours, data48Hours, dataDifference];
|
||||
|
||||
this.createCombineGraph("#combine-chart #combine-chart-container", ticks, combinelabels, combinedatas);
|
||||
|
||||
|
||||
//Donut pie graph data
|
||||
var donutlabels = ["Bitcoin", "Ethereum", "Litecoin", "Bitcoin Cash", "Cardano"];
|
||||
var donutdatas = [48, 30, 15, 32, 26];
|
||||
var donutcolors = ['#02c0ce','#2d7bf4','#e3eaef','#f1556c',"#f9bc0b"];
|
||||
this.createDonutGraph("#donut-chart #donut-chart-container", donutlabels, donutdatas, donutcolors);
|
||||
|
||||
},
|
||||
|
||||
//init flotchart
|
||||
$.FlotChart = new FlotChart, $.FlotChart.Constructor =
|
||||
FlotChart
|
||||
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing flotchart
|
||||
function($) {
|
||||
"use strict";
|
||||
$.FlotChart.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,712 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Module/App: Flot-Chart
|
||||
*/
|
||||
|
||||
! function($) {
|
||||
"use strict";
|
||||
|
||||
var FlotChart = function() {
|
||||
this.$body = $("body")
|
||||
this.$realData = []
|
||||
};
|
||||
|
||||
//creates plot graph
|
||||
FlotChart.prototype.createPlotGraph = function(selector, data1, data2, data3, labels, colors, borderColor, bgColor) {
|
||||
//shows tooltip
|
||||
function showTooltip(x, y, contents) {
|
||||
$('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css({
|
||||
position : 'absolute',
|
||||
top : y + 5,
|
||||
left : x + 5
|
||||
}).appendTo("body").fadeIn(200);
|
||||
}
|
||||
|
||||
|
||||
$.plot($(selector), [{
|
||||
data : data1,
|
||||
label : labels[0],
|
||||
color : colors[0]
|
||||
}, {
|
||||
data : data2,
|
||||
label : labels[1],
|
||||
color : colors[1]
|
||||
},
|
||||
{
|
||||
data : data3,
|
||||
label : labels[2],
|
||||
color : colors[2]
|
||||
}], {
|
||||
series : {
|
||||
lines : {
|
||||
show : true,
|
||||
fill : true,
|
||||
lineWidth : 2,
|
||||
fillColor : {
|
||||
colors : [{
|
||||
opacity : 0.5
|
||||
}, {
|
||||
opacity : 0.5
|
||||
}, {
|
||||
opacity: 0.8
|
||||
}]
|
||||
}
|
||||
},
|
||||
points : {
|
||||
show : true
|
||||
},
|
||||
shadowSize : 0
|
||||
},
|
||||
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true,
|
||||
borderColor : borderColor,
|
||||
tickColor : "#f9f9f9",
|
||||
borderWidth : 1,
|
||||
labelMargin : 30,
|
||||
backgroundColor : bgColor
|
||||
},
|
||||
legend : {
|
||||
position: "ne",
|
||||
margin : [0, -32],
|
||||
noColumns : 0,
|
||||
labelBoxBorderColor : null,
|
||||
labelFormatter : function(label, series) {
|
||||
// just add some space to labes
|
||||
return '' + label + ' ';
|
||||
},
|
||||
width : 30,
|
||||
height : 2
|
||||
},
|
||||
yaxis : {
|
||||
axisLabel: "Daily Visits",
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
xaxis : {
|
||||
axisLabel: "Last Days",
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
content : '%s: Value of %x is %y',
|
||||
shifts : {
|
||||
x : -60,
|
||||
y : 25
|
||||
},
|
||||
defaultTheme : false
|
||||
},
|
||||
splines: {
|
||||
show: true,
|
||||
tension: 0.1, // float between 0 and 1, defaults to 0.5
|
||||
lineWidth: 1 // number, defaults to 2
|
||||
}
|
||||
});
|
||||
},
|
||||
//end plot graph
|
||||
|
||||
//creates plot Dot graph
|
||||
FlotChart.prototype.createPlotDotGraph = function(selector, data1, data2, labelsDot, colorsDot, borderColorDot, bgColorDot) {
|
||||
//shows tooltip
|
||||
function showTooltip(x, y, contents) {
|
||||
$('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css({
|
||||
position : 'absolute',
|
||||
top : y + 5,
|
||||
left : x + 5
|
||||
}).appendTo("body").fadeIn(200);
|
||||
}
|
||||
|
||||
|
||||
$.plot($(selector), [{
|
||||
data : data1,
|
||||
label : labelsDot[0],
|
||||
color : colorsDot[0]
|
||||
}, {
|
||||
data : data2,
|
||||
label : labelsDot[1],
|
||||
color : colorsDot[1]
|
||||
}],
|
||||
{
|
||||
series : {
|
||||
lines : {
|
||||
show : true,
|
||||
fill : false,
|
||||
lineWidth : 3,
|
||||
fillColor : {
|
||||
colors : [{
|
||||
opacity : 0.3
|
||||
}, {
|
||||
opacity : 0.3
|
||||
}]
|
||||
}
|
||||
},
|
||||
curvedLines: {
|
||||
apply: true,
|
||||
active: true,
|
||||
monotonicFit: true
|
||||
},
|
||||
splines: {
|
||||
show: true,
|
||||
tension: 0.4,
|
||||
lineWidth: 5,
|
||||
fill: 0.4
|
||||
}
|
||||
},
|
||||
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true,
|
||||
borderColor : borderColorDot,
|
||||
tickColor : "#f9f9f9",
|
||||
borderWidth : 1,
|
||||
labelMargin : 10,
|
||||
backgroundColor : bgColorDot
|
||||
},
|
||||
legend : {
|
||||
position : "ne",
|
||||
margin : [0, -32],
|
||||
noColumns : 0,
|
||||
labelBoxBorderColor : null,
|
||||
labelFormatter : function(label, series) {
|
||||
// just add some space to labes
|
||||
return '' + label + ' ';
|
||||
},
|
||||
width : 30,
|
||||
height : 2
|
||||
},
|
||||
yaxis : {
|
||||
axisLabel: "Gold Price(USD)",
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
xaxis : {
|
||||
axisLabel: "Numbers",
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
tooltip : false,
|
||||
});
|
||||
},
|
||||
//end plot Dot graph
|
||||
|
||||
//creates Pie Chart
|
||||
FlotChart.prototype.createPieGraph = function(selector, labels, datas, colors) {
|
||||
var data = [{
|
||||
label : labels[0],
|
||||
data : datas[0]
|
||||
}, {
|
||||
label: labels[1],
|
||||
data: datas[1]
|
||||
}, {
|
||||
label: labels[2],
|
||||
data: datas[2]
|
||||
}, {
|
||||
label: labels[3],
|
||||
data: datas[3]
|
||||
}, {
|
||||
label: labels[4],
|
||||
data: datas[4]
|
||||
}];
|
||||
var options = {
|
||||
series : {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
background: {
|
||||
opacity: 0.2
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend : {
|
||||
show : false
|
||||
},
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true
|
||||
},
|
||||
colors : colors,
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
content : "%s, %p.0%"
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($(selector), data, options);
|
||||
},
|
||||
|
||||
//returns some random data
|
||||
FlotChart.prototype.randomData = function() {
|
||||
var totalPoints = 300;
|
||||
if (this.$realData.length > 0)
|
||||
this.$realData = this.$realData.slice(1);
|
||||
|
||||
// Do a random walk
|
||||
while (this.$realData.length < totalPoints) {
|
||||
|
||||
var prev = this.$realData.length > 0 ? this.$realData[this.$realData.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
|
||||
this.$realData.push(y);
|
||||
}
|
||||
|
||||
// Zip the generated y values with the x values
|
||||
var res = [];
|
||||
for (var i = 0; i < this.$realData.length; ++i) {
|
||||
res.push([i, this.$realData[i]])
|
||||
}
|
||||
|
||||
return res;
|
||||
}, FlotChart.prototype.createRealTimeGraph = function(selector, data, colors) {
|
||||
var plot = $.plot(selector, [data], {
|
||||
colors : colors,
|
||||
series : {
|
||||
grow : {
|
||||
active : false
|
||||
}, //disable auto grow
|
||||
shadowSize : 0, // drawing is faster without shadows
|
||||
lines : {
|
||||
show : true,
|
||||
fill : true,
|
||||
lineWidth : 2,
|
||||
steps : false
|
||||
}
|
||||
},
|
||||
grid : {
|
||||
show : true,
|
||||
aboveData : false,
|
||||
color : '#dcdcdc',
|
||||
labelMargin : 15,
|
||||
axisMargin : 0,
|
||||
borderWidth : 0,
|
||||
borderColor : null,
|
||||
minBorderMargin : 5,
|
||||
clickable : true,
|
||||
hoverable : true,
|
||||
autoHighlight : false,
|
||||
mouseActiveRadius : 20
|
||||
},
|
||||
tooltip : true, //activate tooltip
|
||||
tooltipOpts : {
|
||||
content : "Value is : %y.0" + "%",
|
||||
shifts : {
|
||||
x : -30,
|
||||
y : -50
|
||||
}
|
||||
},
|
||||
yaxis : {
|
||||
axisLabel: "Response Time (ms)",
|
||||
min : 0,
|
||||
max : 100,
|
||||
tickColor : '#f5f5f5',
|
||||
color : 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
xaxis : {
|
||||
axisLabel: "Point Value (1000)",
|
||||
show : true,
|
||||
tickColor : '#f5f5f5'
|
||||
}
|
||||
});
|
||||
|
||||
return plot;
|
||||
},
|
||||
//creates Donut Chart
|
||||
FlotChart.prototype.createDonutGraph = function(selector, labels, datas, colors) {
|
||||
var data = [{
|
||||
label : labels[0],
|
||||
data : datas[0]
|
||||
}, {
|
||||
label : labels[1],
|
||||
data : datas[1]
|
||||
}, {
|
||||
label : labels[2],
|
||||
data : datas[2]
|
||||
},{
|
||||
label : labels[3],
|
||||
data : datas[3]
|
||||
}, {
|
||||
label : labels[4],
|
||||
data : datas[4]
|
||||
}];
|
||||
var options = {
|
||||
series : {
|
||||
pie : {
|
||||
show : true,
|
||||
innerRadius : 0.7
|
||||
}
|
||||
},
|
||||
legend : {
|
||||
show : true,
|
||||
labelFormatter : function(label, series) {
|
||||
return '<div style="font-size:14px;"> ' + label + '</div>'
|
||||
},
|
||||
labelBoxBorderColor : null,
|
||||
margin : 50,
|
||||
width : 20
|
||||
},
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true
|
||||
},
|
||||
colors : colors,
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
content : "%s, %p.0%"
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($(selector), data, options);
|
||||
},
|
||||
//creates Bar Chart
|
||||
FlotChart.prototype.createStackBarGraph = function(selector, ticks, colors, data) {
|
||||
var options = {
|
||||
bars: {
|
||||
show: true,
|
||||
barWidth: 0.2,
|
||||
fill: 1
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
aboveData: false,
|
||||
labelMargin: 5,
|
||||
axisMargin: 0,
|
||||
borderWidth: 1,
|
||||
minBorderMargin: 5,
|
||||
clickable: true,
|
||||
hoverable: true,
|
||||
autoHighlight: false,
|
||||
mouseActiveRadius: 20,
|
||||
borderColor: '#f5f5f5'
|
||||
},
|
||||
series: {
|
||||
stack: 0
|
||||
},
|
||||
legend: {
|
||||
position: "ne",
|
||||
margin: [0, -32],
|
||||
noColumns: 0,
|
||||
labelBoxBorderColor: null,
|
||||
labelFormatter: function (label, series) {
|
||||
// just add some space to labes
|
||||
return '' + label + ' ';
|
||||
},
|
||||
width: 30,
|
||||
height: 2
|
||||
},
|
||||
yaxis: ticks.y,
|
||||
xaxis: ticks.x,
|
||||
colors: colors,
|
||||
tooltip: true, //activate tooltip
|
||||
tooltipOpts: {
|
||||
content: "%s : %y.0",
|
||||
shifts: {
|
||||
x: -30,
|
||||
y: -50
|
||||
}
|
||||
}
|
||||
};
|
||||
$.plot($(selector), data, options);
|
||||
},
|
||||
//creates Line Chart
|
||||
FlotChart.prototype.createLineGraph = function(selector, ticks, colors, data) {
|
||||
var options = {
|
||||
series: {
|
||||
lines: {
|
||||
show: true
|
||||
},
|
||||
points: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend : {
|
||||
position : "ne",
|
||||
margin : [0, -32],
|
||||
noColumns : 0,
|
||||
labelBoxBorderColor : null,
|
||||
labelFormatter : function(label, series) {
|
||||
// just add some space to labes
|
||||
return '' + label + ' ';
|
||||
},
|
||||
width : 30,
|
||||
height : 2
|
||||
},
|
||||
yaxis: ticks.y,
|
||||
xaxis: ticks.x,
|
||||
colors: colors,
|
||||
grid: {
|
||||
hoverable: true,
|
||||
borderColor: '#f5f5f5',
|
||||
borderWidth: 1,
|
||||
backgroundColor: '#fff'
|
||||
},
|
||||
tooltip: true, //activate tooltip
|
||||
tooltipOpts: {
|
||||
content: "%s : %y.0",
|
||||
shifts: {
|
||||
x: -30,
|
||||
y: -50
|
||||
}
|
||||
}
|
||||
};
|
||||
return $.plot($(selector), data, options);
|
||||
},
|
||||
//creates Combine Chart
|
||||
FlotChart.prototype.createCombineGraph = function(selector, ticks, labels, datas) {
|
||||
|
||||
var data = [{
|
||||
label : labels[0],
|
||||
data : datas[0],
|
||||
lines : {
|
||||
show : true,
|
||||
fill : true
|
||||
},
|
||||
points : {
|
||||
show : true
|
||||
}
|
||||
}, {
|
||||
label : labels[1],
|
||||
data : datas[1],
|
||||
lines : {
|
||||
show : true
|
||||
},
|
||||
points : {
|
||||
show : true
|
||||
}
|
||||
}, {
|
||||
label : labels[2],
|
||||
data : datas[2],
|
||||
bars : {
|
||||
show : true
|
||||
}
|
||||
}];
|
||||
var options = {
|
||||
series : {
|
||||
shadowSize : 0
|
||||
},
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true,
|
||||
tickColor : "#f9f9f9",
|
||||
borderWidth : 1,
|
||||
borderColor : "#eeeeee"
|
||||
},
|
||||
colors : ['#e3eaef','#f1556c','#02c0ce'],
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
defaultTheme : false
|
||||
},
|
||||
legend : {
|
||||
position : "ne",
|
||||
margin : [0, -32],
|
||||
noColumns : 0,
|
||||
labelBoxBorderColor : null,
|
||||
labelFormatter : function(label, series) {
|
||||
// just add some space to labes
|
||||
return '' + label + ' ';
|
||||
},
|
||||
width : 30,
|
||||
height : 2
|
||||
},
|
||||
yaxis : {
|
||||
axisLabel: "Point Value (1000)",
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
xaxis : {
|
||||
axisLabel: "Daily Hours",
|
||||
ticks: ticks,
|
||||
tickColor : '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($(selector), data, options);
|
||||
},
|
||||
|
||||
//initializing various charts and components
|
||||
FlotChart.prototype.init = function() {
|
||||
//plot graph data
|
||||
var uploads = [[0, 13], [1, 13], [2, 14], [3, 62], [4, 13], [5, 10], [6, 56],[7, 13], [8, 12], [9, 20], [10, 48], [11, 16], [12, 14]];
|
||||
var downloads = [[0, 8], [1, 10], [2, 12], [3, 14], [4, 36], [5, 7], [6, 9],[7, 10], [8, 41], [9, 17], [10, 15], [11, 13], [12, 11]];
|
||||
var downloads1 = [[0, 3], [1, 22], [2, 8], [3, 10], [4, 7], [5, 3], [6, 5],[7, 7], [8, 6], [9, 14], [10, 35], [11, 10], [12, 8]];
|
||||
var plabels = ["Bitcoin", "Ethereum", "Litecoin"];
|
||||
var pcolors = ['#02c0ce','#2d7bf4','#f1556c'];
|
||||
var borderColor = '#f5f5f5';
|
||||
var bgColor = '#fff';
|
||||
this.createPlotGraph("#website-stats", uploads, downloads,downloads1, plabels, pcolors, borderColor, bgColor);
|
||||
|
||||
//plot graph Dot data
|
||||
var uploadsDot = [[0, 2], [1, 4], [2, 7], [3, 9], [4, 6], [5, 3], [6, 10],[7, 8], [8, 5], [9, 14], [10, 10], [11, 10], [12, 8]];
|
||||
var downloadsDot = [[0, 1], [1, 3], [2, 6], [3, 7], [4, 4], [5, 2], [6, 8],[7, 6], [8, 4], [9, 10], [10, 8], [11, 14], [12, 5]];
|
||||
var plabelsDot = ["Bitcoin", "Ethereum"];
|
||||
var pcolorsDot = ['#02c0ce','#e3eaef'];
|
||||
var borderColorDot = '#f5f5f5';
|
||||
var bgColorDot = '#fff';
|
||||
this.createPlotDotGraph("#website-stats1", uploadsDot, downloadsDot, plabelsDot, pcolorsDot, borderColorDot, bgColorDot);
|
||||
|
||||
//Pie graph data
|
||||
var pielabels = ["Bitcoin", "Ethereum", "Litecoin", "Bitcoin Cash", "Cardano"];
|
||||
var datas = [48, 30, 15, 32, 26];
|
||||
var colors = ['#02c0ce','#2d7bf4','#e3eaef','#f1556c',"#f9bc0b"];
|
||||
this.createPieGraph("#pie-chart #pie-chart-container", pielabels, datas, colors);
|
||||
|
||||
//real time data representation
|
||||
var plot = this.createRealTimeGraph('#flotRealTime', this.randomData(), ['#02c0ce']);
|
||||
plot.draw();
|
||||
var $this = this;
|
||||
function updatePlot() {
|
||||
plot.setData([$this.randomData()]);
|
||||
// Since the axes don't change, we don't need to call plot.setupGrid()
|
||||
plot.draw();
|
||||
setTimeout(updatePlot, $('html').hasClass('mobile-device') ? 500 : 500);
|
||||
}
|
||||
|
||||
updatePlot();
|
||||
|
||||
//Donut pie graph data
|
||||
var donutlabels = ["Bitcoin", "Ethereum", "Litecoin", "Bitcoin Cash", "Cardano"];
|
||||
var donutdatas = [48, 30, 15, 32, 26];
|
||||
var donutcolors = ['#02c0ce','#2d7bf4','#e3eaef','#f1556c',"#f9bc0b"];
|
||||
this.createDonutGraph("#donut-chart #donut-chart-container", donutlabels, donutdatas, donutcolors);
|
||||
|
||||
//Combine graph data
|
||||
var data24Hours = [[0, 201], [1, 520], [2, 337], [3, 261], [4, 157], [5, 95], [6, 200], [7, 250], [8, 320], [9, 500], [10, 152], [11, 214], [12, 364], [13, 449], [14, 558], [15, 282], [16, 379], [17, 429], [18, 518], [19, 470], [20, 330], [21, 245], [22, 358], [23, 74]];
|
||||
var data48Hours = [[0, 311], [1, 630], [2, 447], [3, 371], [4, 267], [5, 205], [6, 310], [7, 360], [8, 430], [9, 610], [10, 262], [11, 324], [12, 474], [13, 559], [14, 668], [15, 392], [16, 489], [17, 539], [18, 628], [19, 580], [20, 440], [21, 355], [22, 468], [23, 184]];
|
||||
var dataDifference = [[23, 727], [22, 128], [21, 110], [20, 92], [19, 172], [18, 63], [17, 150], [16, 592], [15, 12], [14, 246], [13, 52], [12, 149], [11, 123], [10, 2], [9, 325], [8, 10], [7, 15], [6, 89], [5, 65], [4, 77], [3, 600], [2, 200], [1, 385], [0, 200]];
|
||||
var ticks = [[0, "22h"], [1, ""], [2, "00h"], [3, ""], [4, "02h"], [5, ""], [6, "04h"], [7, ""], [8, "06h"], [9, ""], [10, "08h"], [11, ""], [12, "10h"], [13, ""], [14, "12h"], [15, ""], [16, "14h"], [17, ""], [18, "16h"], [19, ""], [20, "18h"], [21, ""], [22, "20h"], [23, ""]];
|
||||
var combinelabels = ["Last 24 Hours", "Last 48 Hours", "Difference"];
|
||||
var combinedatas = [data24Hours, data48Hours, dataDifference];
|
||||
|
||||
this.createCombineGraph("#combine-chart #combine-chart-container", ticks, combinelabels, combinedatas);
|
||||
|
||||
//bar chart = stacked
|
||||
var stack_ticks = {
|
||||
y: {
|
||||
axisLabel: "Sales Value (USD)",
|
||||
tickColor: '#f5f5f5',
|
||||
font: {
|
||||
color: '#bdbdbd'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
axisLabel: "Last 10 Days",
|
||||
tickColor: '#f5f5f5',
|
||||
font: {
|
||||
color: '#bdbdbd'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//random data
|
||||
var d1 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d1.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var d2 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d2.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var d3 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d3.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var ds = new Array();
|
||||
|
||||
ds.push({
|
||||
label: "Series One",
|
||||
data: d1,
|
||||
bars: {
|
||||
order: 1
|
||||
}
|
||||
});
|
||||
ds.push({
|
||||
label: "Series Two",
|
||||
data: d2,
|
||||
bars: {
|
||||
order: 2
|
||||
}
|
||||
});
|
||||
ds.push({
|
||||
label: "Series Three",
|
||||
data: d3,
|
||||
bars: {
|
||||
order: 3
|
||||
}
|
||||
});
|
||||
this.createStackBarGraph("#ordered-bars-chart", stack_ticks, ['#02c0ce','#2d7bf4','#f1556c'], ds);
|
||||
|
||||
|
||||
//creating line chart
|
||||
var line_ticks = {
|
||||
y: {
|
||||
min: -1.2,
|
||||
max: 1.2,
|
||||
tickColor: '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
tickColor: '#f5f5f5',
|
||||
font : {
|
||||
color : '#bdbdbd'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//sample data
|
||||
var sin = [],
|
||||
cos = [];
|
||||
var offset = 0;
|
||||
for (var i = 0; i < 12; i += 0.2) {
|
||||
sin.push([i, Math.sin(i + offset)]);
|
||||
cos.push([i, Math.cos(i + offset)]);
|
||||
}
|
||||
var line_data = [
|
||||
{
|
||||
data: sin,
|
||||
label: "Google",
|
||||
},
|
||||
{
|
||||
data: cos,
|
||||
label: "Yahoo"
|
||||
}
|
||||
];
|
||||
this.createLineGraph("#line-chart-alt", line_ticks, ['#02c0ce','#e3eaef'], line_data);
|
||||
},
|
||||
|
||||
//init flotchart
|
||||
$.FlotChart = new FlotChart, $.FlotChart.Constructor =
|
||||
FlotChart
|
||||
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing flotchart
|
||||
function($) {
|
||||
"use strict";
|
||||
$.FlotChart.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Foo table
|
||||
*/
|
||||
|
||||
$(window).on('load', function() {
|
||||
|
||||
// Row Toggler
|
||||
// -----------------------------------------------------------------
|
||||
$('#demo-foo-row-toggler').footable();
|
||||
|
||||
// Accordion
|
||||
// -----------------------------------------------------------------
|
||||
$('#demo-foo-accordion').footable().on('footable_row_expanded', function(e) {
|
||||
$('#demo-foo-accordion tbody tr.footable-detail-show').not(e.row).each(function() {
|
||||
$('#demo-foo-accordion').data('footable').toggleDetail(this);
|
||||
});
|
||||
});
|
||||
|
||||
// Pagination
|
||||
// -----------------------------------------------------------------
|
||||
$('#demo-foo-pagination').footable();
|
||||
$('#demo-show-entries').change(function (e) {
|
||||
e.preventDefault();
|
||||
var pageSize = $(this).val();
|
||||
$('#demo-foo-pagination').data('page-size', pageSize);
|
||||
$('#demo-foo-pagination').trigger('footable_initialized');
|
||||
});
|
||||
|
||||
// Filtering
|
||||
// -----------------------------------------------------------------
|
||||
var filtering = $('#demo-foo-filtering');
|
||||
filtering.footable().on('footable_filtering', function (e) {
|
||||
var selected = $('#demo-foo-filter-status').find(':selected').val();
|
||||
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
|
||||
e.clear = !e.filter;
|
||||
});
|
||||
|
||||
// Filter status
|
||||
$('#demo-foo-filter-status').change(function (e) {
|
||||
e.preventDefault();
|
||||
filtering.trigger('footable_filter', {filter: $(this).val()});
|
||||
});
|
||||
|
||||
// Search input
|
||||
$('#demo-foo-search').on('input', function (e) {
|
||||
e.preventDefault();
|
||||
filtering.trigger('footable_filter', {filter: $(this).val()});
|
||||
});
|
||||
|
||||
|
||||
// Add & Remove Row
|
||||
// -----------------------------------------------------------------
|
||||
var addrow = $('#demo-foo-addrow');
|
||||
addrow.footable().on('click', '.demo-delete-row', function() {
|
||||
|
||||
//get the footable object
|
||||
var footable = addrow.data('footable');
|
||||
|
||||
//get the row we are wanting to delete
|
||||
var row = $(this).parents('tr:first');
|
||||
|
||||
//delete the row
|
||||
footable.removeRow(row);
|
||||
});
|
||||
|
||||
// Search input
|
||||
$('#demo-input-search2').on('input', function (e) {
|
||||
e.preventDefault();
|
||||
addrow.trigger('footable_filter', {filter: $(this).val()});
|
||||
});
|
||||
|
||||
// Add Row Button
|
||||
$('#demo-btn-addrow').click(function() {
|
||||
|
||||
//get the footable object
|
||||
var footable = addrow.data('footable');
|
||||
|
||||
//build up the row we are wanting to add
|
||||
var newRow = '<tr><td style="text-align: center;"><button class="demo-delete-row btn btn-danger btn-sm btn-icon"><i class="fa fa-times"></i></button></td><td>Adam</td><td>Doe</td><td>Traffic Court Referee</td><td>22 Jun 1972</td><td><span class="badge label-table badge-success ">Active</span></td></tr>';
|
||||
|
||||
//add it
|
||||
footable.appendRow(newRow);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Form Advanced
|
||||
*/
|
||||
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
|
||||
// Select2
|
||||
$(".select2").select2();
|
||||
|
||||
$(".select2-limiting").select2({
|
||||
maximumSelectionLength: 2
|
||||
});
|
||||
|
||||
$('.selectpicker').selectpicker();
|
||||
$(":file").filestyle({input: false});
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Bootstrap-MaxLength
|
||||
$('input#defaultconfig').maxlength({
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger"
|
||||
});
|
||||
|
||||
$('input#thresholdconfig').maxlength({
|
||||
threshold: 20,
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger"
|
||||
});
|
||||
|
||||
$('input#alloptions').maxlength({
|
||||
alwaysShow: true,
|
||||
separator: ' out of ',
|
||||
preText: 'You typed ',
|
||||
postText: ' chars available.',
|
||||
validate: true,
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger"
|
||||
});
|
||||
|
||||
$('textarea#textarea').maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger"
|
||||
});
|
||||
|
||||
$('input#placement').maxlength({
|
||||
alwaysShow: true,
|
||||
placement: 'top-left',
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger"
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Form Pickers
|
||||
*/
|
||||
jQuery(document).ready(function () {
|
||||
|
||||
// Time Picker
|
||||
jQuery('#timepicker').timepicker({
|
||||
defaultTIme: false,
|
||||
icons: {
|
||||
up: 'mdi mdi-chevron-up',
|
||||
down: 'mdi mdi-chevron-down'
|
||||
}
|
||||
});
|
||||
jQuery('#timepicker2').timepicker({
|
||||
showMeridian: false,
|
||||
icons: {
|
||||
up: 'mdi mdi-chevron-up',
|
||||
down: 'mdi mdi-chevron-down'
|
||||
}
|
||||
});
|
||||
jQuery('#timepicker3').timepicker({
|
||||
minuteStep: 15,
|
||||
icons: {
|
||||
up: 'mdi mdi-chevron-up',
|
||||
down: 'mdi mdi-chevron-down'
|
||||
}
|
||||
});
|
||||
|
||||
//colorpicker start
|
||||
|
||||
$('.colorpicker-default').colorpicker({
|
||||
format: 'hex'
|
||||
});
|
||||
$('.colorpicker-rgba').colorpicker();
|
||||
|
||||
|
||||
// Date Picker
|
||||
jQuery('#datepicker').datepicker();
|
||||
jQuery('#datepicker-autoclose').datepicker({
|
||||
autoclose: true,
|
||||
todayHighlight: true
|
||||
});
|
||||
jQuery('#datepicker-inline').datepicker();
|
||||
jQuery('#datepicker-multiple-date').datepicker({
|
||||
format: "mm/dd/yyyy",
|
||||
clearBtn: true,
|
||||
multidate: true,
|
||||
multidateSeparator: ","
|
||||
});
|
||||
jQuery('#date-range').datepicker({
|
||||
toggleActive: true
|
||||
});
|
||||
|
||||
|
||||
//Clock Picker
|
||||
$('.clockpicker').clockpicker({
|
||||
donetext: 'Done'
|
||||
});
|
||||
|
||||
$('#single-input').clockpicker({
|
||||
placement: 'bottom',
|
||||
align: 'left',
|
||||
autoclose: true,
|
||||
'default': 'now'
|
||||
});
|
||||
$('#check-minutes').click(function (e) {
|
||||
// Have to stop propagation here
|
||||
e.stopPropagation();
|
||||
$("#single-input").clockpicker('show')
|
||||
.clockpicker('toggleView', 'minutes');
|
||||
});
|
||||
|
||||
|
||||
//Date range picker
|
||||
$('.input-daterange-datepicker').daterangepicker({
|
||||
buttonClasses: ['btn', 'btn-sm'],
|
||||
applyClass: 'btn-success',
|
||||
cancelClass: 'btn-light'
|
||||
});
|
||||
$('.input-daterange-timepicker').daterangepicker({
|
||||
timePicker: true,
|
||||
timePickerIncrement: 30,
|
||||
locale: {
|
||||
format: 'MM/DD/YYYY h:mm A'
|
||||
},
|
||||
buttonClasses: ['btn', 'btn-sm'],
|
||||
applyClass: 'btn-success',
|
||||
cancelClass: 'btn-light'
|
||||
});
|
||||
$('.input-limit-datepicker').daterangepicker({
|
||||
format: 'MM/DD/YYYY',
|
||||
minDate: '06/01/2018',
|
||||
maxDate: '06/30/2018',
|
||||
buttonClasses: ['btn', 'btn-sm'],
|
||||
applyClass: 'btn-success',
|
||||
cancelClass: 'btn-light',
|
||||
dateLimit: {
|
||||
days: 6
|
||||
}
|
||||
});
|
||||
|
||||
$('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
|
||||
|
||||
$('#reportrange').daterangepicker({
|
||||
format: 'MM/DD/YYYY',
|
||||
startDate: moment().subtract(29, 'days'),
|
||||
endDate: moment(),
|
||||
minDate: '01/01/2017',
|
||||
maxDate: '12/31/2020',
|
||||
dateLimit: {
|
||||
days: 60
|
||||
},
|
||||
showDropdowns: true,
|
||||
showWeekNumbers: false,
|
||||
timePicker: false,
|
||||
timePickerIncrement: 1,
|
||||
timePicker12Hour: true,
|
||||
ranges: {
|
||||
'Today': [moment(), moment()],
|
||||
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
||||
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||||
},
|
||||
opens: 'left',
|
||||
drops: 'down',
|
||||
buttonClasses: ['btn', 'btn-sm'],
|
||||
applyClass: 'btn-success',
|
||||
cancelClass: 'btn-light',
|
||||
separator: ' to ',
|
||||
locale: {
|
||||
applyLabel: 'Submit',
|
||||
cancelLabel: 'Cancel',
|
||||
fromLabel: 'From',
|
||||
toLabel: 'To',
|
||||
customRangeLabel: 'Custom',
|
||||
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||||
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
firstDay: 1
|
||||
}
|
||||
}, function (start, end, label) {
|
||||
console.log(start.toISOString(), end.toISOString(), label);
|
||||
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Google Maps
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var GoogleMap = function() {};
|
||||
|
||||
//creates basic map
|
||||
GoogleMap.prototype.createBasic = function($container) {
|
||||
return new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
},
|
||||
//creates map with markers
|
||||
GoogleMap.prototype.createMarkers = function($container) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
//sample markers, but you can pass actual marker data as function parameter
|
||||
map.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');
|
||||
}
|
||||
});
|
||||
map.addMarker({
|
||||
lat: -12.042,
|
||||
lng: -77.028333,
|
||||
title: 'Marker with InfoWindow',
|
||||
infoWindow: {
|
||||
content: '<p>HTML Content</p>'
|
||||
}
|
||||
});
|
||||
|
||||
return map;
|
||||
},
|
||||
//creates map with polygone
|
||||
GoogleMap.prototype.createWithPolygon = function ($container, $path) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
var polygon = map.drawPolygon({
|
||||
paths: $path,
|
||||
strokeColor: '#BBD8E9',
|
||||
strokeOpacity: 1,
|
||||
strokeWeight: 3,
|
||||
fillColor: '#BBD8E9',
|
||||
fillOpacity: 0.6
|
||||
});
|
||||
|
||||
return map;
|
||||
},
|
||||
|
||||
//creates map with overlay
|
||||
GoogleMap.prototype.createWithOverlay = function ($container) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
map.drawOverlay({
|
||||
lat: map.getCenter().lat(),
|
||||
lng: map.getCenter().lng(),
|
||||
content: '<div class="gmaps-overlay">Our Office!<div class="gmaps-overlay_arrow above"></div></div>',
|
||||
verticalAlign: 'top',
|
||||
horizontalAlign: 'center'
|
||||
});
|
||||
|
||||
return map;
|
||||
},
|
||||
|
||||
//creates map with street view
|
||||
GoogleMap.prototype.createWithStreetview = function ($container, $lat, $lng) {
|
||||
return GMaps.createPanorama({
|
||||
el: $container,
|
||||
lat : $lat,
|
||||
lng : $lng
|
||||
});
|
||||
},
|
||||
//Routes
|
||||
GoogleMap.prototype.createWithRoutes = function ($container, $lat, $lng) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: $lat,
|
||||
lng: $lng
|
||||
});
|
||||
$('#start_travel').click(function(e){
|
||||
e.preventDefault();
|
||||
map.travelRoute({
|
||||
origin: [-12.044012922866312, -77.02470665341184],
|
||||
destination: [-12.090814532191756, -77.02271108990476],
|
||||
travelMode: 'driving',
|
||||
step: function(e){
|
||||
$('#instructions').append('<li>'+e.instructions+'</li>');
|
||||
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
|
||||
map.setCenter(e.end_location.lat(), e.end_location.lng());
|
||||
map.drawPolyline({
|
||||
path: e.path,
|
||||
strokeColor: '#131540',
|
||||
strokeOpacity: 0.6,
|
||||
strokeWeight: 6
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
return map;
|
||||
},
|
||||
//Type
|
||||
GoogleMap.prototype.createMapByType = function ($container, $lat, $lng) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: $lat,
|
||||
lng: $lng,
|
||||
mapTypeControlOptions: {
|
||||
mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm", "cloudmade"]
|
||||
}
|
||||
});
|
||||
map.addMapType("osm", {
|
||||
getTileUrl: function(coord, zoom) {
|
||||
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||||
},
|
||||
tileSize: new google.maps.Size(256, 256),
|
||||
name: "OpenStreetMap",
|
||||
maxZoom: 18
|
||||
});
|
||||
map.addMapType("cloudmade", {
|
||||
getTileUrl: function(coord, zoom) {
|
||||
return "http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||||
},
|
||||
tileSize: new google.maps.Size(256, 256),
|
||||
name: "CloudMade",
|
||||
maxZoom: 18
|
||||
});
|
||||
map.setMapTypeId("osm");
|
||||
return map;
|
||||
},
|
||||
GoogleMap.prototype.createWithMenu = function ($container, $lat, $lng) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: $lat,
|
||||
lng: $lng
|
||||
});
|
||||
map.setContextMenu({
|
||||
control: 'map',
|
||||
options: [{
|
||||
title: 'Add marker',
|
||||
name: 'add_marker',
|
||||
action: function(e){
|
||||
this.addMarker({
|
||||
lat: e.latLng.lat(),
|
||||
lng: e.latLng.lng(),
|
||||
title: 'New marker'
|
||||
});
|
||||
this.hideContextMenu();
|
||||
}
|
||||
}, {
|
||||
title: 'Center here',
|
||||
name: 'center_here',
|
||||
action: function(e){
|
||||
this.setCenter(e.latLng.lat(), e.latLng.lng());
|
||||
}
|
||||
}]
|
||||
});
|
||||
},
|
||||
//init
|
||||
GoogleMap.prototype.init = function() {
|
||||
var $this = this;
|
||||
$(document).ready(function(){
|
||||
//creating basic map
|
||||
$this.createBasic('#gmaps-basic'),
|
||||
//with sample markers
|
||||
$this.createMarkers('#gmaps-markers');
|
||||
|
||||
//polygon
|
||||
var path = [[-12.040397656836609,-77.03373871559225],
|
||||
[-12.040248585302038,-77.03993927003302],
|
||||
[-12.050047116528843,-77.02448169303511],
|
||||
[-12.044804866577001,-77.02154422636042]];
|
||||
$this.createWithPolygon('#gmaps-polygons', path);
|
||||
|
||||
//overlay
|
||||
$this.createWithOverlay('#gmaps-overlay');
|
||||
|
||||
//street view
|
||||
$this.createWithStreetview('#panorama', 42.3455, -71.0983);
|
||||
|
||||
//routes
|
||||
$this.createWithRoutes('#gmaps-route',-12.043333, -77.028333);
|
||||
|
||||
//types
|
||||
$this.createMapByType('#gmaps-types', -12.043333, -77.028333);
|
||||
|
||||
//statu
|
||||
$this.createWithMenu('#gmaps-menu', -12.043333, -77.028333);
|
||||
});
|
||||
},
|
||||
//init
|
||||
$.GoogleMap = new GoogleMap, $.GoogleMap.Constructor = GoogleMap
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.GoogleMap.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,450 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Module/App: Google Chart
|
||||
*/
|
||||
|
||||
! function($) {
|
||||
"use strict";
|
||||
|
||||
var GoogleChart = function() {
|
||||
this.$body = $("body")
|
||||
};
|
||||
|
||||
//creates line graph
|
||||
GoogleChart.prototype.createLineChart = function(selector, data, axislabel, colors) {
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 340,
|
||||
curveType: 'function',
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '8%',
|
||||
width: '90%',
|
||||
height: 300
|
||||
},
|
||||
pointSize: 4,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: axislabel,
|
||||
titleTextStyle: {
|
||||
fontSize: 12,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
lineWidth: 3,
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var line_chart = new google.visualization.LineChart(selector);
|
||||
line_chart.draw(google_chart_data, options);
|
||||
return line_chart;
|
||||
},
|
||||
//creates area graph
|
||||
GoogleChart.prototype.createAreaChart = function(selector, data, axislabel, colors) {
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 340,
|
||||
curveType: 'function',
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '8%',
|
||||
width: '90%',
|
||||
height: 300
|
||||
},
|
||||
pointSize: 4,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: axislabel,
|
||||
titleTextStyle: {
|
||||
fontSize: 14,
|
||||
italic: false
|
||||
},
|
||||
gridarea: {
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
gridlines: {
|
||||
color: '#f5f5f5'
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'end',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
lineWidth: 2,
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var area_chart = new google.visualization.AreaChart(selector);
|
||||
area_chart.draw(google_chart_data, options);
|
||||
return area_chart;
|
||||
},
|
||||
//creates Column graph
|
||||
GoogleChart.prototype.createColumnChart = function(selector, data, axislabel, colors) {
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '8%',
|
||||
width: '90%',
|
||||
height: 350
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: axislabel,
|
||||
titleTextStyle: {
|
||||
fontSize: 12,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var column_chart = new google.visualization.ColumnChart(selector);
|
||||
column_chart.draw(google_chart_data, options);
|
||||
return column_chart;
|
||||
},
|
||||
//creates bar graph
|
||||
GoogleChart.prototype.createBarChart = function(selector, data, colors) {
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '8%',
|
||||
width: '90%',
|
||||
height: 350
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
gridlines:{
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var bar_chart = new google.visualization.BarChart(selector);
|
||||
bar_chart.draw(google_chart_data, options);
|
||||
return bar_chart;
|
||||
},
|
||||
//creates Column Stacked
|
||||
GoogleChart.prototype.createColumnStackChart = function(selector, data, axislabel, colors) {
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '8%',
|
||||
width: '90%',
|
||||
height: 350
|
||||
},
|
||||
isStacked: true,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: axislabel,
|
||||
titleTextStyle: {
|
||||
fontSize: 12,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var stackedcolumn_chart = new google.visualization.ColumnChart(selector);
|
||||
stackedcolumn_chart.draw(google_chart_data, options);
|
||||
return stackedcolumn_chart;
|
||||
},
|
||||
//creates Bar Stacked
|
||||
GoogleChart.prototype.createBarStackChart = function(selector, data, colors) {
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '8%',
|
||||
width: '90%',
|
||||
height: 350
|
||||
},
|
||||
isStacked: true,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
hAxis: {
|
||||
gridlines: {
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var stackedbar_chart = new google.visualization.BarChart(selector);
|
||||
stackedbar_chart.draw(google_chart_data, options);
|
||||
return stackedbar_chart;
|
||||
},
|
||||
//creates pie chart
|
||||
GoogleChart.prototype.createPieChart = function(selector, data, colors, is3D, issliced) {
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13,
|
||||
height: 300,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
if(is3D) {
|
||||
options['is3D'] = true;
|
||||
}
|
||||
|
||||
if(issliced) {
|
||||
options['is3D'] = true;
|
||||
options['pieSliceText'] = 'label';
|
||||
options['slices'] = {
|
||||
2: {offset: 0.15},
|
||||
5: {offset: 0.1}
|
||||
};
|
||||
}
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var pie_chart = new google.visualization.PieChart(selector);
|
||||
pie_chart.draw(google_chart_data, options);
|
||||
return pie_chart;
|
||||
},
|
||||
|
||||
//creates donut chart
|
||||
GoogleChart.prototype.createDonutChart = function(selector, data, colors) {
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13,
|
||||
height: 300,
|
||||
pieHole: 0.55,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var pie_chart = new google.visualization.PieChart(selector);
|
||||
pie_chart.draw(google_chart_data, options);
|
||||
return pie_chart;
|
||||
},
|
||||
//init
|
||||
GoogleChart.prototype.init = function () {
|
||||
var $this = this;
|
||||
|
||||
//creating line chart
|
||||
var common_data = [
|
||||
['Year', "Bitcoin", "Ethereum"],
|
||||
['2010', 850, 120],
|
||||
['2011', 745, 200],
|
||||
['2012', 852, 180],
|
||||
['2013', 1000, 400],
|
||||
['2014', 1170, 460],
|
||||
['2015', 660, 1120],
|
||||
['2016', 1030, 540]
|
||||
];
|
||||
$this.createLineChart($('#line-chart')[0], common_data, 'Sales and Expenses', ['#4eb7eb', '#f1556c']);
|
||||
|
||||
|
||||
//creating area chart using same data
|
||||
$this.createAreaChart($('#area-chart')[0], common_data, 'Sales and Expenses', ['#e3eaef', '#02c0ce']);
|
||||
|
||||
|
||||
//creating column chart
|
||||
var column_data = [
|
||||
['Year', "Bitcoin", "Ethereum", "Litecoin"],
|
||||
['2010', 850, 120, 200],
|
||||
['2011', 745, 200, 562],
|
||||
['2012', 852, 180, 521],
|
||||
['2013', 1000, 400, 652],
|
||||
['2014', 1170, 460, 200],
|
||||
['2015', 660, 1120, 562],
|
||||
['2016', 1030, 540, 852]
|
||||
];
|
||||
$this.createColumnChart($('#column-chart')[0], column_data, 'Sales and Expenses', ['#02c0ce','#0acf97', '#ebeff2']);
|
||||
|
||||
|
||||
//creating bar chart
|
||||
var bar_data = [
|
||||
['Year', "Bitcoin", "Ethereum"],
|
||||
['2004', 1000, 400],
|
||||
['2005', 1170, 460],
|
||||
['2006', 660, 1120],
|
||||
['2007', 1030, 540]
|
||||
];
|
||||
$this.createBarChart($('#bar-chart')[0], bar_data, ['#4eb7eb', '#ebeff2']);
|
||||
|
||||
|
||||
//creating columns tacked chart
|
||||
var column_stacked_data = [
|
||||
['Genre', "Bitcoin", "Ethereum", "Litecoin", "Ripple", { role: 'annotation' } ],
|
||||
['2000', 20, 30, 35, 40, ''],
|
||||
['2005', 14, 20, 25, 30, ''],
|
||||
['2010', 10, 24, 20, 32, ''],
|
||||
['2015', 15, 25, 30, 35, ''],
|
||||
['2020', 16, 22, 23, 30, ''],
|
||||
['2025', 12, 26, 20, 40, ''],
|
||||
['2030', 28, 19, 29, 30, '']
|
||||
];
|
||||
$this.createColumnStackChart($('#column-stacked-chart')[0], column_stacked_data, 'Sales and Expenses', [ '#2d7bf4','#4eb7eb','#02c0ce', '#e3eaef']);
|
||||
|
||||
|
||||
//creating bar tacked chart
|
||||
var bar_stacked_data = [
|
||||
['Genre', "Bitcoin", "Ethereum", "Litecoin", "Ripple", { role: 'annotation' } ],
|
||||
['2000', 20, 30, 35, 40, ''],
|
||||
['2005', 14, 20, 25, 30, ''],
|
||||
['2010', 10, 24, 20, 32, ''],
|
||||
['2015', 15, 25, 30, 35, ''],
|
||||
['2020', 16, 22, 23, 30, ''],
|
||||
['2025', 12, 26, 20, 40, ''],
|
||||
['2030', 28, 19, 29, 30, '']
|
||||
];
|
||||
$this.createBarStackChart($('#bar-stacked-chart')[0], bar_stacked_data, ['#2d7bf4','#4eb7eb','#02c0ce', '#e3eaef']);
|
||||
|
||||
|
||||
//creating pie chart
|
||||
var pie_data = [
|
||||
['Task', 'Hours per Day'],
|
||||
['Bitcoin', 11],
|
||||
['Ethereum', 2],
|
||||
['Litecoin', 2],
|
||||
['Ripple', 2],
|
||||
['Cardano', 7]
|
||||
];
|
||||
$this.createPieChart($('#pie-chart')[0], pie_data, ['#2d7bf4','#4eb7eb','#02c0ce', '#e3eaef', '#32c861'], false, false);
|
||||
|
||||
|
||||
//creating donut chart
|
||||
$this.createDonutChart($('#donut-chart')[0], pie_data, ['#2d7bf4','#4eb7eb','#02c0ce', '#e3eaef', '#32c861']);
|
||||
|
||||
//creating 3d pie chart
|
||||
$this.createPieChart($('#pie-3d-chart')[0], pie_data, ['#2d7bf4','#4eb7eb','#02c0ce', '#e3eaef', '#32c861'], true, false);
|
||||
|
||||
//creating Sliced pie chart
|
||||
var sliced_Data = [
|
||||
['Language', 'Speakers (in millions)'],
|
||||
['Assamese', 13],
|
||||
['Bengali', 83],
|
||||
['Gujarati', 46],
|
||||
['Hindi', 90],
|
||||
['Kannada', 38],
|
||||
['Malayalam', 33]
|
||||
];
|
||||
$this.createPieChart($('#3d-exploded-chart')[0], sliced_Data, ['#2d7bf4','#4eb7eb','#02c0ce', '#e3eaef', '#32c861',"#353d4a"], true, true);
|
||||
|
||||
},
|
||||
//init GoogleChart
|
||||
$.GoogleChart = new GoogleChart, $.GoogleChart.Constructor = GoogleChart
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing GoogleChart
|
||||
function($) {
|
||||
"use strict";
|
||||
//loading visualization lib - don't forget to include this
|
||||
google.load("visualization", "1", {packages:["corechart"]});
|
||||
//after finished load, calling init method
|
||||
google.setOnLoadCallback(function() {$.GoogleChart.init();});
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,214 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* VectorMap
|
||||
*/
|
||||
|
||||
! function($) {
|
||||
"use strict";
|
||||
|
||||
var VectorMap = function() {
|
||||
};
|
||||
|
||||
VectorMap.prototype.init = function() {
|
||||
//various examples
|
||||
$('#world-map-markers').vectorMap({
|
||||
map : 'world_mill_en',
|
||||
normalizeFunction : 'polynomial',
|
||||
hoverOpacity : 0.7,
|
||||
hoverColor : false,
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#e3eaef'
|
||||
}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 9,
|
||||
'fill': '#02c0ce',
|
||||
'fill-opacity': 0.9,
|
||||
'stroke': '#fff',
|
||||
'stroke-width' : 7,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
|
||||
hover: {
|
||||
'stroke': '#fff',
|
||||
'fill-opacity': 1,
|
||||
'stroke-width': 1.5
|
||||
}
|
||||
},
|
||||
backgroundColor : 'transparent',
|
||||
markers : [{
|
||||
latLng : [41.90, 12.45],
|
||||
name : 'Vatican City'
|
||||
}, {
|
||||
latLng : [43.73, 7.41],
|
||||
name : 'Monaco'
|
||||
}, {
|
||||
latLng : [-0.52, 166.93],
|
||||
name : 'Nauru'
|
||||
}, {
|
||||
latLng : [-8.51, 179.21],
|
||||
name : 'Tuvalu'
|
||||
}, {
|
||||
latLng : [43.93, 12.46],
|
||||
name : 'San Marino'
|
||||
}, {
|
||||
latLng : [47.14, 9.52],
|
||||
name : 'Liechtenstein'
|
||||
}, {
|
||||
latLng : [7.11, 171.06],
|
||||
name : 'Marshall Islands'
|
||||
}, {
|
||||
latLng : [17.3, -62.73],
|
||||
name : 'Saint Kitts and Nevis'
|
||||
}, {
|
||||
latLng : [3.2, 73.22],
|
||||
name : 'Maldives'
|
||||
}, {
|
||||
latLng : [35.88, 14.5],
|
||||
name : 'Malta'
|
||||
}, {
|
||||
latLng : [12.05, -61.75],
|
||||
name : 'Grenada'
|
||||
}, {
|
||||
latLng : [13.16, -61.23],
|
||||
name : 'Saint Vincent and the Grenadines'
|
||||
}, {
|
||||
latLng : [13.16, -59.55],
|
||||
name : 'Barbados'
|
||||
}, {
|
||||
latLng : [17.11, -61.85],
|
||||
name : 'Antigua and Barbuda'
|
||||
}, {
|
||||
latLng : [-4.61, 55.45],
|
||||
name : 'Seychelles'
|
||||
}, {
|
||||
latLng : [7.35, 134.46],
|
||||
name : 'Palau'
|
||||
}, {
|
||||
latLng : [42.5, 1.51],
|
||||
name : 'Andorra'
|
||||
}, {
|
||||
latLng : [14.01, -60.98],
|
||||
name : 'Saint Lucia'
|
||||
}, {
|
||||
latLng : [6.91, 158.18],
|
||||
name : 'Federated States of Micronesia'
|
||||
}, {
|
||||
latLng : [1.3, 103.8],
|
||||
name : 'Singapore'
|
||||
}, {
|
||||
latLng : [1.46, 173.03],
|
||||
name : 'Kiribati'
|
||||
}, {
|
||||
latLng : [-21.13, -175.2],
|
||||
name : 'Tonga'
|
||||
}, {
|
||||
latLng : [15.3, -61.38],
|
||||
name : 'Dominica'
|
||||
}, {
|
||||
latLng : [-20.2, 57.5],
|
||||
name : 'Mauritius'
|
||||
}, {
|
||||
latLng : [26.02, 50.55],
|
||||
name : 'Bahrain'
|
||||
}, {
|
||||
latLng : [0.33, 6.73],
|
||||
name : 'São Tomé and Príncipe'
|
||||
}]
|
||||
});
|
||||
|
||||
$('#usa').vectorMap({
|
||||
map : 'us_aea_en',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#2d7bf4'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#india').vectorMap({
|
||||
map : 'in_mill',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#f9bc0b'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#uk').vectorMap({
|
||||
map : 'uk_mill_en',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#0acf97'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#chicago').vectorMap({
|
||||
map : 'us-il-chicago_mill_en',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#4eb7eb'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('#australia').vectorMap({
|
||||
map : 'au_mill',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#02c0ce'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('#canada').vectorMap({
|
||||
map : 'ca_lcc',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#f1556c'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#germany').vectorMap({
|
||||
map : 'de_mill',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#777edd'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#asia').vectorMap({
|
||||
map : 'asia_mill',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#ff679b'
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//init
|
||||
$.VectorMap = new VectorMap, $.VectorMap.Constructor =
|
||||
VectorMap
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.VectorMap.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,316 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Module/App: Mapael Maps
|
||||
*/
|
||||
|
||||
|
||||
$(function(){
|
||||
|
||||
//USA Map
|
||||
|
||||
$mapusa = $(".map-usa");
|
||||
|
||||
$mapusa.mapael({
|
||||
map : {
|
||||
name : "usa_states",
|
||||
defaultArea: {
|
||||
attrs: {
|
||||
fill: "#36404e",
|
||||
stroke: "#e3eaef"
|
||||
},
|
||||
attrsHover: {
|
||||
fill: "#4489e4"
|
||||
}
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
maxLevel : 10
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
plot: {
|
||||
title: "American cities",
|
||||
slices: [{
|
||||
size: 24,
|
||||
attrs: {
|
||||
fill: "#188ae2"
|
||||
},
|
||||
label: "Product One",
|
||||
sliceValue: "Value 1"
|
||||
}, {
|
||||
size: 24,
|
||||
attrs: {
|
||||
fill: "#3ac9d6"
|
||||
},
|
||||
label: "Product Two",
|
||||
sliceValue: "Value 2"
|
||||
}, {
|
||||
size: 24,
|
||||
attrs: {
|
||||
fill: "#f5707a"
|
||||
},
|
||||
label: "Product Three",
|
||||
sliceValue: "Value 3"
|
||||
}]
|
||||
}
|
||||
},
|
||||
plots: {
|
||||
'ny': {
|
||||
latitude: 40.717079,
|
||||
longitude: -74.00116,
|
||||
tooltip: {content: "New York"},
|
||||
value: "Value 3"
|
||||
},
|
||||
'an': {
|
||||
latitude: 61.2108398,
|
||||
longitude: -149.9019557,
|
||||
tooltip: {content: "Anchorage"},
|
||||
value: "Value 3"
|
||||
},
|
||||
'sf': {
|
||||
latitude: 37.792032,
|
||||
longitude: -122.394613,
|
||||
tooltip: {content: "San Francisco"},
|
||||
value: "Value 1"
|
||||
},
|
||||
'pa': {
|
||||
latitude: 19.493204,
|
||||
longitude: -154.8199569,
|
||||
tooltip: {content: "Pahoa"},
|
||||
value: "Value 2"
|
||||
},
|
||||
'la': {
|
||||
latitude: 34.025052,
|
||||
longitude: -118.192006,
|
||||
tooltip: {content: "Los Angeles"},
|
||||
value: "Value 3"
|
||||
},
|
||||
'dallas': {
|
||||
latitude: 32.784881,
|
||||
longitude: -96.808244,
|
||||
tooltip: {content: "Dallas"},
|
||||
value: "Value 2"
|
||||
},
|
||||
'miami': {
|
||||
latitude: 25.789125,
|
||||
longitude: -80.205674,
|
||||
tooltip: {content: "Miami"},
|
||||
value: "Value 3"
|
||||
},
|
||||
'washington': {
|
||||
latitude: 38.905761,
|
||||
longitude: -77.020746,
|
||||
tooltip: {content: "Washington"},
|
||||
value: "Value 2"
|
||||
},
|
||||
'seattle': {
|
||||
latitude: 47.599571,
|
||||
longitude: -122.319426,
|
||||
tooltip: {content: "Seattle"},
|
||||
value: "Value 1"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Zoom on mousewheel with mousewheel jQuery plugin
|
||||
$mapusa.on("mousewheel", function(e) {
|
||||
if (e.deltaY > 0) {
|
||||
$mapusa.trigger("zoom", $mapusa.data("zoomLevel") + 1);
|
||||
console.log("zoom");
|
||||
} else {
|
||||
$mapusa.trigger("zoom", $mapusa.data("zoomLevel") - 1);
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$(".mapcontainer").mapael({
|
||||
map: {
|
||||
name: "world_countries",
|
||||
defaultArea: {
|
||||
attrs: {
|
||||
fill: "#36404e",
|
||||
stroke: "#7c8e9a"
|
||||
},
|
||||
attrsHover: {
|
||||
fill: "#02c0ce",
|
||||
stroke: "#02c0ce"
|
||||
}
|
||||
}
|
||||
// Default attributes can be set for all links
|
||||
, defaultLink: {
|
||||
factor: 0.4
|
||||
, attrsHover: {
|
||||
stroke: "#f06292"
|
||||
}
|
||||
}
|
||||
, defaultPlot: {
|
||||
text: {
|
||||
attrs: {
|
||||
fill: "#ddd"
|
||||
},
|
||||
attrsHover: {
|
||||
fill: "#ddd"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plots: {
|
||||
'paris': {
|
||||
latitude: 48.86,
|
||||
longitude: 2.3444,
|
||||
tooltip: {content: "Paris<br />Population: 500000000"}
|
||||
},
|
||||
'newyork': {
|
||||
latitude: 40.667,
|
||||
longitude: -73.833,
|
||||
tooltip: {content: "New york<br />Population: 200001"}
|
||||
},
|
||||
'sanfrancisco': {
|
||||
latitude: 37.792032,
|
||||
longitude: -122.394613,
|
||||
tooltip: {content: "San Francisco"}
|
||||
},
|
||||
'brasilia': {
|
||||
latitude: -15.781682,
|
||||
longitude: -47.924195,
|
||||
tooltip: {content: "Brasilia<br />Population: 200000001"}
|
||||
},
|
||||
'roma': {
|
||||
latitude: 41.827637,
|
||||
longitude: 12.462732,
|
||||
tooltip: {content: "Roma"}
|
||||
},
|
||||
'miami': {
|
||||
latitude: 25.789125,
|
||||
longitude: -80.205674,
|
||||
tooltip: {content: "Miami"}
|
||||
},
|
||||
|
||||
// Size=0 in order to make plots invisible
|
||||
'tokyo': {
|
||||
latitude: 35.687418,
|
||||
longitude: 139.692306,
|
||||
size: 0,
|
||||
text: {content: 'Tokyo'}
|
||||
},
|
||||
'sydney': {
|
||||
latitude: -33.917,
|
||||
longitude: 151.167,
|
||||
size: 0,
|
||||
text: {content: 'Sydney'}
|
||||
},
|
||||
'plot1': {
|
||||
latitude: 22.906561,
|
||||
longitude: 86.840170,
|
||||
size: 0,
|
||||
text: {content: 'Plot1', position: 'left', margin: 5}
|
||||
},
|
||||
'plot2': {
|
||||
latitude: -0.390553,
|
||||
longitude: 115.586762,
|
||||
size: 0,
|
||||
text: {content: 'Plot2'}
|
||||
},
|
||||
'plot3': {
|
||||
latitude: 44.065626,
|
||||
longitude: 94.576079,
|
||||
size: 0,
|
||||
text: {content: 'Plot3'}
|
||||
}
|
||||
},
|
||||
// Links allow you to connect plots between them
|
||||
links: {
|
||||
'link1': {
|
||||
factor: -0.3
|
||||
// The source and the destination of the link can be set with a latitude and a longitude or a x and a y ...
|
||||
, between: [{latitude: 24.708785, longitude: -5.402427}, {x: 560, y: 280}]
|
||||
, attrs: {
|
||||
"stroke-width": 2
|
||||
}
|
||||
, tooltip: {content: "Link"}
|
||||
}
|
||||
, 'parisnewyork': {
|
||||
// ... Or with IDs of plotted points
|
||||
factor: -0.3
|
||||
, between: ['paris', 'newyork']
|
||||
, attrs: {
|
||||
"stroke-width": 2
|
||||
}
|
||||
, tooltip: {content: "Paris - New-York"}
|
||||
}
|
||||
, 'parissanfrancisco': {
|
||||
// The curve can be inverted by setting a negative factor
|
||||
factor: -0.5
|
||||
, between: ['paris', 'sanfrancisco']
|
||||
, attrs: {
|
||||
"stroke-width": 4
|
||||
}
|
||||
, tooltip: {content: "Paris - San - Francisco"}
|
||||
}
|
||||
, 'parisbrasilia': {
|
||||
factor: -0.8
|
||||
, between: ['paris', 'brasilia']
|
||||
, attrs: {
|
||||
"stroke-width": 1
|
||||
}
|
||||
, tooltip: {content: "Paris - Brasilia"}
|
||||
}
|
||||
, 'romamiami': {
|
||||
factor: 0.2
|
||||
, between: ['roma', 'miami']
|
||||
, attrs: {
|
||||
"stroke-width": 4
|
||||
}
|
||||
, tooltip: {content: "Roma - Miami"}
|
||||
}
|
||||
, 'sydneyplot1': {
|
||||
factor: -0.2
|
||||
, between: ['sydney', 'plot1']
|
||||
, attrs: {
|
||||
stroke: "#4489e4",
|
||||
"stroke-width": 3,
|
||||
"stroke-linecap": "round",
|
||||
opacity: 0.6
|
||||
}
|
||||
, tooltip: {content: "Sydney - Plot1"}
|
||||
}
|
||||
, 'sydneyplot2': {
|
||||
factor: -0.1
|
||||
, between: ['sydney', 'plot2']
|
||||
, attrs: {
|
||||
stroke: "#4489e4",
|
||||
"stroke-width": 8,
|
||||
"stroke-linecap": "round",
|
||||
opacity: 0.6
|
||||
}
|
||||
, tooltip: {content: "Sydney - Plot2"}
|
||||
}
|
||||
, 'sydneyplot3': {
|
||||
factor: 0.2
|
||||
, between: ['sydney', 'plot3']
|
||||
, attrs: {
|
||||
stroke: "#4489e4",
|
||||
"stroke-width": 4,
|
||||
"stroke-linecap": "round",
|
||||
opacity: 0.6
|
||||
}
|
||||
, tooltip: {content: "Sydney - Plot3"}
|
||||
}
|
||||
, 'sydneytokyo': {
|
||||
factor: 0.2
|
||||
, between: ['sydney', 'tokyo']
|
||||
, attrs: {
|
||||
stroke: "#4489e4",
|
||||
"stroke-width": 6,
|
||||
"stroke-linecap": "round",
|
||||
opacity: 0.6
|
||||
}
|
||||
, tooltip: {content: "Sydney - Plot2"}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,201 @@
|
||||
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Morris Chart
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var MorrisCharts = function() {};
|
||||
|
||||
//creates Stacked chart
|
||||
MorrisCharts.prototype.createStackedChart = function(element, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Bar({
|
||||
element: element,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
stacked: true,
|
||||
labels: labels,
|
||||
hideHover: 'auto',
|
||||
resize: true, //defaulted to true
|
||||
gridLineColor: '#eeeeee',
|
||||
barColors: lineColors
|
||||
});
|
||||
},
|
||||
|
||||
//creates area chart
|
||||
MorrisCharts.prototype.createAreaChart = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Area({
|
||||
element: element,
|
||||
pointSize: 0,
|
||||
lineWidth: 0,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
hideHover: 'auto',
|
||||
resize: true,
|
||||
gridLineColor: '#eef0f2',
|
||||
lineColors: lineColors
|
||||
});
|
||||
},
|
||||
|
||||
//creates line chart
|
||||
MorrisCharts.prototype.createLineChart = function(element, data, xkey, ykeys, labels, opacity, Pfillcolor, Pstockcolor, lineColors) {
|
||||
Morris.Line({
|
||||
element: element,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
fillOpacity: opacity,
|
||||
pointFillColors: Pfillcolor,
|
||||
pointStrokeColors: Pstockcolor,
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: '#eef0f2',
|
||||
hideHover: 'auto',
|
||||
lineWidth: '3px',
|
||||
pointSize: 0,
|
||||
preUnits: '$',
|
||||
resize: true, //defaulted to true
|
||||
lineColors: lineColors
|
||||
});
|
||||
},
|
||||
|
||||
//creates Bar chart
|
||||
MorrisCharts.prototype.createBarChart = function(element, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Bar({
|
||||
element: element,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
hideHover: 'auto',
|
||||
resize: true, //defaulted to true
|
||||
gridLineColor: '#eeeeee',
|
||||
barSizeRatio: 0.4,
|
||||
xLabelAngle: 35,
|
||||
barColors: lineColors
|
||||
});
|
||||
},
|
||||
|
||||
//creates area chart with dotted
|
||||
MorrisCharts.prototype.createAreaChartDotted = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, Pfillcolor, Pstockcolor, lineColors) {
|
||||
Morris.Area({
|
||||
element: element,
|
||||
pointSize: 3,
|
||||
lineWidth: 1,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
hideHover: 'auto',
|
||||
pointFillColors: Pfillcolor,
|
||||
pointStrokeColors: Pstockcolor,
|
||||
resize: true,
|
||||
smooth: false,
|
||||
gridLineColor: '#eef0f2',
|
||||
lineColors: lineColors
|
||||
});
|
||||
},
|
||||
|
||||
//creates Donut chart
|
||||
MorrisCharts.prototype.createDonutChart = function(element, data, colors) {
|
||||
Morris.Donut({
|
||||
element: element,
|
||||
data: data,
|
||||
barSize: 0.2,
|
||||
resize: true, //defaulted to true
|
||||
colors: colors
|
||||
});
|
||||
},
|
||||
MorrisCharts.prototype.init = function() {
|
||||
|
||||
|
||||
//creating Stacked chart
|
||||
var $stckedData = [
|
||||
{ y: '2005', a: 45, b: 180, c: 100 },
|
||||
{ y: '2006', a: 75, b: 65, c: 80 },
|
||||
{ y: '2007', a: 100, b: 90, c: 56 },
|
||||
{ y: '2008', a: 75, b: 65, c: 89 },
|
||||
{ y: '2009', a: 100, b: 90, c: 120 },
|
||||
{ y: '2010', a: 75, b: 65, c: 110 },
|
||||
{ y: '2011', a: 50, b: 40, c: 85 },
|
||||
{ y: '2012', a: 75, b: 65, c: 52 },
|
||||
{ y: '2013', a: 50, b: 40, c: 77 },
|
||||
{ y: '2014', a: 75, b: 65, c: 90 },
|
||||
{ y: '2015', a: 100, b: 90, c: 130 },
|
||||
{ y: '2016', a: 80, b: 65, c: 95 }
|
||||
];
|
||||
this.createStackedChart('morris-bar-stacked', $stckedData, 'y', ['a', 'b', 'c'], ["Bitcoin", "Ethereum", "Litecoin"], ['#02c0ce','#4eb7eb','#e3eaef']);
|
||||
|
||||
//creating area chart
|
||||
var $areaData = [
|
||||
{ y: '2009', a: 10, b: 20 },
|
||||
{ y: '2010', a: 75, b: 65 },
|
||||
{ y: '2011', a: 50, b: 40 },
|
||||
{ y: '2012', a: 75, b: 65 },
|
||||
{ y: '2013', a: 50, b: 40 },
|
||||
{ y: '2014', a: 75, b: 65 },
|
||||
{ y: '2015', a: 90, b: 60 }
|
||||
];
|
||||
this.createAreaChart('morris-area-example', 0, 0, $areaData, 'y', ['a', 'b'], ["Bitcoin", "Ethereum"], ['#02c0ce', "#e3eaef"]);
|
||||
|
||||
//create line chart
|
||||
var $data = [
|
||||
{ y: '2008', a: 50, b: 0 },
|
||||
{ y: '2009', a: 75, b: 50 },
|
||||
{ y: '2010', a: 30, b: 80 },
|
||||
{ y: '2011', a: 50, b: 50 },
|
||||
{ y: '2012', a: 75, b: 10 },
|
||||
{ y: '2013', a: 50, b: 40 },
|
||||
{ y: '2014', a: 75, b: 50 },
|
||||
{ y: '2015', a: 100, b: 70 }
|
||||
];
|
||||
this.createLineChart('morris-line-example', $data, 'y', ['a', 'b'], ["Bitcoin", "Ethereum"],['0.1'],['#ffffff'],['#999999'], ['#f1556c', '#4eb7eb']);
|
||||
|
||||
|
||||
//creating bar chart
|
||||
var $barData = [
|
||||
{ y: '2009', a: 100, b: 90 , c: 40 },
|
||||
{ y: '2010', a: 75, b: 65 , c: 20 },
|
||||
{ y: '2011', a: 50, b: 40 , c: 50 },
|
||||
{ y: '2012', a: 75, b: 65 , c: 95 },
|
||||
{ y: '2013', a: 50, b: 40 , c: 22 },
|
||||
{ y: '2014', a: 75, b: 65 , c: 56 },
|
||||
{ y: '2015', a: 100, b: 90 , c: 60 }
|
||||
];
|
||||
this.createBarChart('morris-bar-example', $barData, 'y', ['a', 'b', 'c'], ["Bitcoin", "Ethereum", "Litecoin"], ['#02c0ce','#0acf97', '#ebeff2']);
|
||||
|
||||
//creating area chart with dotted
|
||||
var $areaDotData = [
|
||||
{ y: '2009', a: 10, b: 20 },
|
||||
{ y: '2010', a: 75, b: 65 },
|
||||
{ y: '2011', a: 50, b: 40 },
|
||||
{ y: '2012', a: 75, b: 65 },
|
||||
{ y: '2013', a: 50, b: 40 },
|
||||
{ y: '2014', a: 75, b: 65 },
|
||||
{ y: '2015', a: 90, b: 60 }
|
||||
];
|
||||
this.createAreaChartDotted('morris-area-with-dotted', 0, 0, $areaDotData, 'y', ['a', 'b'], ["Bitcoin","Litecoin"],['#ffffff'],['#999999'], ['#4eb7eb', "#e3eaef"]);
|
||||
|
||||
//creating donut chart
|
||||
var $donutData = [
|
||||
{label: "Bitcoin", value: 12},
|
||||
{label: "Ethereum", value: 30},
|
||||
{label: "Litecoin", value: 20}
|
||||
];
|
||||
this.createDonutChart('morris-donut-example', $donutData, ['#02c0ce','#0acf97', '#ebeff2']);
|
||||
},
|
||||
//init
|
||||
$.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.MorrisCharts.init();
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Component: Ion Slider
|
||||
*
|
||||
*/
|
||||
$(document).ready(function () {
|
||||
$("#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({
|
||||
grid: true,
|
||||
from: 3,
|
||||
values: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
|
||||
});
|
||||
|
||||
$("#range_07").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 200000,
|
||||
step: 1000,
|
||||
prettify_enabled: true
|
||||
});
|
||||
|
||||
$("#range_08").ionRangeSlider({
|
||||
min: 100,
|
||||
max: 1000,
|
||||
from: 550,
|
||||
disable: true
|
||||
});
|
||||
$("#range_09").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 18,
|
||||
max: 70,
|
||||
from: 30,
|
||||
prefix: "Age ",
|
||||
max_postfix: "+"
|
||||
});
|
||||
$("#range_10").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 100,
|
||||
max: 200,
|
||||
from: 145,
|
||||
to: 155,
|
||||
prefix: "Weight: ",
|
||||
postfix: " million pounds",
|
||||
decorate_both: true
|
||||
});
|
||||
$("#range_11").ionRangeSlider({
|
||||
type: "single",
|
||||
grid: true,
|
||||
min: -90,
|
||||
max: 90,
|
||||
from: 0,
|
||||
postfix: "°"
|
||||
});
|
||||
$("#range_12").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 1000,
|
||||
max: 2000,
|
||||
from: 1200,
|
||||
to: 1800,
|
||||
hide_min_max: true,
|
||||
hide_from_to: true,
|
||||
grid: true
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,195 @@
|
||||
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Ratings
|
||||
*/
|
||||
|
||||
;(function ($) {
|
||||
$(function () {
|
||||
$('#default').raty({
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-warning'
|
||||
});
|
||||
|
||||
$('#score').raty({
|
||||
score: 3,
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-danger'
|
||||
});
|
||||
|
||||
$('#score-callback').raty({
|
||||
score: function () {
|
||||
return $(this).attr('data-score');
|
||||
}
|
||||
});
|
||||
|
||||
$('#scoreName').raty({
|
||||
scoreName: 'entity[score]',
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-warning'
|
||||
});
|
||||
|
||||
$('#number').raty({
|
||||
number: 10,
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-danger'
|
||||
});
|
||||
|
||||
$('#number-callback').raty({
|
||||
number: function () {
|
||||
return $(this).attr('data-number');
|
||||
}
|
||||
});
|
||||
|
||||
$('#numberMax').raty({
|
||||
numberMax: 5,
|
||||
number: 100,
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-purple'
|
||||
});
|
||||
|
||||
$('#readOnly').raty({
|
||||
readOnly: true,
|
||||
score: 3,
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-success'
|
||||
});
|
||||
|
||||
$('#readOnly-callback').raty({
|
||||
readOnly: function () {
|
||||
return 'true becomes readOnly' == 'true becomes readOnly';
|
||||
}
|
||||
});
|
||||
|
||||
$('#noRatedMsg').raty({
|
||||
readOnly: true,
|
||||
noRatedMsg: "I'am readOnly and I haven't rated yet!",
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-danger'
|
||||
});
|
||||
|
||||
$('#halfShow-true').raty({
|
||||
score: 3.26
|
||||
});
|
||||
|
||||
$('#halfShow-false').raty({
|
||||
halfShow: false,
|
||||
score: 3.26,
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-danger'
|
||||
});
|
||||
|
||||
$('#round').raty({
|
||||
round: {down: .26, full: .6, up: .76},
|
||||
score: 3.26,
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-pink'
|
||||
});
|
||||
|
||||
$('#half').raty({
|
||||
half: true
|
||||
});
|
||||
|
||||
$('#starHalf').raty({
|
||||
half: true,
|
||||
starHalf: 'fa fa-star-half text-danger',
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-danger'
|
||||
});
|
||||
|
||||
$('#click').raty({
|
||||
click: function (score, evt) {
|
||||
alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
|
||||
}
|
||||
});
|
||||
|
||||
$('#hints').raty({hints: ['a', null, '', undefined, '*_*']});
|
||||
|
||||
$('#star-off-and-star-on').raty({
|
||||
starOff: 'fa fa-bell-o text-muted',
|
||||
starOn: 'fa fa-bell text-custom'
|
||||
});
|
||||
|
||||
$('#cancel').raty({
|
||||
cancel: true,
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-danger'
|
||||
});
|
||||
|
||||
$('#cancelHint').raty({
|
||||
cancel: true,
|
||||
cancelHint: 'My cancel hint!',
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-success'
|
||||
});
|
||||
|
||||
$('#cancelPlace').raty({
|
||||
cancel: true,
|
||||
cancelPlace: 'right',
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-purple'
|
||||
});
|
||||
|
||||
$('#cancel-off-and-cancel-on').raty({
|
||||
cancel: true,
|
||||
cancelOff: 'fa fa-minus-square-o text-muted',
|
||||
cancelOn: 'fa fa-minus-square text-danger'
|
||||
});
|
||||
|
||||
$('#iconRange').raty({
|
||||
iconRange: [
|
||||
{range: 1, on: 'fa fa-cloud', off: 'fa fa-circle-o'},
|
||||
{range: 2, on: 'fa fa-cloud-download', off: 'fa fa-circle-o'},
|
||||
{range: 3, on: 'fa fa-cloud-upload', off: 'fa fa-circle-o'},
|
||||
{range: 4, on: 'fa fa-circle', off: 'fa fa-circle-o'},
|
||||
{range: 5, on: 'fa fa-cogs', off: 'fa fa-circle-o'}
|
||||
]
|
||||
});
|
||||
|
||||
$('#size-md').raty({
|
||||
cancel: true,
|
||||
half: true
|
||||
});
|
||||
|
||||
$('#size-lg').raty({
|
||||
cancel: true,
|
||||
half: true
|
||||
});
|
||||
|
||||
$('#target-div').raty({
|
||||
cancel: true,
|
||||
target: '#target-div-hint',
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-custom'
|
||||
});
|
||||
|
||||
$('#targetType').raty({
|
||||
cancel: true,
|
||||
target: '#targetType-hint',
|
||||
targetType: 'score',
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-warning'
|
||||
});
|
||||
|
||||
$('#targetFormat').raty({
|
||||
target: '#targetFormat-hint',
|
||||
targetFormat: 'Rating: {score}',
|
||||
starOff: 'fa fa-star-o text-muted',
|
||||
starOn: 'fa fa-star text-danger'
|
||||
});
|
||||
|
||||
$('#mouseover').raty({
|
||||
mouseover: function (score, evt) {
|
||||
alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
|
||||
}
|
||||
});
|
||||
|
||||
$('#mouseout').raty({
|
||||
width: 150,
|
||||
mouseout: function (score, evt) {
|
||||
alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
|
||||
}
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,266 @@
|
||||
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* SweetAlert
|
||||
*/
|
||||
|
||||
!function ($) {
|
||||
"use strict";
|
||||
|
||||
var SweetAlert = function () {
|
||||
};
|
||||
|
||||
//examples
|
||||
SweetAlert.prototype.init = function () {
|
||||
|
||||
//Basic
|
||||
$('#sa-basic').on('click', function () {
|
||||
swal(
|
||||
{
|
||||
title: 'Any fool can use a computer!',
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
}
|
||||
).catch(swal.noop)
|
||||
});
|
||||
|
||||
//A title with a text under
|
||||
$('#sa-title').click(function () {
|
||||
swal(
|
||||
{
|
||||
title: "The Internet?",
|
||||
text: 'That thing is still around?',
|
||||
type: 'question',
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
//Success Message
|
||||
$('#sa-success').click(function () {
|
||||
swal(
|
||||
{
|
||||
title: 'Good job!',
|
||||
text: 'You clicked the button!',
|
||||
type: 'success',
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
//Warning Message
|
||||
$('#sa-warning').click(function () {
|
||||
swal({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-confirm mt-2',
|
||||
cancelButtonClass: 'btn btn-cancel ml-2 mt-2',
|
||||
confirmButtonText: 'Yes, delete it!'
|
||||
}).then(function () {
|
||||
swal({
|
||||
title: 'Deleted !',
|
||||
text: "Your file has been deleted",
|
||||
type: 'success',
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
}
|
||||
)
|
||||
})
|
||||
});
|
||||
|
||||
//Parameter
|
||||
$('#sa-params').click(function () {
|
||||
swal({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, cancel!',
|
||||
confirmButtonClass: 'btn btn-success mt-2',
|
||||
cancelButtonClass: 'btn btn-danger ml-2 mt-2',
|
||||
buttonsStyling: false
|
||||
}).then(function () {
|
||||
swal({
|
||||
title: 'Deleted !',
|
||||
text: "Your file has been deleted",
|
||||
type: 'success',
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
}
|
||||
)
|
||||
}, function (dismiss) {
|
||||
// dismiss can be 'cancel', 'overlay',
|
||||
// 'close', and 'timer'
|
||||
if (dismiss === 'cancel') {
|
||||
swal({
|
||||
title: 'Cancelled',
|
||||
text: "Your imaginary file is safe :)",
|
||||
type: 'error',
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//Custom Image
|
||||
$('#sa-image').click(function () {
|
||||
swal({
|
||||
title: 'Sweet!',
|
||||
text: 'Modal with a custom image.',
|
||||
imageUrl: 'assets/images/logo_sm.png',
|
||||
imageHeight: 50,
|
||||
animation: false,
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
})
|
||||
});
|
||||
|
||||
//Auto Close Timer
|
||||
$('#sa-close').click(function () {
|
||||
swal({
|
||||
title: 'Auto close alert!',
|
||||
text: 'I will close in 2 seconds.',
|
||||
timer: 2000,
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
}).then(
|
||||
function () {
|
||||
},
|
||||
// handling the promise rejection
|
||||
function (dismiss) {
|
||||
if (dismiss === 'timer') {
|
||||
console.log('I was closed by the timer')
|
||||
}
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
//custom html alert
|
||||
$('#custom-html-alert').click(function () {
|
||||
swal({
|
||||
title: '<i>HTML</i> <u>example</u>',
|
||||
type: 'info',
|
||||
html: 'You can use <b>bold text</b>, ' +
|
||||
'<a href="//coderthemes.com/">links</a> ' +
|
||||
'and other HTML tags',
|
||||
showCloseButton: true,
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-confirm mt-2',
|
||||
cancelButtonClass: 'btn btn-cancel ml-2 mt-2',
|
||||
confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
|
||||
cancelButtonText: '<i class="fa fa-thumbs-down"></i>'
|
||||
})
|
||||
});
|
||||
|
||||
//Custom width padding
|
||||
$('#custom-padding-width-alert').click(function () {
|
||||
swal({
|
||||
title: 'Custom width, padding, background.',
|
||||
width: 600,
|
||||
padding: 100,
|
||||
confirmButtonClass: 'btn btn-confirm mt-2',
|
||||
background: '#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)'
|
||||
})
|
||||
});
|
||||
|
||||
//Ajax
|
||||
$('#ajax-alert').click(function () {
|
||||
swal({
|
||||
title: 'Submit email to run ajax request',
|
||||
input: 'email',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Submit',
|
||||
showLoaderOnConfirm: true,
|
||||
confirmButtonClass: 'btn btn-confirm mt-2',
|
||||
cancelButtonClass: 'btn btn-cancel ml-2 mt-2',
|
||||
preConfirm: function (email) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
setTimeout(function () {
|
||||
if (email === '[email protected]') {
|
||||
reject('This email is already taken.')
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
}, 2000)
|
||||
})
|
||||
},
|
||||
allowOutsideClick: false
|
||||
}).then(function (email) {
|
||||
swal({
|
||||
type: 'success',
|
||||
title: 'Ajax request finished!',
|
||||
html: 'Submitted email: ' + email,
|
||||
confirmButtonClass: 'btn btn-confirm mt-2'
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//chaining modal alert
|
||||
$('#chaining-alert').click(function () {
|
||||
swal.setDefaults({
|
||||
input: 'text',
|
||||
confirmButtonText: 'Next →',
|
||||
showCancelButton: true,
|
||||
animation: false,
|
||||
progressSteps: ['1', '2', '3'],
|
||||
confirmButtonClass: 'btn btn-confirm mt-2',
|
||||
cancelButtonClass: 'btn btn-cancel ml-2 mt-2'
|
||||
})
|
||||
|
||||
var steps = [
|
||||
{
|
||||
title: 'Question 1',
|
||||
text: 'Chaining swal2 modals is easy'
|
||||
},
|
||||
'Question 2',
|
||||
'Question 3'
|
||||
]
|
||||
|
||||
swal.queue(steps).then(function (result) {
|
||||
swal.resetDefaults()
|
||||
swal({
|
||||
title: 'All done!',
|
||||
confirmButtonClass: 'btn btn-confirm mt-2',
|
||||
html: 'Your answers: <pre>' +
|
||||
JSON.stringify(result) +
|
||||
'</pre>',
|
||||
confirmButtonText: 'Lovely!',
|
||||
showCancelButton: false
|
||||
})
|
||||
}, function () {
|
||||
swal.resetDefaults()
|
||||
})
|
||||
});
|
||||
|
||||
//Danger
|
||||
$('#dynamic-alert').click(function () {
|
||||
swal.queue([{
|
||||
title: 'Your public IP',
|
||||
confirmButtonText: 'Show my public IP',
|
||||
confirmButtonClass: 'btn btn-confirm mt-2',
|
||||
text: 'Your public IP will be received ' +
|
||||
'via AJAX request',
|
||||
showLoaderOnConfirm: true,
|
||||
preConfirm: function () {
|
||||
return new Promise(function (resolve) {
|
||||
$.get('https://api.ipify.org?format=json')
|
||||
.done(function (data) {
|
||||
swal.insertQueueStep(data.ip)
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}])
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
//init
|
||||
$.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function ($) {
|
||||
"use strict";
|
||||
$.SweetAlert.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Toastr js
|
||||
*/
|
||||
|
||||
$("#toastr-one").click(function () {
|
||||
$.toast({
|
||||
heading: 'Heads up!',
|
||||
text: 'This alert needs your attention, but it is not super important.',
|
||||
position: 'top-right',
|
||||
loaderBg: '#3b98b5',
|
||||
icon: 'info',
|
||||
hideAfter: 3000,
|
||||
stack: 1
|
||||
});
|
||||
});
|
||||
$("#toastr-two").click(function () {
|
||||
$.toast({
|
||||
heading: 'Holy guacamole!',
|
||||
text: 'You should check in on some of those fields below.',
|
||||
position: 'top-right',
|
||||
loaderBg: '#da8609',
|
||||
icon: 'warning',
|
||||
hideAfter: 3000,
|
||||
stack: 1
|
||||
});
|
||||
});
|
||||
$("#toastr-three").click(function () {
|
||||
$.toast({
|
||||
heading: 'Well done!',
|
||||
text: 'You successfully read this important alert message.',
|
||||
position: 'top-right',
|
||||
loaderBg: '#5ba035',
|
||||
icon: 'success',
|
||||
hideAfter: 3000,
|
||||
stack: 1
|
||||
});
|
||||
});
|
||||
$("#toastr-four").click(function () {
|
||||
$.toast({
|
||||
heading: 'Oh snap!',
|
||||
text: 'Change a few things up and try submitting again.',
|
||||
position: 'top-right',
|
||||
loaderBg: '#bf441d',
|
||||
icon: 'error',
|
||||
hideAfter: 3000,
|
||||
stack: 1
|
||||
});
|
||||
});
|
||||
|
||||
$("#toastr-five").click(function () {
|
||||
$.toast({
|
||||
heading: 'How to contribute?!',
|
||||
text: [
|
||||
'Fork the repository',
|
||||
'Improve/extend the functionality',
|
||||
'Create a pull request'
|
||||
],
|
||||
position: 'top-right',
|
||||
loaderBg: '#1ea69a',
|
||||
hideAfter: 3000,
|
||||
stack: 1
|
||||
})
|
||||
});
|
||||
|
||||
$("#toastr-six").click(function () {
|
||||
$.toast({
|
||||
heading: 'Can I add <em>icons</em>?',
|
||||
text: 'Yes! check this <a href="https://github.com/kamranahmedse/jquery-toast-plugin/commits/master">update</a>.',
|
||||
hideAfter: false,
|
||||
position: 'top-right',
|
||||
loaderBg: '#1ea69a',
|
||||
stack: 1
|
||||
})
|
||||
});
|
||||
|
||||
$("#toastr-seven").click(function () {
|
||||
$.toast({
|
||||
text: 'Set the `hideAfter` property to false and the toast will become sticky.',
|
||||
hideAfter: false,
|
||||
position: 'top-right',
|
||||
loaderBg: '#1ea69a',
|
||||
stack: 1
|
||||
})
|
||||
});
|
||||
|
||||
$("#toastr-eight").click(function () {
|
||||
$.toast({
|
||||
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
|
||||
heading: 'Fade transition',
|
||||
showHideTransition: 'fade',
|
||||
position: 'top-right',
|
||||
loaderBg: '#1ea69a',
|
||||
hideAfter: 3000,
|
||||
stack: 1
|
||||
})
|
||||
});
|
||||
|
||||
$("#toastr-nine").click(function () {
|
||||
$.toast({
|
||||
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
|
||||
heading: 'Slide transition',
|
||||
showHideTransition: 'slide',
|
||||
position: 'top-right',
|
||||
loaderBg: '#1ea69a',
|
||||
hideAfter: 3000,
|
||||
stack: 1
|
||||
})
|
||||
});
|
||||
|
||||
$("#toastr-ten").click(function () {
|
||||
$.toast({
|
||||
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
|
||||
heading: 'Plain transition',
|
||||
showHideTransition: 'plain',
|
||||
position: 'top-right',
|
||||
loaderBg: '#1ea69a',
|
||||
hideAfter: 3000,
|
||||
stack: 1
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Tooltips
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
$('#tooltip-hover').tooltipster();
|
||||
|
||||
$('#tooltip-events').tooltipster({
|
||||
trigger: 'click'
|
||||
});
|
||||
|
||||
$('#tooltip-html').tooltipster({
|
||||
content: $('<img src="assets/images/users/avatar-2.jpg" width="50" height="50" /><p style="text-align:left;"><strong>Soufflé chocolate cake powder.</strong> Applicake lollipop oat cake gingerbread.</p>'),
|
||||
// setting a same value to minWidth and maxWidth will result in a fixed width
|
||||
minWidth: 300,
|
||||
maxWidth: 300,
|
||||
position: 'right'
|
||||
});
|
||||
|
||||
$('#tooltip-touch').tooltipster({
|
||||
touchDevices: false
|
||||
});
|
||||
|
||||
$('#tooltip-animation').tooltipster({
|
||||
animation: 'grow'
|
||||
});
|
||||
|
||||
$('#tooltip-interaction').tooltipster({
|
||||
contentAsHTML: true,
|
||||
interactive: true
|
||||
});
|
||||
|
||||
// Multiple tooltips
|
||||
$('#tooltip-multiple').tooltipster({
|
||||
animation: 'swing',
|
||||
content: 'North',
|
||||
multiple: true,
|
||||
position: 'top'
|
||||
});
|
||||
|
||||
$('#tooltip-multiple').tooltipster({
|
||||
content: 'East',
|
||||
multiple: true,
|
||||
position: 'right'
|
||||
});
|
||||
|
||||
$('#tooltip-multiple').tooltipster({
|
||||
animation: 'grow',
|
||||
content: 'South',
|
||||
delay: 200,
|
||||
multiple: true,
|
||||
position: 'bottom'
|
||||
});
|
||||
|
||||
$('#tooltip-multiple').tooltipster({
|
||||
animation: 'fall',
|
||||
content: 'West',
|
||||
multiple: true,
|
||||
position: 'left'
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* Form wizard page
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var FormWizard = function() {};
|
||||
|
||||
FormWizard.prototype.createBasic = function($form_container) {
|
||||
$form_container.children("div").steps({
|
||||
headerTag: "h3",
|
||||
bodyTag: "section",
|
||||
transitionEffect: "slideLeft",
|
||||
onFinishing: function (event, currentIndex) {
|
||||
//NOTE: Here you can do form validation and return true or false based on your validation logic
|
||||
console.log("Form has been validated!");
|
||||
return true;
|
||||
},
|
||||
onFinished: function (event, currentIndex) {
|
||||
//NOTE: Submit the form, if all validation passed.
|
||||
console.log("Form can be submitted using submit method. E.g. $('#basic-form').submit()");
|
||||
$("#basic-form").submit();
|
||||
|
||||
}
|
||||
});
|
||||
return $form_container;
|
||||
},
|
||||
//creates vertical form
|
||||
FormWizard.prototype.createVertical = function($form_container) {
|
||||
$form_container.steps({
|
||||
headerTag: "h3",
|
||||
bodyTag: "section",
|
||||
transitionEffect: "fade",
|
||||
stepsOrientation: "vertical"
|
||||
});
|
||||
return $form_container;
|
||||
},
|
||||
FormWizard.prototype.init = function() {
|
||||
//initialzing various forms
|
||||
|
||||
//basic form
|
||||
this.createBasic($("#basic-form"));
|
||||
|
||||
//vertical form
|
||||
this.createVertical($("#wizard-vertical"));
|
||||
},
|
||||
//init
|
||||
$.FormWizard = new FormWizard, $.FormWizard.Constructor = FormWizard
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.FormWizard.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Theme: Highdmin - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Coderthemes
|
||||
* X editable
|
||||
*/
|
||||
|
||||
|
||||
$(function(){
|
||||
|
||||
//modify buttons style
|
||||
$.fn.editableform.buttons =
|
||||
'<button type="submit" class="btn btn-primary editable-submit btn-sm waves-effect waves-light"><i class="mdi mdi-check"></i></button>' +
|
||||
'<button type="button" class="btn btn-light editable-cancel btn-sm waves-effect"><i class="mdi mdi-close"></i></button>';
|
||||
|
||||
//Inline editables
|
||||
$('#inline-username').editable({
|
||||
type: 'text',
|
||||
pk: 1,
|
||||
name: 'username',
|
||||
title: 'Enter username',
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-firstname').editable({
|
||||
validate: function(value) {
|
||||
if($.trim(value) == '') return 'This field is required';
|
||||
},
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-sex').editable({
|
||||
prepend: "not selected",
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm',
|
||||
source: [
|
||||
{value: 1, text: 'Male'},
|
||||
{value: 2, text: 'Female'}
|
||||
],
|
||||
display: function(value, sourceData) {
|
||||
var colors = {"": "gray", 1: "green", 2: "blue"},
|
||||
elem = $.grep(sourceData, function(o){return o.value == value;});
|
||||
|
||||
if(elem.length) {
|
||||
$(this).text(elem[0].text).css("color", colors[value]);
|
||||
} else {
|
||||
$(this).empty();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#inline-group').editable({
|
||||
showbuttons: false,
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-status').editable({
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-dob').editable({
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-event').editable({
|
||||
placement: 'right',
|
||||
mode: 'inline',
|
||||
combodate: {
|
||||
firstItem: 'name'
|
||||
},
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-comments').editable({
|
||||
showbuttons: 'bottom',
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-fruits').editable({
|
||||
pk: 1,
|
||||
limit: 3,
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm',
|
||||
source: [
|
||||
{value: 1, text: 'Banana'},
|
||||
{value: 2, text: 'Peach'},
|
||||
{value: 3, text: 'Apple'},
|
||||
{value: 4, text: 'Watermelon'},
|
||||
{value: 5, text: 'Orange'}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user