You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1021 lines
26 KiB
1021 lines
26 KiB
1 year ago
|
'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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|