<!DOCTYPE html>
<html>
<head>
<TITLE>SmartQR CMS</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Joe Cho">
<META NAME="Keywords" CONTENT="m2brand">
<META NAME="Description" CONTENT="">
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<script src="js/jquery/jquery-1.7.2.min.js" type='text/javascript'></script>
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
<script src="js/jquery/jquery-ui-1.8.18.custom.min.js" type='text/javascript'></script>
<script src="js/jquery.wijmo-open.all.2.0.5.min.js" type="text/javascript"></script>
<script src="js/jquery.wijmo-complete.all.2.0.5.min.js" type="text/javascript"></script>
<!--
<script src="js/jquery.wijmo.wijcombobox.js" type="text/javascript"></script>
//-->
<script src="js/urlencode.js" type='text/javascript'></script>
<script src="js/jquery/plugin/jquery.csv.min.js" type='text/javascript'></script>
<script src="js/tooltip.js" type='text/javascript'></script>
<script src="js/date.js" type='text/javascript'></script>
<script src="js/limit_input.js" type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="css/m2brand.css" />
<link rel="stylesheet" type="text/css" href="css/nav.css" />
<link rel="stylesheet" type="text/css" href="css/tooltip.css" />
<!--Theme-->
<!--
<link rel="stylesheet" type="text/css" href="css/jquery.theme.1.8.18/cupertino/jquery-ui-1.8.18.custom.css" >
//-->
<link href="css/wijmo.theme/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.wijmo-complete.all.2.0.5.min.css" rel="stylesheet" type="text/css" />
<link href="css/wijmo.themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
<link href="css/wijmo.themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.wijmo-wijgrid .wijmo-wijgrid-headerrow .wijmo-wijgrid-headertext {
padding: 0.5em 1em;
display: block;
/*text-align: center;*/
position: relative;
font-size: 12px;
}
.wijmo-wijtooltip {
text-align: left;
}
/* css for my-treeview */
.my-treeview div{
padding: 2px 10px 2px 0px;
text-align: left;
text-indent: 0px;
font-size: 12px;
}
.my-treeview .my-treeview-container{
padding: 0px;
}
.my-treeview .lv1{
padding: 2px 10px 2px 0px;
color: #fff;
background: #444;
}
.my-treeview .lv2{
padding: 2px 10px 2px 40px;
background: #aaa;
}
.my-treeview .lv3{
padding: 2px 10px 2px 80px;
background: #eee;
}
.my-treeview input[type='combobox']{
margin: 0px;
}
.my-gridview div{
padding: 2px 10px 2px 0px;
text-align: left;
text-indent: 0px;
font-size: 12px;
}
.my-gridview .my-gridview-container{
padding: 0px;
}
.my-gridview .lv1{
padding: 2px 10px 2px 0px;
color: #fff;
background: #444;
}
.my-gridview .lv2{
padding: 2px 10px 2px 40px;
background: #aaa;
}
.my-gridview .lv3{
}
.my-gridview input[type='combobox']{
margin: 0px;
}
</style>
<script type="text/javascript">
// override the wijarrayreader to read special formated json data from database
$.extend(wijarrayreader.prototype, {
read: function (datasource) {
if ($.isArray(datasource.data)) { datasource.items = this._map(datasource.data); }
else { datasource.items = this._map(datasource.data.rows); }// datasource.items = [];
},
});
//global setting for all elements
$(":input[type='text'],:input[type='password'],textarea").wijtextbox();
$(":input[type='radio']").wijradio();
$(":input[type='checkbox']").wijcheckbox();
$(":button").button();
</script>
<!-- specific script //-->
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script>
<script src="js/highcharts/2.1.9/adapters/mootools-adapter.js" type="text/javascript"></script>
<script src="js/highcharts/2.1.9/highcharts.js" type="text/javascript"></script>
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="js/highcharts/2.1.9/modules/exporting.js"></script>
<!-- special style //-->
<style type="text/css">
div#page_heading{
border: 0px;
padding: 5px 0px;
border-bottom: 1px solid #aaa;
margin: 0px auto 20px auto;
font-family:新細明體,Arial,Helvetica,sans-serif;
font-size: 16px;
color: #222;
background: #eee;
}
div#page_heading span{
margin: 0px;
padding: 5px;
}
#ph1, #ph3, #ph4, #ph5 {
text-align: left;
font-family:新細明體,Arial,Helvetica,sans-serif;
font-size: 16px;
color: #222;
cursor: pointer;
}
.iOver{
background: #faa;
}
/* panel table */
.level_container{
clear: both;
border: 0px;
margin: 10px auto;
padding: 0px;
text-align:left;
}
.chart_container{
border: 1px solid #aaa;
margin: 5px 0px;
padding: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.line_area{
width: 940px;
border: 0px;
margin: 0px;
padding: 0px;
height: 600px;
text-align: center;
vertical-align: middle;
}
.pie_area{
float: left;
width: 675px;
border: 0px;
margin: 0px;
padding: 0px;
height: 600px;
text-align: center;
vertical-align: middle;
}
.pie_table_area {
float: left;
border: 0px;
padding: 0px;
width: 255px;
min-height: 600px;
text-align: center;
vertical-align: middle;
}
.pie_table_area_left{
border-right: 1px solid #aaa;
margin: 0px 5px 0px 0px;
}
.pie_table_area_right{
border-left: 1px solid #aaa;
margin: 0px 0px 0px 5px;
}
.clear{
clear:both;
}
.pie_table_area table{
border: 0px;
margin: 10px auto;
padding: 0px;
width: 255px;
text-align: center;
}
.pie_table_area table th{
border: 0px;
margin: 0px auto;
padding: 2px;
text-align: center;
vertical-align: middle;
font-family:新細明體,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #fff;
background: #444;
}
.pie_table_area table th.TD_TOTAL {
background: none;
color: #222;
border-top: 1px solid #222;
}
.pie_table_area table td{
border: 1px solid #ddd;
margin: 0px auto;
padding: 2px;
text-align: center;
vertical-align: middle;
font-family:新細明體,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #222;
}
table.option_table{
border: 0px;
margin: 5px 0px;
padding: 0px;
}
table.option_table th {
font-size: 14px;
text-align:center;
padding: 2px;
vertical-align: middle;
color: #222;
}
table.option_table td {
font-size: 14px;
text-align:left;
padding: 2px;
vertical-align: middle;
color: #222;
}
table.option_table .date_control, table.option_table .quantity_control {
width: 80px;
margin: 0px;
}
table.option_table .cat_control {
width: 180px;
margin: 0px;
}
font.gentime{
font-family:新細明體,Arial,Helvetica,sans-serif;
font-size: 8px;
font-weight: normal;
margin: 0px, 5px;
}
/* initialize makeup
.TD_CAT2, .TD_CAT3, .TD_CAT4, .control_container, #lv1, #lv2, #lv3{
display: none;
}
*/
</style>
</head>
<body>
<div id="heading"><?php require('_heading.php'); ?></div>
<div id="page_heading">
<span id="ph1"><? echo $_HEADING['ANALYTICS']; ?></span><span>></span><span id="ph2"><? echo $_HEADING['ANALYTICS_MEDIA_VIEW']; ?></span><span>></span><span id="ph3"><? echo $_TEXT_CAT1.$_STRTBL['START_ANALYZE']; ?></span><span class="TD_CAT2">></span><span id="ph4" class="TD_CAT2"><? echo $_TEXT_CAT2.$_STRTBL['START_ANALYZE']; ?></span><span class="TD_CAT3">></span><span id="ph5" class="TD_CAT3"><? echo $_TEXT_CAT3.$_STRTBL['START_ANALYZE']; ?></span><span class="TD_CAT4">></span><span id="ph6" class="TD_CAT4"></span>
</div>
<div id="middle">
<!-- control area //-->
<div class="control_container">
<table class="option_table">
<form method="post" action="">
<!--
<tr >
<th><?php echo $_TEXT_PSTART; ?></th>
<th><?php echo $_TEXT_PEND; ?></th>
<th><?php echo $_TEXT_CAT1; ?></th>
<th class="TD_CAT2"><?php echo $_TEXT_CAT2; ?></th>
<th class="TD_CAT3"><?php echo $_TEXT_CAT3; ?></th>
<th class="TD_CAT4"><?php echo $_TEXT_CAT4; ?></th>
</tr>
//-->
<tr>
<td><select id="OP_YEAR" class="cat_control" /></select></td>
<td><select id="OP_CAT" class="cat_control" /></select></td>
<td><input type="text" id="SH_TEXT" class="search_text" value="" /></td>
</tr>
</form>
</table>
</div>
<!-- list area //-->
<div id="listArea"></div>
<!-- chart area //-->
<div id="lv1" class="level_container">
<div class="chart_container">
<div id="line1" class="line_area"></div>
</div>
</div>
<div id="lv2" class="level_container">
<div class="chart_container">
<div id="line2" class="line_area"></div>
</div>
<div class="chart_container">
<div id="pie2a" class="pie_area"></div>
<div class="pie_table_area pie_table_area_right"><table id="pietable2a"></table></div>
<div class="clear"></div>
</div>
<div class="chart_container">
<div id="pie2b" class="pie_area"></div>
<div class="pie_table_area pie_table_area_right"><table id="pietable2b"></table></div>
<div class="clear"></div>
</div>
</div>
<div id="lv3" class="level_container">
<div class="chart_container">
<div id="line3" class="line_area"></div>
</div>
<div class="chart_container">
<div id="pie3a" class="pie_area"></div>
<div class="pie_table_area pie_table_area_right"><table id="pietable3a"></table></div>
<div class="clear"></div>
</div>
<div class="chart_container">
<div id="pie3b" class="pie_area"></div>
<div class="pie_table_area pie_table_area_right"><table id="pietable3b"></table></div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- footer area //-->
<div id="footer"><?php require('_footer.php'); ?></div><br/><br/>
<SCRIPT type="text/javascript" src="js/mychart.js">
</script>
<SCRIPT type="text/javascript">
var opList = new Array();
function urldecode(str) {
return decodeURIComponent((str+'').replace(/+/g, '%20'));
}
$(document).ready(function(){
setYear();
setCat();
updateListView({op:'listView', shtext:$("#SH_TEXT").val()});
$("#OP_YEAR").change(function(){
updateListView({op:'listView',year:$("#OP_YEAR")[0].value, cat:$("#OP_CAT")[0].value, shtext:$("#SH_TEXT").val()});
});
$("#OP_CAT").change(function(){
updateListView({op:'listView',year:$("#OP_YEAR")[0].value, cat:$("#OP_CAT")[0].value, shtext:$("#SH_TEXT").val()});
});
var timerid;
$("#SH_TEXT").keyup(function(){
clearTimeout(timerid);
timerid = setTimeout(function() {
updateListView({op:'listView',year:$("#OP_YEAR")[0].value, cat:$("#OP_CAT")[0].value, shtext:$("#SH_TEXT").val()});
},1000);
});
/*
var sm = Date.today().addMonths(-1).toString("yyyy-MM-dd");
var em = Date.today().toString("yyyy-MM-dd");
// initialize DATE textfield
$("#PSTART").val(sm);
$("#PEND").val(em);
// initialize the page
$("table.option_table #PSTART").datepicker({dateFormat: 'yy-mm-dd', "maxDate": '+0d', "minDate": '-2y', autoSize: true});
$("table.option_table #PEND").datepicker({dateFormat: 'yy-mm-dd', "maxDate": '+0d', "minDate": '-2y', autoSize: true});
// initialize select 1
reset();
*/
/*
$("#ph1").hover(function() {$(this).addClass('iOver');}, function() {$(this).removeClass('iOver');});
$("#ph3").hover(function() {$(this).addClass('iOver');}, function() {$(this).removeClass('iOver');});
$("#ph4").hover(function() {$(this).addClass('iOver');}, function() {$(this).removeClass('iOver');});
$("#ph5").hover(function() {$(this).addClass('iOver');}, function() {$(this).removeClass('iOver');});
*/ });
function setYear(){
$("#OP_YEAR").empty().append(new Option('*** 全部年度 ***', '_all_'));
$.ajax({
type: "POST",
url: "../ajax/_api_event.php" ,
data: {op:'listYear'} ,
cache: false,
dataType: "text",
error: function(jqXHR, textStatus, errorThrown) {
// $("#SCAN_METER").html("<font color="red">DB CONNECTION FAIL</font>");
},
success: function (result) {
var data = jQuery.parseJSON(result);
$.each(data, function(index, value) {
if(value.YEAR != 0) $("#OP_YEAR").append(new Option(urldecode(value.YEAR), value.YEAR));
});
$("#OP_YEAR").prop('selectedIndex', 1);
}
});
}
function setCat(){
$("#OP_CAT").empty().append(new Option('*** 全部分類 ***', '_all_'));
$.ajax({
type: "POST",
url: "../ajax/_api_event.php" ,
data: {op:'listCat'} ,
cache: false,
dataType: "text",
error: function(jqXHR, textStatus, errorThrown) {
// $("#SCAN_METER").html("<font color="red">DB CONNECTION FAIL</font>");
},
success: function (result) {
var data = jQuery.parseJSON(result);
$.each(data, function(index, value) {
if(value.CAT != "") $("#OP_CAT").append(new Option(urldecode(value.CAT), value.CAT));
});
$("#OP_CAT").prop('selectedIndex', 0);
}
});
}
function updateListView(para){
$("#listArea").fadeOut(500);
$.ajax({
type: "POST",
url: "../ajax/_api_event.php" ,
data: para ,
cache: false,
dataType: "text",
error: function(jqXHR, textStatus, errorThrown) {
// $("#SCAN_METER").html("<font color="red">DB CONNECTION FAIL</font>");
},
success: function (result) {
$("#listArea").html(result);
$("#listArea").fadeIn(500);
}
});
}
function reset(){
/*
$(".TD_CAT2").hide();
$(".TD_CAT3").hide();
$(".TD_CAT4").hide();
$(".control_container").hide();
$("#lv1").hide();
$("#lv2").hide();
$("#lv3").hide();
*/
/*
$.each(opList, function(index, item) {
if($("table.option_table #CAT option[value='"+item[0]+"']").length == 0){
if(urldecode(item[0]) == "***") $("#CAT1").append(new Option("<?php echo $_STRTBL['UNCATEGORIZED']; ?>", item[0]));
else $("#CAT1").append(new Option(urldecode(item[0]), item[0]));
}
});
*/
/*
$(".control_container").fadeIn(600, function(){
drawGraph();
$("#lv1").fadeIn(1000);
});
*/ }
function updateCat1(){
var _cat = $("#CAT1").val();
$(".TD_CAT2").hide();
$(".TD_CAT3").hide();
$(".TD_CAT4").hide();
$("#lv1").hide();
$("#lv2").hide();
$("#lv3").hide();
if(_cat == "__all__") {
drawGraph();
$("#lv1").fadeIn(1000);
} else {
$("#CAT2").empty().append(new Option('<?php echo "*** (".$_TEXT_CAT2.$_STRTBL["START_ANALYZE"].") ***"; ?>', '__all__')).attr('selected', 'selected');
$.each(opList, function(index, item) {
if(_cat == item[0] && $("#CAT2 option[value='"+item[1]+"']").length == 0){
$("#CAT2").append(new Option(urldecode(item[1]), item[1]));
}
});
$(".TD_CAT2").show();
drawGraph();
$("#lv2").fadeIn(1000);
}
}
function updateCat2(){
var _cat = $("#CAT2").val();
$(".TD_CAT3").hide();
$(".TD_CAT4").hide();
$("#lv1").hide();
$("#lv2").hide();
$("#lv3").hide();
if(_cat == "__all__") {
drawGraph();
$("#lv2").fadeIn(1000);
} else {
$("#CAT3").empty().append(new Option('<?php echo "*** (".$_TEXT_CAT3.$_STRTBL["START_ANALYZE"].") ***"; ?>', '__all__')).attr('selected', 'selected');
$.each(opList, function(index, item) {
if(_cat == item[1] && $("#CAT3 option[value='"+item[2]+"']").length == 0){
$("#CAT3").append(new Option(urldecode(item[2]), item[2]));
}
});
$(".TD_CAT3").show();
drawGraph();
$("#lv3").fadeIn(1000);
}
}
function updateCat3(){
var _cat = urldecode($("#CAT3").val());
$("#lv1").hide();
$("#lv2").hide();
$("#lv3").hide();
if(_cat == "__all__") {
$(".TD_CAT4").hide();
} else {
$("#ph6").html(_cat);
$(".TD_CAT4").show();
}
drawGraph();
$("#lv3").fadeIn(1000);
}
// binding function to each control
$("#PSTART").change(function() {
drawGraph();
});
$("#PEND").change(function() {
drawGraph();
});
$("#CAT1").change(function() {
updateCat1();
});
$("#CAT2").change(function() {
updateCat2();
});
$("#CAT3").change(function() {
updateCat3();
});
$("#QUANTITY").change(function() {
updateCat3();
});
$("#ph1").click(function() {
window.location.href=".";
});
$("#ph3").click(function() {
reset();
});
$("#ph4").click(function() {
updateCat1();
});
$("#ph5").click(function() {
updateCat2();
});
// define function to update control
function drawGraph(){
// check for valid input
if ($("#PSTART").val() == "" || $("#PEND").val() == "") return false;
var sm = new Date($("#PSTART").val());
var em = new Date($("#PEND").val());
if(sm > em) {
alert('<?php echo $_TEXT_PSTART." < ".$_TEXT_PEND; ?>');
return false;
}
if($("#CAT2").is(":hidden")) {
// draw level 1 graph
drawLineChart(
"ajax/api_media_daily_trend_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val()
},
"line1",
{
onclick_select_id : "CAT1",
total_text: "<? echo $_STRTBL['TOTAL']; ?>"
}
);
} else {
if($("#CAT3").is(":hidden")){
// draw level 2 graph
drawLineChart(
"ajax/api_media_daily_trend_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val()
},
"line2",
{
onclick_select_id : "CAT2",
total_text: "<? echo $_STRTBL['TOTAL']; ?>"
}
);
drawPieChart(
"ajax/api_media_usage_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val()
},
"pie2a",
{
list_table_id : "pietable2a",
onclick_select_id : "CAT2",
total_text: "<? echo $_STRTBL['TOTAL']; ?>",
other_text: "<? echo $_STRTBL['OTHER']; ?>"
}
);
drawPieChart(
"ajax/api_media_distribution_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val()
},
"pie2b",
{
list_table_id : "pietable2b",
total_text: "<? echo $_STRTBL['TOTAL']; ?>",
other_text: "<? echo $_STRTBL['OTHER']; ?>"
}
);
} else{
// draw level 3 graph
if($("#CAT3").val() == "__all__") {
drawLineChart(
"ajax/api_media_daily_trend_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val(),
cat3: $("#CAT3").val()
},
"line3",
{
onclick_select_id : "CAT3",
total_text: "<? echo $_STRTBL['TOTAL']; ?>"
}
);
drawPieChart(
"ajax/api_media_usage_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val(),
cat3: $("#CAT3").val()
},
"pie3a",
{
list_table_id : "pietable3a",
onclick_select_id : "CAT3",
total_text: "<? echo $_STRTBL['TOTAL']; ?>",
other_text: "<? echo $_STRTBL['OTHER']; ?>"
}
);
drawPieChart(
"ajax/api_media_distribution_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val(),
cat3: $("#CAT3").val()
},
"pie3b",
{
list_table_id : "pietable3b",
total_text: "<? echo $_STRTBL['TOTAL']; ?>",
other_text: "<? echo $_STRTBL['OTHER']; ?>"
}
);
} else{
drawLineBarChart(
"ajax/api_media_monthly_trend_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val(),
cat3: $("#CAT3").val()
},
"line3",
{
bar_val: $("#QUANTITY").val(),
bar_name: "<? echo $_TEXT_CAT4; ?>",
}
);
drawPieChart(
"ajax/api_media_campaign_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val(),
cat3: $("#CAT3").val()
},
"pie3a",
{
list_table_id : "pietable3a",
total_text: "<? echo $_STRTBL['TOTAL']; ?>",
other_text: "<? echo $_STRTBL['OTHER']; ?>"
}
);
drawPieChart(
"ajax/api_media_distribution_csv.php",
{
pstart: $("#PSTART").val(),
pend: $("#PEND").val(),
cat1: $("#CAT1").val(),
cat2: $("#CAT2").val(),
cat3: $("#CAT3").val()
},
"pie3b",
{
list_table_id : "pietable3b",
total_text: "<? echo $_STRTBL['TOTAL']; ?>",
other_text: "<? echo $_STRTBL['OTHER']; ?>"
}
);
}
}
}
}
</script>
</body>
</html>