initial commit
This commit is contained in:
@@ -0,0 +1,449 @@
|
||||
/*
|
||||
Name: Dashboard - Examples
|
||||
Written by: Okler Themes - (http://www.okler.net)
|
||||
Theme Version: 2.1.1
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
Sales Selector
|
||||
*/
|
||||
$('#salesSelector').themePluginMultiSelect().on('change', function() {
|
||||
var rel = $(this).val();
|
||||
$('#salesSelectorItems .chart').removeClass('chart-active').addClass('chart-hidden');
|
||||
$('#salesSelectorItems .chart[data-sales-rel="' + rel + '"]').addClass('chart-active').removeClass('chart-hidden');
|
||||
});
|
||||
|
||||
$('#salesSelector').trigger('change');
|
||||
|
||||
$('#salesSelectorWrapper').addClass('ready');
|
||||
|
||||
/*
|
||||
Flot: Sales 1
|
||||
*/
|
||||
if( $('#flotDashSales1').get(0) ) {
|
||||
var flotDashSales1 = $.plot('#flotDashSales1', flotDashSales1Data, {
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
},
|
||||
points: {
|
||||
show: true
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: 'rgba(0,0,0,0.1)',
|
||||
borderWidth: 1,
|
||||
labelMargin: 15,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
xaxis: {
|
||||
mode: 'categories',
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: true,
|
||||
tooltipOpts: {
|
||||
content: '%x: %y',
|
||||
shifts: {
|
||||
x: -30,
|
||||
y: 25
|
||||
},
|
||||
defaultTheme: false
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(this).on("styleSwitcher.modifyVars", function(ev) {
|
||||
flotDashSales1Data[0].color = ev.options.colorPrimary;
|
||||
flotDashSales1.setData(flotDashSales1Data);
|
||||
flotDashSales1.draw();
|
||||
});
|
||||
|
||||
if (typeof($.browser) != 'undefined') {
|
||||
if($.browser.mobile) {
|
||||
flotDashSales1Data[0].color = '#0088cc';
|
||||
flotDashSales1.setData(flotDashSales1Data);
|
||||
flotDashSales1.draw();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
Flot: Sales 2
|
||||
*/
|
||||
if( $('#flotDashSales2').get(0) ) {
|
||||
var flotDashSales2 = $.plot('#flotDashSales2', flotDashSales2Data, {
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
},
|
||||
points: {
|
||||
show: true
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: 'rgba(0,0,0,0.1)',
|
||||
borderWidth: 1,
|
||||
labelMargin: 15,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
xaxis: {
|
||||
mode: 'categories',
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: true,
|
||||
tooltipOpts: {
|
||||
content: '%x: %y',
|
||||
shifts: {
|
||||
x: -30,
|
||||
y: 25
|
||||
},
|
||||
defaultTheme: false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
Flot: Sales 3
|
||||
*/
|
||||
if( $('#flotDashSales3').get(0) ) {
|
||||
var flotDashSales3 = $.plot('#flotDashSales3', flotDashSales3Data, {
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
},
|
||||
points: {
|
||||
show: true
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: 'rgba(0,0,0,0.1)',
|
||||
borderWidth: 1,
|
||||
labelMargin: 15,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
xaxis: {
|
||||
mode: 'categories',
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: true,
|
||||
tooltipOpts: {
|
||||
content: '%x: %y',
|
||||
shifts: {
|
||||
x: -30,
|
||||
y: 25
|
||||
},
|
||||
defaultTheme: false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
Liquid Meter
|
||||
*/
|
||||
if( $('#meterSales').get(0) ) {
|
||||
$('#meterSales').liquidMeter({
|
||||
shape: 'circle',
|
||||
color: '#CCCCCC',
|
||||
background: '#F9F9F9',
|
||||
fontSize: '24px',
|
||||
fontWeight: '600',
|
||||
stroke: '#F2F2F2',
|
||||
textColor: '#333',
|
||||
liquidOpacity: 0.9,
|
||||
liquidPalette: ['#333'],
|
||||
speed: 3000,
|
||||
animate: !$.browser.mobile
|
||||
});
|
||||
}
|
||||
|
||||
if( $('#meterSalesSel').get(0) ) {
|
||||
$('#meterSalesSel a').on('click', function( ev ) {
|
||||
ev.preventDefault();
|
||||
|
||||
var val = $(this).data("val"),
|
||||
selector = $(this).parent(),
|
||||
items = selector.find('a');
|
||||
|
||||
items.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
// Update Meter Value
|
||||
$('#meterSales').liquidMeter('set', val);
|
||||
});
|
||||
|
||||
|
||||
$(this).on("styleSwitcher.modifyVars", function(ev) {
|
||||
$('#meterSales').liquidMeter('color', ev.options.colorPrimary);
|
||||
});
|
||||
|
||||
if (typeof($.browser) != 'undefined') {
|
||||
if($.browser.mobile) {
|
||||
$('#meterSales').liquidMeter('color', '#0088cc');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
Flot: Basic
|
||||
*/
|
||||
if( $('#flotDashBasic').get(0) ) {
|
||||
var flotDashBasic = $.plot('#flotDashBasic', flotDashBasicData, {
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
fill: true,
|
||||
lineWidth: 1,
|
||||
fillColor: {
|
||||
colors: [{
|
||||
opacity: 0.45
|
||||
}, {
|
||||
opacity: 0.45
|
||||
}]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: true
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: 'rgba(0,0,0,0.1)',
|
||||
borderWidth: 1,
|
||||
labelMargin: 15,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 200,
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
xaxis: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
tooltip: true,
|
||||
tooltipOpts: {
|
||||
content: '%s: Value of %x is %y',
|
||||
shifts: {
|
||||
x: -60,
|
||||
y: 25
|
||||
},
|
||||
defaultTheme: false
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(this).on("styleSwitcher.modifyVars", function(ev) {
|
||||
flotDashBasicData[0].color = ev.options.colorPrimary;
|
||||
flotDashBasic.setData(flotDashBasicData);
|
||||
flotDashBasic.draw();
|
||||
});
|
||||
|
||||
if (typeof($.browser) != 'undefined') {
|
||||
if($.browser.mobile) {
|
||||
flotDashBasicData[0].color = '#0088cc';
|
||||
flotDashBasic.setData(flotDashBasicData);
|
||||
flotDashBasic.draw();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
Flot: Real-Time
|
||||
*/
|
||||
(function() {
|
||||
if( $('#flotDashRealTime').get(0) ) {
|
||||
var data = [],
|
||||
totalPoints = 300;
|
||||
|
||||
function getRandomData() {
|
||||
|
||||
if (data.length > 0)
|
||||
data = data.slice(1);
|
||||
|
||||
// Do a random walk
|
||||
while (data.length < totalPoints) {
|
||||
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
|
||||
data.push(y);
|
||||
}
|
||||
|
||||
// Zip the generated y values with the x values
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]])
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
var flotDashRealTime = $.plot('#flotDashRealTime', [getRandomData()], {
|
||||
colors: ['#8CC9E8'],
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
fill: true,
|
||||
lineWidth: 1,
|
||||
fillColor: {
|
||||
colors: [{
|
||||
opacity: 0.45
|
||||
}, {
|
||||
opacity: 0.45
|
||||
}]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: false
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
grid: {
|
||||
borderColor: 'rgba(0,0,0,0.1)',
|
||||
borderWidth: 1,
|
||||
labelMargin: 15,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
xaxis: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
function update() {
|
||||
|
||||
flotDashRealTime.setData([getRandomData()]);
|
||||
|
||||
// Since the axes don't change, we don't need to call plot.setupGrid()
|
||||
flotDashRealTime.draw();
|
||||
setTimeout(update, ($('html').hasClass( 'mobile-device' ) ? 1000 : 30) );
|
||||
}
|
||||
|
||||
update();
|
||||
}
|
||||
})();
|
||||
|
||||
/*
|
||||
Sparkline: Bar
|
||||
*/
|
||||
if( $('#sparklineBarDash').get(0) ) {
|
||||
var sparklineBarDashOptions = {
|
||||
type: 'bar',
|
||||
width: '80',
|
||||
height: '55',
|
||||
barColor: '#CCCCCC',
|
||||
negBarColor: '#B20000'
|
||||
};
|
||||
|
||||
$("#sparklineBarDash").sparkline(sparklineBarDashData, sparklineBarDashOptions);
|
||||
|
||||
|
||||
$(this).on("styleSwitcher.modifyVars", function(ev) {
|
||||
$("#sparklineBarDash").sparkline(sparklineBarDashData, $.extend({}, sparklineBarDashOptions, {
|
||||
barColor: ev.options.colorPrimary
|
||||
}));
|
||||
});
|
||||
|
||||
if (typeof($.browser) != 'undefined') {
|
||||
if($.browser.mobile) {
|
||||
$("#sparklineBarDash").sparkline(sparklineBarDashData, $.extend({}, sparklineBarDashOptions, {
|
||||
barColor: '#0088cc'
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
Sparkline: Line
|
||||
*/
|
||||
if( $('#sparklineLineDash').get(0) ) {
|
||||
var sparklineLineDashOptions = {
|
||||
type: 'line',
|
||||
width: '80',
|
||||
height: '55',
|
||||
lineColor: '#CCCCCC'
|
||||
};
|
||||
|
||||
$("#sparklineLineDash").sparkline(sparklineLineDashData, sparklineLineDashOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
Map
|
||||
*/
|
||||
if( $('#vectorMapWorld').get(0) ) {
|
||||
var vectorMapDashOptions = {
|
||||
map: 'world_en',
|
||||
backgroundColor: null,
|
||||
color: '#FFF',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#0088CC',
|
||||
selectedRegions: ['US'],
|
||||
enableZoom: true,
|
||||
borderWidth:1,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#CCCCCC'],
|
||||
normalizeFunction: 'polynomial'
|
||||
};
|
||||
|
||||
$('#vectorMapWorld').vectorMap(vectorMapDashOptions);
|
||||
}
|
||||
|
||||
}).apply(this, [jQuery]);
|
||||
Reference in New Issue
Block a user