Skip to content

Instantly share code, notes, and snippets.

@vvikramjhu
Last active December 9, 2015 19:41
Show Gist options
  • Save vvikramjhu/90c47b45f8ad74f117a4 to your computer and use it in GitHub Desktop.
Save vvikramjhu/90c47b45f8ad74f117a4 to your computer and use it in GitHub Desktop.
var pagefunction = function() {
var x = "myIncome"
var y = "$47,171"
window.onload = function show(){
//replaceValues(x, y);
}
getDataForDashboard();
$(".js-status-update a").click(function () {
var selText = $(this).text();
var $this = $(this);
$this.parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
$this.parents('.dropdown-menu').find('li').removeClass('active');
$this.parent().addClass('active');
});
/*
* TODO: add a way to add more todo's to list
*/
// initialize sortable
$("#sortable1, #sortable2").sortable({
handle: '.handle',
connectWith: ".todo",
update: countTasks
}).disableSelection();
// check and uncheck
$('.todo .checkbox > input[type="checkbox"]').click(function () {
var $this = $(this).parent().parent().parent();
if ($(this).prop('checked')) {
$this.addClass("complete");
// remove this if you want to undo a check list once checked
//$(this).attr("disabled", true);
$(this).parent().hide();
// once clicked - add class, copy to memory then remove and add to sortable3
$this.slideUp(500, function () {
$this.clone().prependTo("#sortable3").effect("highlight", {}, 800);
$this.remove();
countTasks();
});
} else {
// insert undo code here...
}
})
// count tasks
function countTasks() {
$('.todo-group-title').each(function () {
var $this = $(this);
$this.find(".num-of-tasks").text($this.next().find("li").size());
});
}
/*
* RUN PAGE GRAPHS
*/
// load all flot plugins
loadScript("js/plugin/flot/jquery.flot.cust.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.resize.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.time.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.tooltip.min.js", generatePageGraphs);
});
});
});
function generatePageGraphs() {
/* TAB 1: UPDATING CHART */
// For the demo we use generated data, but normally it would be coming from the server
var data = [],
totalPoints = 200,
$UpdatingChartColors = $("#updating-chart").css('color');
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;
var y = prev + Math.random() * 10 - 5;
if (y < 0)
y = 0;
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;
}
// setup control widget
var updateInterval = 1500;
$("#updating-chart").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
$(this).val("" + updateInterval);
}
});
// setup plot
var options = {
yaxis: {
min: 0,
max: 100
},
xaxis: {
min: 0,
max: 100
},
colors: [$UpdatingChartColors],
series: {
lines: {
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.4
}, {
opacity: 0
}]
},
steps: false
}
}
};
flot_updating_chart = $.plot($("#updating-chart"), [getRandomData()], options);
/* live switch */
$('input[type="checkbox"]#start_interval').click(function () {
if ($(this).prop('checked')) {
$on = true;
updateInterval = 1500;
update();
} else {
clearInterval(updateInterval);
$on = false;
}
});
function update() {
try {
if ($on == true) {
flot_updating_chart.setData([getRandomData()]);
flot_updating_chart.draw();
setTimeout(update, updateInterval);
} else {
clearInterval(updateInterval)
}
}
catch(err) {
clearInterval(updateInterval);
}
}
var $on = false;
/*end updating chart*/
/* TAB 2: Social Network */
$(function () {
// jQuery Flot Chart
var twitter = [
[1, 27],
[2, 34],
[3, 51],
[4, 48],
[5, 55],
[6, 65],
[7, 61],
[8, 70],
[9, 65],
[10, 75],
[11, 57],
[12, 59],
[13, 62]
],
facebook = [
[1, 25],
[2, 31],
[3, 45],
[4, 37],
[5, 38],
[6, 40],
[7, 47],
[8, 55],
[9, 43],
[10, 50],
[11, 47],
[12, 39],
[13, 47]
],
data = [{
label: "Twitter",
data: twitter,
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 0.13
}]
}
},
points: {
show: true
}
}, {
label: "Facebook",
data: facebook,
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 0.13
}]
}
},
points: {
show: true
}
}];
var options = {
grid: {
hoverable: true
},
colors: ["#568A89", "#3276B1"],
tooltip: true,
tooltipOpts: {
//content : "Value <b>$x</b> Value <span>$y</span>",
defaultTheme: false
},
xaxis: {
ticks: [
[1, "JAN"],
[2, "FEB"],
[3, "MAR"],
[4, "APR"],
[5, "MAY"],
[6, "JUN"],
[7, "JUL"],
[8, "AUG"],
[9, "SEP"],
[10, "OCT"],
[11, "NOV"],
[12, "DEC"],
[13, "JAN+1"]
]
},
yaxes: {
}
};
flot_statsChart = $.plot($("#statsChart"), data, options);
});
// END TAB 2
// TAB THREE GRAPH //
/* TAB 3: Revenew */
$(function () {
var trgt = [
[1354586000000, 153],
[1364587000000, 658],
[1374588000000, 198],
[1384589000000, 663],
[1394590000000, 801],
[1404591000000, 1080],
[1414592000000, 353],
[1424593000000, 749],
[1434594000000, 523],
[1444595000000, 258],
[1454596000000, 688],
[1464597000000, 364]
],
prft = [
[1354586000000, 53],
[1364587000000, 65],
[1374588000000, 98],
[1384589000000, 83],
[1394590000000, 980],
[1404591000000, 808],
[1414592000000, 720],
[1424593000000, 674],
[1434594000000, 23],
[1444595000000, 79],
[1454596000000, 88],
[1464597000000, 36]
],
sgnups = [
[1354586000000, 647],
[1364587000000, 435],
[1374588000000, 784],
[1384589000000, 346],
[1394590000000, 487],
[1404591000000, 463],
[1414592000000, 479],
[1424593000000, 236],
[1434594000000, 843],
[1444595000000, 657],
[1454596000000, 241],
[1464597000000, 341]
],
toggles = $("#rev-toggles"),
target = $("#flotcontainer");
var data = [{
label: "Target Profit",
data: trgt,
bars: {
show: true,
align: "center",
barWidth: 30 * 30 * 60 * 1000 * 80
}
}, {
label: "Actual Profit",
data: prft,
color: '#3276B1',
lines: {
show: true,
lineWidth: 3
},
points: {
show: true
}
}, {
label: "Actual Signups",
data: sgnups,
color: '#71843F',
lines: {
show: true,
lineWidth: 1
},
points: {
show: true
}
}]
var options = {
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
//content: '%x - %y',
//dateFormat: '%b %y',
defaultTheme: false
},
xaxis: {
mode: "time"
},
yaxes: {
tickFormatter: function (val, axis) {
return "$" + val;
},
max: 1200
}
};
flot_multigraph = null;
function plotNow() {
var d = [];
toggles.find(':checkbox').each(function () {
if ($(this).is(':checked')) {
d.push(data[$(this).attr("name").substr(4, 1)]);
}
});
if (d.length > 0) {
if (flot_multigraph) {
flot_multigraph.setData(d);
flot_multigraph.draw();
} else {
flot_multigraph = $.plot(target, d, options);
}
}
};
toggles.find(':checkbox').on('change', function () {
plotNow();
});
plotNow()
});
}
/*
* VECTOR MAP
*/
data_array = {
"US": 4977,
"AU": 4873,
"IN": 3671,
"BR": 2476,
"TR": 1476,
"CN": 146,
"CA": 134,
"BD": 100
};
// Load Map dependency 1 then call for dependency 2 and then run renderVectorMap function
loadScript("js/plugin/vectormap/jquery-jvectormap-1.2.2.min.js", function(){
loadScript("js/plugin/vectormap/jquery-jvectormap-world-mill-en.js", renderVectorMap);
});
function renderVectorMap() {
$('#vector-map').vectorMap({
map: 'world_mill_en',
backgroundColor: '#fff',
regionStyle: {
initial: {
fill: '#c4c4c4'
},
hover: {
"fill-opacity": 1
}
},
series: {
regions: [{
values: data_array,
scale: ['#85a8b6', '#4d7686'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function (e, el, code) {
if (typeof data_array[code] == 'undefined') {
e.preventDefault();
} else {
var countrylbl = data_array[code];
el.html(el.html() + ': ' + countrylbl + ' visits');
}
}
});
}
/*
* FULL CALENDAR JS
*/
// Load Calendar dependency then setup calendar
loadScript("js/plugin/moment/moment.min.js", function(){
loadScript("js/plugin/fullcalendar/jquery.fullcalendar.min.js", setupCalendar);
});
function setupCalendar() {
if ($("#calendar").length) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
calendar = $('#calendar').fullCalendar({
editable: true,
draggable: true,
selectable: false,
selectHelper: true,
unselectAuto: false,
disableResizing: false,
header: {
left: 'title', //,today
center: 'prev, next, today',
right: 'month, agendaWeek, agenDay' //month, agendaDay,
},
select: function (start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay
}, true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
events: [{
title: 'All Day Event',
start: new Date(y, m, 1),
description: 'long description',
className: ["event", "bg-color-greenLight"],
icon: 'fa-check'
}, {
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
className: ["event", "bg-color-red"],
icon: 'fa-lock'
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
className: ["event", "bg-color-blue"],
icon: 'fa-clock-o'
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d + 4, 16, 0),
allDay: false,
className: ["event", "bg-color-blue"],
icon: 'fa-clock-o'
}, {
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
className: ["event", "bg-color-darken"]
}, {
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
className: ["event", "bg-color-darken"]
}, {
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
className: ["event", "bg-color-darken"]
}, {
title: 'Smartadmin Open Day',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
className: ["event", "bg-color-darken"]
}],
eventRender: function (event, element, icon) {
if (!event.description == "") {
element.find('.fc-event-title').append("<br/><span class='ultra-light'>" + event.description +
"</span>");
}
if (!event.icon == "") {
element.find('.fc-event-title').append("<i class='air air-top-right fa " + event.icon +
" '></i>");
}
}
});
};
/* hide default buttons */
$('.fc-header-right, .fc-header-center').hide();
}
// calendar prev
$('#calendar-buttons #btn-prev').click(function () {
$('.fc-button-prev').click();
return false;
});
// calendar next
$('#calendar-buttons #btn-next').click(function () {
$('.fc-button-next').click();
return false;
});
// calendar today
$('#calendar-buttons #btn-today').click(function () {
$('.fc-button-today').click();
return false;
});
// calendar month
$('#mt').click(function () {
$('#calendar').fullCalendar('changeView', 'month');
});
// calendar agenda week
$('#ag').click(function () {
$('#calendar').fullCalendar('changeView', 'agendaWeek');
});
// calendar agenda day
$('#td').click(function () {
$('#calendar').fullCalendar('changeView', 'agendaDay');
});
/*
* CHAT
*/
var filter_input = $('#filter-chat-list'),
chat_users_container = $('#chat-container > .chat-list-body'),
chat_users = $('#chat-users'),
chat_list_btn = $('#chat-container > .chat-list-open-close'),
chat_body = $('#chat-body');
/*
* LIST FILTER (CHAT)
*/
// custom css expression for a case-insensitive contains()
jQuery.expr[':'].Contains = function (a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function listFilter(list) {
// header is any element, list is an unordered list
// create and add the filter form to the header
filter_input.change(function () {
var filter = $(this).val();
if (filter) {
// this finds all links in a list that contain the input,
// and hide the ones not containing the input while showing the ones that do
chat_users.find("a:not(:Contains(" + filter + "))").parent().slideUp();
chat_users.find("a:Contains(" + filter + ")").parent().slideDown();
} else {
chat_users.find("li").slideDown();
}
return false;
}).keyup(function () {
// fire the above change event after every letter
$(this).change();
});
}
// on dom ready
listFilter(chat_users);
// open chat list
chat_list_btn.click(function () {
$(this).parent('#chat-container').toggleClass('open');
})
chat_body.animate({
scrollTop: chat_body[0].scrollHeight
}, 500);
};
function runAllCharts() {
if ($.fn.sparkline) {
var a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z, _, aa, ba, ca, da, ea, fa, ga, ha, ia, ja, ka, la, ma, na, oa, pa, qa, ra, sa;
$(".sparkline:not(:has(>canvas))").each(function () {
var ta = $(this), ua = ta.data("sparkline-type") || "bar";
if ("bar" == ua && (a = ta.data("sparkline-bar-color") || ta.css("color") || "#0000f0", b = ta.data("sparkline-height") || "26px", c = ta.data("sparkline-barwidth") || 5, d = ta.data("sparkline-barspacing") || 2, e = ta.data("sparkline-negbar-color") || "#A90329", f = ta.data("sparkline-barstacked-color") || ["#A90329", "#0099c6", "#98AA56", "#da532c", "#4490B1", "#6E9461", "#990099", "#B4CAD3"], ta.sparkline("html", {"barColor": a, "type": ua, "height": b, "barWidth": c, "barSpacing": d, "stackedBarColor": f, "negBarColor": e, "zeroAxis": "false"}), ta = null), "line" == ua && (b = ta.data("sparkline-height") || "20px", aa = ta.data("sparkline-width") || "90px", g = ta.data("sparkline-line-color") || ta.css("color") || "#0000f0", h = ta.data("sparkline-line-width") || 1, i = ta.data("fill-color") || "#c0d0f0", j = ta.data("sparkline-spot-color") || "#f08000", k = ta.data("sparkline-minspot-color") || "#ed1c24", l = ta.data("sparkline-maxspot-color") || "#f08000", m = ta.data("sparkline-highlightspot-color") || "#50f050", n = ta.data("sparkline-highlightline-color") || "f02020", o = ta.data("sparkline-spotradius") || 1.5, thisChartMinYRange = ta.data("sparkline-min-y") || "undefined", thisChartMaxYRange = ta.data("sparkline-max-y") || "undefined", thisChartMinXRange = ta.data("sparkline-min-x") || "undefined", thisChartMaxXRange = ta.data("sparkline-max-x") || "undefined", thisMinNormValue = ta.data("min-val") || "undefined", thisMaxNormValue = ta.data("max-val") || "undefined", thisNormColor = ta.data("norm-color") || "#c0c0c0", thisDrawNormalOnTop = ta.data("draw-normal") || !1, ta.sparkline("html", {"type": "line", "width": aa, "height": b, "lineWidth": h, "lineColor": g, "fillColor": i, "spotColor": j, "minSpotColor": k, "maxSpotColor": l, "highlightSpotColor": m, "highlightLineColor": n, "spotRadius": o, "chartRangeMin": thisChartMinYRange, "chartRangeMax": thisChartMaxYRange, "chartRangeMinX": thisChartMinXRange, "chartRangeMaxX": thisChartMaxXRange, "normalRangeMin": thisMinNormValue, "normalRangeMax": thisMaxNormValue, "normalRangeColor": thisNormColor, "drawNormalOnTop": thisDrawNormalOnTop}), ta = null), "pie" == ua && (p = ta.data("sparkline-piecolor") || ["#B4CAD3", "#4490B1", "#98AA56", "#da532c", "#6E9461", "#0099c6", "#990099", "#717D8A"], q = ta.data("sparkline-piesize") || 90, r = ta.data("border-color") || "#45494C", s = ta.data("sparkline-offset") || 0, ta.sparkline("html", {"type": "pie", "width": q, "height": q, "tooltipFormat": '<span style="color: {{color}}">&#9679;</span> ({{percent.1}}%)', "sliceColors": p, "borderWidth": 1, "offset": s, "borderColor": r}), ta = null), "box" == ua && (t = ta.data("sparkline-width") || "auto", u = ta.data("sparkline-height") || "auto", v = ta.data("sparkline-boxraw") || !1, w = ta.data("sparkline-targetval") || "undefined", x = ta.data("sparkline-min") || "undefined", y = ta.data("sparkline-max") || "undefined", z = ta.data("sparkline-showoutlier") || !0, A = ta.data("sparkline-outlier-iqr") || 1.5, B = ta.data("sparkline-spotradius") || 1.5, C = ta.css("color") || "#000000", D = ta.data("fill-color") || "#c0d0f0", E = ta.data("sparkline-whis-color") || "#000000", F = ta.data("sparkline-outline-color") || "#303030", G = ta.data("sparkline-outlinefill-color") || "#f0f0f0", H = ta.data("sparkline-outlinemedian-color") || "#f00000", I = ta.data("sparkline-outlinetarget-color") || "#40a020", ta.sparkline("html", {"type": "box", "width": t, "height": u, "raw": v, "target": w, "minValue": x, "maxValue": y, "showOutliers": z, "outlierIQR": A, "spotRadius": B, "boxLineColor": C, "boxFillColor": D, "whiskerColor": E, "outlierLineColor": F, "outlierFillColor": G, "medianColor": H, "targetColor": I}), ta = null), "bullet" == ua) {
var va = ta.data("sparkline-height") || "auto";
J = ta.data("sparkline-width") || 2, K = ta.data("sparkline-bullet-color") || "#ed1c24", L = ta.data("sparkline-performance-color") || "#3030f0", M = ta.data("sparkline-bulletrange-color") || ["#d3dafe", "#a8b6ff", "#7f94ff"], ta.sparkline("html", {"type": "bullet", "height": va, "targetWidth": J, "targetColor": K, "performanceColor": L, "rangeColors": M}), ta = null
}
"discrete" == ua && (N = ta.data("sparkline-height") || 26, O = ta.data("sparkline-width") || 50, P = ta.css("color"), Q = ta.data("sparkline-line-height") || 5, R = ta.data("sparkline-threshold") || "undefined", S = ta.data("sparkline-threshold-color") || "#ed1c24", ta.sparkline("html", {"type": "discrete", "width": O, "height": N, "lineColor": P, "lineHeight": Q, "thresholdValue": R, "thresholdColor": S}), ta = null), "tristate" == ua && (T = ta.data("sparkline-height") || 26, U = ta.data("sparkline-posbar-color") || "#60f060", V = ta.data("sparkline-negbar-color") || "#f04040", W = ta.data("sparkline-zerobar-color") || "#909090", X = ta.data("sparkline-barwidth") || 5, Y = ta.data("sparkline-barspacing") || 2, Z = ta.data("sparkline-zeroaxis") || !1, ta.sparkline("html", {"type": "tristate", "height": T, "posBarColor": _, "negBarColor": V, "zeroBarColor": W, "barWidth": X, "barSpacing": Y, "zeroAxis": Z}), ta = null), "compositebar" == ua && (b = ta.data("sparkline-height") || "20px", aa = ta.data("sparkline-width") || "100%", c = ta.data("sparkline-barwidth") || 3, h = ta.data("sparkline-line-width") || 1, g = ta.data("data-sparkline-linecolor") || "#ed1c24", _ = ta.data("data-sparkline-barcolor") || "#333333", ta.sparkline(ta.data("sparkline-bar-val"), {"type": "bar", "width": aa, "height": b, "barColor": _, "barWidth": c}), ta.sparkline(ta.data("sparkline-line-val"), {"width": aa, "height": b, "lineColor": g, "lineWidth": h, "composite": !0, "fillColor": !1}), ta = null), "compositeline" == ua && (b = ta.data("sparkline-height") || "20px", aa = ta.data("sparkline-width") || "90px", ba = ta.data("sparkline-bar-val"), ca = ta.data("sparkline-bar-val-spots-top") || null, da = ta.data("sparkline-bar-val-spots-bottom") || null, ea = ta.data("sparkline-line-width-top") || 1, fa = ta.data("sparkline-line-width-bottom") || 1, ga = ta.data("sparkline-color-top") || "#333333", ha = ta.data("sparkline-color-bottom") || "#ed1c24", ia = ta.data("sparkline-spotradius-top") || 1.5, ja = ta.data("sparkline-spotradius-bottom") || ia, j = ta.data("sparkline-spot-color") || "#f08000", ka = ta.data("sparkline-minspot-color-top") || "#ed1c24", la = ta.data("sparkline-maxspot-color-top") || "#f08000", ma = ta.data("sparkline-minspot-color-bottom") || ka, na = ta.data("sparkline-maxspot-color-bottom") || la, oa = ta.data("sparkline-highlightspot-color-top") || "#50f050", pa = ta.data("sparkline-highlightline-color-top") || "#f02020", qa = ta.data("sparkline-highlightspot-color-bottom") || oa, thisHighlightLineColor2 = ta.data("sparkline-highlightline-color-bottom") || pa, ra = ta.data("sparkline-fillcolor-top") || "transparent", sa = ta.data("sparkline-fillcolor-bottom") || "transparent", ta.sparkline(ba, {"type": "line", "spotRadius": ia, "spotColor": j, "minSpotColor": ka, "maxSpotColor": la, "highlightSpotColor": oa, "highlightLineColor": pa, "valueSpots": ca, "lineWidth": ea, "width": aa, "height": b, "lineColor": ga, "fillColor": ra}), ta.sparkline(ta.data("sparkline-line-val"), {"type": "line", "spotRadius": ja, "spotColor": j, "minSpotColor": ma, "maxSpotColor": na, "highlightSpotColor": qa, "highlightLineColor": thisHighlightLineColor2, "valueSpots": da, "lineWidth": fa, "width": aa, "height": b, "lineColor": ha, "composite": !0, "fillColor": sa}), ta = null)
})
}
$.fn.easyPieChart && $(".easy-pie-chart").each(function () {
var a = $(this), b = a.css("color") || a.data("pie-color"), c = a.data("pie-track-color") || "rgba(0,0,0,0.04)", d = parseInt(a.data("pie-size")) || 25;
a.easyPieChart({"barColor": b, "trackColor": c, "scaleColor": !1, "lineCap": "butt", "lineWidth": parseInt(d / 8.5), "animate": 1500, "rotate": -90, "size": d, "onStep": function (a, b, c) {
$(this.el).find(".percent").text(Math.round(c))
}}), a = null
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment