// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
// (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
// m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
// })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
// ga('create', 'UA-104952515-1', 'auto');
// ga('send', 'pageview');
$("#login").click(function (event) {
submitJson.username = $("#username").val();
submitJson.password = $("#password").val();
submitJson.logintype = $('#logintype').combobox("getValue");
$.ajax({
type: 'POST',
url: 'handler/LoginHanlder.ashx',
data: { 'submitJson': JSON.stringify(submitJson) },
async: false,
success: function (msg) {
resultJson = JSON.parse(msg);
if (resultJson.result=="true") {
//location.href = resultJson.defaultpage;
location.href = "default.aspx";
// alert(resultJson.msg);
}
else {
alert(resultJson.msg);
}
},
error: function (jqXHR, exception) {
JasonError("Login.aspx --> handler/LoginHanlder.ashx", jqXHR, exception);
}
});
});
// 取得日期、時間
showtime();
function showtime(){
// 顯示的日期時間 格式為 0000-00-00 00:00:00
var time = $('.time');
var today = $('.today')
var now = new Date();
var y=now.getFullYear();
var M=now.getMonth()+1>9?now.getMonth()+1:'0'+(now.getMonth()+1);
var d=now.getDate()>9?now.getDate():'0'+now.getDate();
var h= now.getHours()>9?now.getHours():'0'+now.getHours();
var m= now.getMinutes()>9?now.getMinutes():'0'+now.getMinutes();
var s= now.getSeconds()>9?now.getSeconds():'0'+now.getSeconds();
today.html(y+'-'+M+'-'+d)
time.html(h+':'+m+':'+s);
setTimeout(showtime,1000);
}
// amChart 直線區塊圖
AmCharts.makeChart("chartdiv",
{
"type": "serial",
"categoryField": "date",
"columnSpacing": 6,
"columnSpacing3D": -3,
"columnWidth": 0,
"dataDateFormat": "YYYY-MM-DD HH:NN",
"maxSelectedSeries": 0,
"mouseWheelScrollEnabled": true,
"mouseWheelZoomEnabled": true,
"autoMarginOffset": 0,
"marginLeft": 16,
"marginRight": 18,
"maxZoomFactor": 100,
"minMarginBottom": -6,
"plotAreaBorderColor": "#FFFFFF",
"zoomOutButtonColor": "#E7E7E7",
"zoomOutButtonImageSize": 16,
"zoomOutButtonRollOverAlpha": 0,
"colors": [
"#ffC107",
"#03A9F4",
"#F44336",
"#7726D3",
"#00D45A"
],
"backgroundColor": "#444747",
"borderColor": "#E7E7E7",
"color": "#E7E7E7",
"fontFamily": "Roboto",
"fontSize": 15,
"handDrawn": false,
"handDrawScatter": 5,
"handDrawThickness": 9,
"prefixesOfBigNumbers": [
{
"number": 1000,
"prefix": "k"
},
{
"number": 1000000,
"prefix": "M"
},
{
"number": 1000000000,
"prefix": "G"
},
{
"number": 1000000000000,
"prefix": "T"
},
{
"number": 1000000000000000,
"prefix": "P"
},
{
"number": 1000000000000000000,
"prefix": "E"
},
{
"number": 1e+21,
"prefix": "Z"
},
{
"number": 1e+24,
"prefix": "Y"
}
],
"prefixesOfSmallNumbers": [
{
"number": 1e-24,
"prefix": "y"
},
{
"number": 1e-21,
"prefix": "z"
},
{
"number": 1e-18,
"prefix": "a"
},
{
"number": 1e-15,
"prefix": "f"
},
{
"number": 1e-12,
"prefix": "p"
},
{
"number": 1e-9,
"prefix": "n"
},
{
"number": 0.000001,
"prefix": "μ"
},
{
"number": 0.001,
"prefix": "m"
}
],
"theme": "chalk",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true
},
"chartCursor": {
"enabled": true,
"animationDuration": 0,
"categoryBalloonAlpha": 0,
"categoryBalloonDateFormat": "JJ:NN",
"categoryBalloonEnabled": false,
"color": "#FFFFFF",
"cursorAlpha": 0,
"cursorPosition": "start",
"leaveAfterTouch": false
},
"chartScrollbar": {
"enabled": true,
"backgroundAlpha": 0.23,
"dragIconHeight": 28,
"dragIconWidth": 28,
"maximum": 0,
"oppositeAxis": false,
"scrollbarHeight": 29,
"scrollDuration": 6,
"tabIndex": 0
},
"trendLines": [],
"graphs": [
{
"fillAlphas": 0.6,
"id": "AmGraph-1",
"lineAlpha": 0,
"title": "graph 1",
"valueField": "column-1"
},
{
"fillAlphas": 0.6,
"id": "AmGraph-2",
"lineAlpha": 0,
"title": "graph 2",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"maximum": 10,
"maximumDate": "2019-11-10 24:00",
"minimum": 0,
"totalTextOffset": 4,
"autoGridCount": false,
"autoRotateAngle": -37.8,
"gridAlpha": 0.44,
"minorGridAlpha": 0,
"title": "Axis title",
"titleBold": false,
"titleFontSize": 0,
"titleRotation": 0
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true
},
"titles": [
{
"id": "Title-1",
"size": 0,
"text": "Chart Title"
}
],
"dataProvider": [
{
"column-1": 8,
"column-2": 5,
"date": "2014-03-01 07:57"
},
{
"column-1": 6,
"column-2": 7,
"date": "2014-03-01 07:58"
},
{
"column-1": 2,
"column-2": 3,
"date": "2014-03-01 07:59"
},
{
"column-1": 1,
"column-2": 3,
"date": "2014-03-01 08:00"
},
{
"column-1": 2,
"column-2": 1,
"date": "2014-03-01 08:01"
},
{
"column-1": 3,
"column-2": 2,
"date": "2014-03-01 08:02"
},
{
"column-1": 6,
"column-2": 8,
"date": "2014-03-01 08:03"
}
]
}
);
// amChart Gauge 儀表圖
AmCharts.makeChart("chartdiv-2",
{
"type": "gauge",
"gaugeY": 170,
"marginLeft": 30,
"marginRight": 30,
"minRadius": 12,
"backgroundColor": "#444747",
"classNamePrefix": "amchartsgauge",
"color": "#FFF",
"fontFamily": "Roboto",
"fontSize": 12,
"handDrawn": false,
"theme": "chalk",
"arrows": [
{
"alpha": 0.63,
"axis": "GaugeAxis-1",
"borderAlpha": 0,
"color": "#FFF",
"id": "GaugeArrow-10",
"innerRadius": "33%",
"radius": "69%",
"value": 64
}
],
"axes": [
{
"axisAlpha": 0,
"axisThickness": 4,
"bandAlpha": 0,
"bandOutlineAlpha": 0.6,
"bottomText": "64",
"bottomTextBold": false,
"bottomTextColor": "#E7E7E7",
"bottomTextFontSize": 42,
"bottomTextYOffset": -40,
"color": "#E7E7E7",
"endAngle": 125,
"endValue": 100,
"fontSize": 14,
"gridCount": 1,
"id": "GaugeAxis-1",
"labelOffset": -50,
"radius": "93%",
"startAngle": -125,
"tickAlpha": 1,
"tickColor": "#00BCD4",
"tickLength": 20,
"valueInterval": 10,
"bands": [
{
"alpha": 0.69,
"color": "#00BCD4",
"endValue": 50,
"id": "GaugeBand-1",
"innerRadius": "81%",
"radius": "73%",
"startValue": 0
},
{
"alpha": 0.59,
"color": "#FFC107",
"endValue": 70,
"id": "GaugeBand-2",
"innerRadius": "81%",
"radius": "73%",
"startValue": 50
},
{
"alpha": 0.56,
"color": "#F44336",
"endValue": 100,
"id": "GaugeBand-3",
"innerRadius": "81%",
"radius": "73%",
"startValue": 70
}
]
}
],
"allLabels": [],
"balloon": {
"animationDuration": 0,
"borderColor": "#000000",
"fadeOutDuration": 0,
"offsetY": 4
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": ""
}
]
}
);
// Percentage Chart
new Chart(document.getElementById("horizontalBar"), {
"type": "horizontalBar",
"data": {
"labels": ["Product A", "Product B", "Product C", "Product D"],
"datasets": [{
// "label": "My First Dataset",
"data": [85, 20, 45, 12],
"fill": true,
"barPercentage": 0.5,
"barThickness": 6,
"maxBarThickness": 8,
"minBarLength": 2,
"backgroundColor": ["rgba(3, 169, 244, 0.5)", "rgba(255, 193, 7, 0.5)", "rgba(244, 67, 54, 0.35)", "rgba(119, 38, 211, 0.4)",
],
// "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)",
// "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)",
// "rgb(201, 203, 207)"
// ],
// "borderWidth": 1
}]
},
"options": {
// title: {
// display: true,
// text: 'Custom Chart Title'
// },
"scales": {
"xAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
// circle 百分比圖
$(document).ready(function() {
var i = 0;
$('.circle-chart').each(function() {
var id = 'chart' + i;
$(this).attr('id', id);
drawCircleChart('#' + id);
i++;
})
$('.circle-chart').click(function() {
var thisId = $(this).attr('id');
drawCircleChart('#' + thisId);
})
function drawCircleChart(id) {
$(id).empty().append("" + $(id).data('percent') + "%");
addOneBar(id);
}
function addOneBar(id) {
var percent = $(id).data('percent');
var noOfBars = .36 * percent;
if ($(id).children().length - 1 < noOfBars) {
$(id).append('');
setTimeout(function() {
addOneBar(id);
}, 30);
}
}
})
// ----------
// var canvas = document.getElementById("canvasChart");
// var ctx = canvas.getContext("2d");
// // set context styles
// ctx.lineWidth = 15;
// ctx.strokeStyle = '#85c3b8';
// ctx.shadowColor = "black"
// ctx.shadowOffsetX = 0;
// ctx.shadowOffsetY = 0;
// ctx.shadowBlur = 0;
// ctx.font = "18px verdana";
// var quart = Math.PI / 2;
// var PI2 = Math.PI * 2;
// var percent = 0;
// var guages = [];
// guages.push({
// x: 50,
// y: 100,
// radius: 40,
// start: 0,
// end: 22,
// color: "blue"
// });
// guages.push({
// x: 200,
// y: 100,
// radius: 40,
// start: 0,
// end: 90,
// color: "green"
// });
// guages.push({
// x: 50,
// y: 225,
// radius: 40,
// start: 0,
// end: 35,
// color: "gold"
// });
// // guages.push({
// // x: 200,
// // y: 225,
// // radius: 40,
// // start: 0,
// // end: 55,
// // color: "purple"
// // });
// animate();
// function drawAll(percent) {
// // clear the canvas
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// // draw all the guages
// for (var i = 0; i < guages.length; i++) {
// render(guages[i], percent);
// }
// }
// function render(guage, percent) {
// var pct = percent / 100;
// var extent = parseInt((guage.end - guage.start) * pct);
// var current = (guage.end - guage.start) / 100 * PI2 * pct - quart;
// ctx.beginPath();
// ctx.arc(guage.x, guage.y, guage.radius, -quart, current);
// ctx.strokeStyle = guage.color;
// ctx.stroke();
// ctx.fillStyle = guage.color;
// ctx.fillText(extent, guage.x - 15, guage.y + 5);
// }
// function animate() {
// // if the animation is not 100% then request another frame
// if (percent < 100) {
// requestAnimationFrame(animate);
// }
// // redraw all guages with the current percent
// drawAll(percent);
// // increase percent for the next frame
// percent += 1;
// }
// -------------
// var data = {
// labels : ["January","February","March","April","May","June","July"],
// datasets : [
// {
// fillColor : "rgba(155,210,230,.05)",
// strokeColor : "rgb(115,180,190)",
// pointColor : "#424647",
// pointStrokeColor : "rgb(115,180,190)",
// data : [65,59,90,41,56,55,40]
// },
// {
// fillColor : "rgba(235,145,145,.05)",
// strokeColor : "rgb(180,100,100)",
// pointColor : "#424647",
// pointStrokeColor : "rgb(180,100,100)",
// data : [28,48,40,19,96,27,100]
// },
// {
// fillColor : "rgba(220,240,145,.05)",
// strokeColor : "rgb(180,185,135)",
// pointColor : "#424647",
// pointStrokeColor : "rgb(180,185,135)",
// data : [8,35,35,1,78,45,80]
// }
// ]
// }
// var ctx = document.getElementById("ChartJS").getContext("2d");
// new Chart(ctx).Line(data, {
// scaleOverlay : false,
// scaleOverride : true,
// scaleSteps : 10,
// scaleStepWidth : 10,
// scaleStartValue : 0,
// scaleLineColor : "rgba(0,0,0,.25)",
// scaleLineWidth : 1,
// scaleShowLabels : true,
// scaleLabel : "<%=value%>",
// scaleFontFamily : "'Lato'",
// scaleFontSize : 12,
// scaleFontStyle : "800",
// scaleFontColor : "#222",
// scaleShowGridLines : true,
// scaleGridLineColor : "rgba(0,0,0,.1)",
// scaleGridLineWidth : 1,
// bezierCurve : true,
// pointDot : true,
// pointDotRadius : 5,
// pointDotStrokeWidth : 1,
// datasetStroke : true,
// datasetStrokeWidth : 1,
// datasetFill : true,
// animation : true,
// animationSteps : 120,
// animationEasing : "easeOutQuart",
// onAnimationComplete : null
// });
// var pie = document.getElementById("pieChart").getContext("2d");
// new Chart(pie).Doughnut([
// { value: 50, color: "rgba(180,100,100,1)" },
// { value: 50, color: '#424647' }
// ], {
// segmentShowStroke: false,
// percentageInnerCutout : 90,
// });
// var pie2 = document.getElementById("pieChart2").getContext("2d");
// new Chart(pie2).Doughnut([
// { value: 80, color: "rgba(180,100,100,.75)" },
// { value: 20, color: '#424647' }
// ], {
// segmentShowStroke: false,
// percentageInnerCutout : 80,
// });
// var pie3 = document.getElementById("pieChart3").getContext("2d");
// new Chart(pie3).Doughnut([
// { value: 90, color: "rgba(180,100,100,.5)" },
// { value: 10, color: '#424647' }
// ], {
// segmentShowStroke: false,
// percentageInnerCutout : 96,
// });
// var dn1 = document.getElementById("dnChart1").getContext("2d");
// new Chart(dn1).Doughnut([
// { value: 20, color: "rgba(180,185,135,.5)" },
// { value: 80, color: 'rgba(0,0,0,0)' }], {
// segmentShowStroke : false,
// percentageInnerCutout : 85,
// });
// var dn2 = document.getElementById("dnChart2").getContext("2d");
// new Chart(dn2).Doughnut([
// { value: 20, color: "rgba(180,100,100,0)" },
// { value: 50, color: "rgba(180,185,135,1)" },
// { value: 30, color: 'rgba(0,0,0,0)' }], {
// segmentShowStroke : false,
// percentageInnerCutout : 70,
// });
// var dn3 = document.getElementById("dnChart3").getContext("2d");
// new Chart(dn3).Doughnut([
// { value: 70, color: "rgba(180,100,100,0)" },
// { value: 30, color: "rgba(180,185,135,.7)" }], {
// segmentShowStroke : false,
// percentageInnerCutout : 78,
// });
// var dn4 = document.getElementById("dnChart4").getContext("2d");
// new Chart(dn4).Pie([
// { value: 20, color: "rgba(0,0,0,0)" },
// { value: 50, color: "rgba(0,0,0,0)" },
// { value: 30, color: "rgba(0,0,0,0)" }], {
// segmentStrokeColor : "#424647",
// segmentStrokeWidth : 1
// });
// ---------------
// chart.js
// Line Chart
// var salesData = {
// labels: ["8:10", "8:11", "8:12", "8:13", "8:14", "8:15", "8:16"],
// datasets: [
// {
// label: "Front",
// fillColor: "rgba(195, 40, 96, 0.1)",
// strokeColor: "rgba(195, 40, 96, 1)",
// pointColor: "rgba(195, 40, 96, 1)",
// pointStrokeColor: "#202b33",
// pointHighlightStroke: "rgba(225,225,225,0.9)",
// data: [3400, 3000, 2500, 4500, 2500, 3400, 3000]
// },
// {
// label: "Middle",
// fillColor: "rgba(255, 172, 100, 0.1)",
// strokeColor: "rgba(255, 172, 100, 1)",
// pointColor: "rgba(255, 172, 100, 1)",
// pointStrokeColor: "#202b33",
// pointHighlightStroke: "rgba(225,225,225,0.9)",
// data: [1900, 1700, 2100, 3600, 2200, 2500, 2000]
// },
// {
// label: "Back",
// fillColor: "rgba(19, 71, 34, 0.3)",
// strokeColor: "rgba(88, 188, 116, 1)",
// pointColor: "rgba(88, 188, 116, 1)",
// pointStrokeColor: "#202b33",
// pointHighlightStroke: "rgba(225,225,225,0.9)",
// data: [1000, 1400, 1100, 2600, 2000, 900, 1400]
// }
// ]
// };
// var ctx = document.getElementById("salesData").getContext("2d");
// window.myLineChart = new Chart(ctx).Line(salesData, {
// pointDotRadius : 3,
// pointDotStrokeWidth : 1,
// datasetStrokeWidth : 2,
// scaleShowVerticalLines: false,
// scaleGridLineWidth : 1,
// scaleGridLineHeight : 5,
// scaleGridLineColor : "rgba(225, 255, 255, 0.6)",
// scaleShowGridLines : true,
// scaleGridLineColor : "rgba(225, 255, 255, 0.2)",
// scaleOverride: true,
// scaleSteps: 10,
// scaleStepWidth: 500,
// scaleStartValue: 0,
// responsive: true
// });
// //Credit Sales
// var creditSales = new ProgressBar.Circle('#creditSales', {
// color: '#e81760',
// strokeWidth: 3,
// trailWidth: 3,
// duration: 1500,
// text: {
// value: '0%'
// },
// step: function(state, bar) {
// bar.setText((bar.value() * 100).toFixed(0) + "%");
// }
// });
// var channelSales = new ProgressBar.Circle('#channelSales', {
// color: '#e88e3c',
// strokeWidth: 3,
// trailWidth: 3,
// duration: 1500,
// text: {
// value: '0%'
// },
// step: function(state, bar) {
// bar.setText((bar.value() * 100).toFixed(0) + "%");
// }
// });
// var directSales = new ProgressBar.Circle('#directSales', {
// color: '#2bab51',
// strokeWidth: 3,
// trailWidth: 3,
// duration: 1500,
// text: {
// value: '0%'
// },
// step: function(state, bar) {
// bar.setText((bar.value() * 100).toFixed(0) + "%");
// }
// });
// creditSales.animate(0.8);
// channelSales.animate(0.64);
// directSales.animate(0.34);