'use strict';
$(document).ready(function() {
// pageview and prod sale end
floatchart()
$(window).on('resize', function() {
floatchart();
});
$('#mobile-collapse').on('click', function() {
setTimeout(function() {
floatchart();
}, 700);
});
// Round Chart statustc card start
var chart = new Chartist.Pie('#status-round-1', {
series: [5, 7]
}, {
donut: true,
donutWidth: 5,
showLabel: false
});
var chart = new Chartist.Pie('#status-round-2', {
series: [7, 5]
}, {
donut: true,
donutWidth: 5,
showLabel: false
});
var chart = new Chartist.Pie('#status-round-3', {
series: [11, 5]
}, {
donut: true,
donutWidth: 5,
showLabel: false
});
var chart = new Chartist.Pie('#status-round-4', {
series: [11, 10]
}, {
donut: true,
donutWidth: 5,
showLabel: false
});
// Round Chart statustc card end
// Total revenue start
var chart = new Chartist.Pie('#tot-rev-chart', {
series: [11, 10]
}, {
donut: true,
donutWidth: 5,
showLabel: false
});
// Total revenue end
// seo ecommerce start
$(function() {});
// seo ecommerce end
// sale-diff
var chart = AmCharts.makeChart("sale-diff", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"precision": 2,
"valueAxes": [{
"id": "v1",
"fontSize": 0,
"axisAlpha": 0,
"lineAlpha": 0,
"gridAlpha": 0,
"position": "left",
"autoGridCount": false,
"labelFunction": function(value) {
return "$" + Math.round(value) + "M";
}
}],
"graphs": [{
"id": "g3",
"valueAxis": "v1",
"lineColor": "#2ed8b6",
"fillColors": "#2ed8b6",
"fillAlphas": 0.3,
"type": "column",
"title": "Actual Sales",
"valueField": "sales2",
"columnWidth": 0.5,
"legendValueText": "$[[value]]M",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>"
}, {
"id": "g4",
"valueAxis": "v1",
"lineColor": "#2ed8b6",
"fillColors": "#2ed8b6",
"fillAlphas": 1,
"type": "column",
"title": "Target Sales",
"valueField": "sales1",
"columnWidth": 0.5,
"legendValueText": "$[[value]]M",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>$[[value]]M</b>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"lineAlpha": 0,
"gridAlpha": 0,
"minorGridEnabled": true,
},
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"export": {
"enabled": true
},
"dataProvider": [{
"date": "2013-01-16",
"sales1": 5,
"sales2": 8
}, {
"date": "2013-01-17",
"sales1": 4,
"sales2": 6
}, {
"date": "2013-01-18",
"sales1": 5,
"sales2": 2
}, {
"date": "2013-01-19",
"sales1": 8,
"sales2": 9
}, {
"date": "2013-01-20",
"sales1": 9,
"sales2": 6
}]
});
// deal-analytic-chart
var chart = AmCharts.makeChart("deal-analytic-chart", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"precision": 2,
"valueAxes": [{
"id": "v1",
"position": "left",
"autoGridCount": false,
"labelFunction": function(value) {
return "$" + Math.round(value) + "M";
}
}, {
"id": "v2",
"gridAlpha": 0,
"autoGridCount": false
}],
"graphs": [{
"id": "g1",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 3,
"lineColor": "#2ed8b6",
"title": "Market Days",
"useLineColorForBulletBorder": true,
"valueField": "market1",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}, {
"id": "g2",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 3,
"lineColor": "#e95753",
"title": "Market Days ALL",
"useLineColorForBulletBorder": true,
"valueField": "market2",
"balloonText": "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"legend": {
"useGraphSettings": true,
"position": "top"
},
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"dataProvider": [{
"date": "2013-01-16",
"market1": 71,
"market2": 75
}, {
"date": "2013-01-17",
"market1": 80,
"market2": 84
}, {
"date": "2013-01-18",
"market1": 78,
"market2": 83
}, {
"date": "2013-01-19",
"market1": 85,
"market2": 88
}, {
"date": "2013-01-20",
"market1": 87,
"market2": 85
}, {
"date": "2013-01-21",
"market1": 97,
"market2": 88
}, {
"date": "2013-01-22",
"market1": 93,
"market2": 88
}, {
"date": "2013-01-23",
"market1": 85,
"market2": 80
}, {
"date": "2013-01-24",
"market1": 90,
"market2": 85
}]
});
// allocation map start
var map = AmCharts.makeChart("allocation-map", {
"type": "map",
"theme": "light",
"colorSteps": 10,
"dataProvider": {
"map": "usaLow",
"areas": [{
"id": "US-AL",
"value": 4447100
}, {
"id": "US-AK",
"value": 626932
}, {
"id": "US-AZ",
"value": 5130632
}, {
"id": "US-AR",
"value": 2673400
}, {
"id": "US-CA",
"value": 33871648
}, {
"id": "US-CO",
"value": 4301261
}, {
"id": "US-CT",
"value": 3405565
}, {
"id": "US-DE",
"value": 783600
}, {
"id": "US-FL",
"value": 15982378
}, {
"id": "US-GA",
"value": 8186453
}, {
"id": "US-HI",
"value": 1211537
}, {
"id": "US-ID",
"value": 1293953
}, {
"id": "US-IL",
"value": 12419293
}, {
"id": "US-IN",
"value": 6080485
}, {
"id": "US-IA",
"value": 2926324
}, {
"id": "US-KS",
"value": 2688418
}, {
"id": "US-KY",
"value": 4041769
}, {
"id": "US-LA",
"value": 4468976
}, {
"id": "US-ME",
"value": 1274923
}, {
"id": "US-MD",
"value": 5296486
}, {
"id": "US-MA",
"value": 6349097
}, {
"id": "US-MI",
"value": 9938444
}, {
"id": "US-MN",
"value": 4919479
}, {
"id": "US-MS",
"value": 2844658
}, {
"id": "US-MO",
"value": 5595211
}, {
"id": "US-MT",
"value": 902195
}, {
"id": "US-NE",
"value": 1711263
}, {
"id": "US-NV",
"value": 1998257
}, {
"id": "US-NH",
"value": 1235786
}, {
"id": "US-NJ",
"value": 8414350
}, {
"id": "US-NM",
"value": 1819046
}, {
"id": "US-NY",
"value": 18976457
}, {
"id": "US-NC",
"value": 8049313
}, {
"id": "US-ND",
"value": 642200
}, {
"id": "US-OH",
"value": 11353140
}, {
"id": "US-OK",
"value": 3450654
}, {
"id": "US-OR",
"value": 3421399
}, {
"id": "US-PA",
"value": 12281054
}, {
"id": "US-RI",
"value": 1048319
}, {
"id": "US-SC",
"value": 4012012
}, {
"id": "US-SD",
"value": 754844
}, {
"id": "US-TN",
"value": 5689283
}, {
"id": "US-TX",
"value": 20851820
}, {
"id": "US-UT",
"value": 2233169
}, {
"id": "US-VT",
"value": 608827
}, {
"id": "US-VA",
"value": 7078515
}, {
"id": "US-WA",
"value": 5894121
}, {
"id": "US-WV",
"value": 1808344
}, {
"id": "US-WI",
"value": 5363675
}, {
"id": "US-WY",
"value": 493782
}]
},
"areasSettings": {
"autoZoom": true
},
"export": {
"enabled": true
}
});
var chart = AmCharts.makeChart("allocation-chart", {
"type": "pie",
"startDuration": 0,
"theme": "light",
"labelRadius": 0,
"pullOutRadius": 0,
"labelText": "",
"colorField": "color",
"legend": {
// "enabled":false,
},
"innerRadius": "70%",
"dataProvider": [{
"country": "Lithuania",
"litres": 501.9,
"color": "#85C5E3"
}, {
"country": "Czech Republic",
"litres": 301.9,
"color": "#6AA3C4"
}, {
"country": "Ireland",
"litres": 201.1,
"color": "#6097B9"
}, {
"country": "india",
"litres": 220.1,
"color": "#4E81A4"
}],
"valueField": "litres",
});
// allocation map end
});
function floatchart() {
//flot options
var options = {
legend: {
show: false
},
series: {
label: "",
curvedLines: {
active: true,
nrSplinePoints: 20
},
},
tooltip: {
show: true,
content: "x : %x | y : %y"
},
grid: {
hoverable: true,
borderWidth: 0,
labelMargin: 0,
axisMargin: 0,
minBorderMargin: 0,
},
yaxis: {
min: 0,
max: 30,
color: 'transparent',
font: {
size: 0,
}
},
xaxis: {
color: 'transparent',
font: {
size: 0,
}
}
};
$.plot($("#pbc-1"), [{
data: [
[0, 8],
[1, 10],
[2, 20],
[3, 10],
[4, 27],
[5, 15],
[6, 20],
[7, 24],
[8, 20]
],
color: "#4099ff",
bars: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
},
barWidth: 0.3,
align: 'center',
horizontal: false
},
points: {
show: false
},
}], options);
$.plot($("#pbc-2"), [{
data: [
[0, 20],
[1, 24],
[2, 20],
[3, 15],
[4, 27],
[5, 10],
[6, 18],
[7, 22],
[8, 15]
],
color: "#FF5370",
bars: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
},
barWidth: 0.3,
align: 'center',
horizontal: false
},
points: {
show: false
},
}], options);
$.plot($("#pbc-3"), [{
data: [
[0, 8],
[1, 10],
[2, 20],
[3, 10],
[4, 27],
[5, 15],
[6, 20],
[7, 12],
[8, 6]
],
color: "#4099ff",
bars: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
},
barWidth: 0.3,
align: 'center',
horizontal: false
},
points: {
show: false
},
}], options);
$.plot($("#pbc-4"), [{
data: [
[0, 20],
[1, 24],
[2, 20],
[3, 15],
[4, 27],
[5, 10],
[6, 18],
[7, 22],
[8, 15]
],
color: "#2ed8b6",
bars: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
},
barWidth: 0.3,
align: 'center',
horizontal: false
},
points: {
show: false
},
}], options);
$.plot($("#pbc-5"), [{
data: [
[0, 20],
[1, 24],
[2, 20],
[3, 15],
[4, 27],
[5, 10],
[6, 18],
[7, 22],
[8, 15]
],
color: "#FF5370",
bars: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
},
barWidth: 0.3,
align: 'center',
horizontal: false
},
points: {
show: false
},
}], options);
$.plot($("#pbc-6"), [{
data: [
[0, 20],
[1, 24],
[2, 20],
[3, 15],
[4, 27],
[5, 10],
[6, 18],
[7, 22],
[8, 15]
],
color: "#FF5370",
bars: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
},
barWidth: 0.3,
align: 'center',
horizontal: false
},
points: {
show: false
},
}], options);
//real-time update
$(function() {
// We use an inline data source in the example, usually data would
// be fetched from a server
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;
}
// Set up the control widget
var updateInterval = 30;
$("#updateInterval").val(updateInterval).change(function() {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 2000) {
updateInterval = 2000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#realtime-profit", [getRandomData()], {
lines: {
show: true,
fill: true,
lineWidth: 1,
borderWidth: 0,
},
shadowSize: 5,
highlightColor: "rgba(0,0,0,0.5)",
points: {
show: true,
radius: 0,
fill: true,
fillColor: '#fff'
},
curvedLines: {
apply: false,
},
legend: {
show: false
},
series: {
label: "",
color: "#2ed8b6",
curvedLines: {
active: true,
nrSplinePoints: 20
},
},
tooltip: {
show: true,
content: "x : %x | y : %y"
},
grid: {
hoverable: true,
borderWidth: 0,
minBorderMargin: 0,
},
yaxis: {
min: 0,
max: 100,
},
xaxis: {
font: {
size: 0,
}
}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
$(function() {
// sale start
$.plot($("#sec-ecommerce-chart-line"), [{
data: [
[0, 18],
[1, 10],
[2, 20],
[3, 10],
[4, 27],
[5, 15],
[6, 20],
[7, 24],
[8, 20],
[9, 16],
[10, 18],
[11, 10],
[12, 20],
[13, 10],
[14, 27],
],
color: "#fff",
lines: {
show: true,
fill: false,
lineWidth: 2
},
points: {
show: true,
radius: 3,
fill: true,
fillColor: '#fff'
},
curvedLines: {
apply: false,
}
}], options);
$.plot($("#sec-ecommerce-chart-bar"), [{
data: [
[0, 18],
[1, 10],
[2, 20],
[3, 10],
[4, 27],
[5, 15],
[6, 20],
[7, 24],
[8, 20],
[9, 16],
[10, 18],
[11, 10],
[12, 20],
[13, 10],
[14, 27],
],
color: "#5ffddd",
bars: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 1
}, {
opacity: 1
}]
},
barWidth: 0.6,
align: 'center',
horizontal: false
},
points: {
show: false
},
}], options);
});
// sale Income start
$.plot($("#sal-income"), [{
data: [
[0, 25],
[1, 15],
[2, 20],
[3, 27],
[4, 10],
[5, 20],
[6, 10],
[7, 26],
[8, 20],
[9, 10],
[10, 25],
[11, 27],
[12, 12],
[13, 26],
],
color: "#4099ff",
lines: {
show: true,
fill: true,
lineWidth: 3
},
points: {
show: false,
},
curvedLines: {
apply: true,
}
}], options);
$.plot($("#rent-income"), [{
data: [
[0, 25],
[1, 15],
[2, 25],
[3, 27],
[4, 10],
[5, 20],
[6, 15],
[7, 26],
[8, 20],
[9, 13],
[10, 25],
[11, 27],
[12, 12],
[13, 1],
],
color: "#2ed8b6",
lines: {
show: true,
fill: true,
lineWidth: 3
},
points: {
show: false,
},
curvedLines: {
apply: true,
}
}], options);
$.plot($("#income-analysis"), [{
data: [
[0, 25],
[1, 30],
[2, 25],
[3, 27],
[4, 10],
[5, 20],
[6, 15],
[7, 26],
[8, 10],
[9, 13],
[10, 25],
[11, 27],
[12, 12],
[13, 27],
],
color: "#FF5370",
lines: {
show: true,
fill: true,
lineWidth: 3
},
points: {
show: false,
},
curvedLines: {
apply: true,
}
}], options);
$(window).on('resize',function() {
$(".dial").knob({
draw: function() {
// "tron" case
if (this.$.data('skin') == 'tron') {
this.cursorExt = 0.3;
var a = this.arc(this.cv) // Arc
,
pa // Previous arc
, r = 1;
this.g.lineWidth = this.lineWidth;
if (this.o.displayPrevious) {
pa = this.arc(this.v);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
});
$(document).ready(function() {
/*× Overloaded 'draw' method*/
$(".dial").knob({
draw: function() {
// "tron" case
if (this.$.data('skin') == 'tron') {
this.cursorExt = 0.3;
var a = this.arc(this.cv) // Arc
,
pa // Previous arc
, r = 1;
this.g.lineWidth = this.lineWidth;
if (this.o.displayPrevious) {
pa = this.arc(this.v);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
});
}