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.
1020 lines
26 KiB
1020 lines
26 KiB
'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; |
|
} |
|
} |
|
}); |
|
|
|
}); |
|
}
|
|
|