Code được "moi" từ Panel Code1k.com. Giúp truy xuất số liệu thống kê từ Google Analytics & thể hiện ra biểu đồ như của Panel Code1k.com.
Code chỉ mang tính chất tham khảo, vì tệp PHP đã được bảo mật bởi Code1k.com.
Code chỉ mang tính chất tham khảo, vì tệp PHP đã được bảo mật bởi Code1k.com.
<script type="text/javascript">
var minimal=false;
</script>
<!--[if IE 6]>
<script type="text/javascript">
minimal=true;
</script>
<![endif]-->
<!-- Jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
var tm_id = 0;
var tm_animate = 200;
var tm_metric = 'visitors';
var tm_details;
var tm_c1_theme;
var tm_c2_theme;
$(document).ready(function(){
tm_details = $('.stats .details span');
$('.stats ul li').hover(function(){
var text = $('div',this).html();
tm_details.html(text);
},function(){
tm_details.html(' ');
});
$('.stats ul li div').hover(function(){
$(this).css('background-position','bottom left');
},function(){
$(this).css('background-position','top left');
});
/*
$('.stats .details li').mouseenter(function(){
var frontCol = $('a',this).attr('rel');
var backCol = 'c';
if (frontCol=='c1') { backCol='c2'; }else{ backCol='c1'; }
$('.stats li .'+frontCol).css('z-index','20');
$('.stats li .'+backCol).css('z-index','10');
});
*/
$('.stats .theme').click(function(){
if ($('.stats .settings').hasClass('thVisible')){
$(this).removeClass('thVisible');
$('.stats .settings').fadeOut();
}else{
$(this).addClass('thVisible');
$('.stats .settings').fadeIn();
}
});
$('.stats .settings, .stats .theme')
.mouseout(function(){
tm_id = setTimeout (hideTMenu, tm_animate );
})
.mousemove(function(){
clearTimeout (tm_id);
});
$('.stats .right span').click(function(){
$('.stats .right span.selected').removeClass('selected');
$(this).addClass('selected');
loadData( $(this).text());
});
});
function changeTheme(col, newClass){
$('.stats .chart .'+col).addClass(newClass);
$('.stats ol .'+col+' div').attr('class',newClass);
if (col=='c1') {
if (tm_c1_theme){ $('.stats .chart .c1').removeClass(tm_c1_theme); }
tm_c1_theme=newClass;
}else{
if (tm_c2_theme){ $('.stats .chart .c2').removeClass(tm_c2_theme); }
tm_c2_theme=newClass;
}
}
function loadData(metric){
$('.stats .loader')
.css({opacity:'0'})
.css('display','block')
.animate({opacity:'0.8'}) ;
$('.stats .details .c1 a').fadeOut(function(){
$(this).text(metric).fadeIn();
});
if (metric=="New visits") { metric="newVisits"; }
$.ajax({
type: "GET",
url: "Tệp php được bảo vệ bản quyền bởi Code1k.com",
dataType: "json",
data: ({show : metric}),
success: function(data){
if (minimal){
$("ul.chart .c1").each(function (i) {
var nHeight = data.items[i].value+'%';
$(this).css('height',nHeight);
});
}else{
$("ul.chart .c1").each(function (i) {
var nHeight = data.items[i].value+'%';
$(this).animate( { height: nHeight }, { queue:true, duration:1000 } );
});
}
$("ul.chart .c2").each(function (i) {
$(this).html(data.items[i].label);
});
$('.stats .loader').fadeOut();
}
});
}
function hideTMenu(){
$('.stats .theme').removeClass('thVisible');
$('.stats .settings').fadeOut();
}
</script>
<style type='text/css'>
/* Global Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{
margin:0;
padding:0;
}
table {
/*border-collapse:collapse;*/
/*border-spacing:0;*/
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
strong{
font-weight:bold;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;}
/* End Global Reset*/
</style>
<style type='text/css'>
.hide { display:none;visibility:hidden;}
.clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix { display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix { display: block;}
body {
background:url("http://2.bp.blogspot.com/_BmIFAHM3wdk/TQRAHixQHVI/AAAAAAAAAtA/Zqv1KR8hzcM/s1600/bk_body.jpg");
}
.stats {
background:url("http://2.bp.blogspot.com/_BmIFAHM3wdk/TQRAKTrErcI/AAAAAAAAAtY/a9fodG1wi1c/s1600/bk_widget.png") no-repeat center center;
width:680px;
height:180px;
margin:auto;
position:relative;
}
.stats p,
.stats .details,
.stats .info {
font-family:"trebuchet ms";
font-size:12px;
line-height:20px;
height:20px;
overflow:hidden;
padding:3px 2px 3px 45px;
}
.stats .info { padding:5px 45px 5px 45px;background:url("http://4.bp.blogspot.com/_BmIFAHM3wdk/TQRALISyJnI/AAAAAAAAAtc/pwyEjFUeV7o/s1600/by_analytics.gif") no-repeat 45px 5px;}
.stats .info h2 { font-size:13px;display:inline;color:black;}
.stats .info span { font-size:10px;color:#9eadba;height:16px;padding-top:10px;}
.stats .info span.loader { float:right;width:100px;padding-left:20px;background:url("http://2.bp.blogspot.com/_BmIFAHM3wdk/TQRAJ8OwaAI/AAAAAAAAAtQ/-25jmOaZIH8/s1600/loader.gif") no-repeat center left;display:none;padding-top:0px;}
.stats span { float:left;}
.stats .loading {
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
display:none;
z-index:99;
}
.stats .details span { float:left;display:block;height:22px; }
.stats ol { float:right;width:250px;padding-right:45px;height:22px;}
.stats ol li { width:80px;float:right;height:20px;overflow:hidden; }
.stats ol li div { width:15px;height:15px;float:left;margin:2px 4px;border:1px solid white;cursor:default;line-height:12px;overflow:hidden;}
.stats ol li a { float:left;display:block;cursor:default;text-decoration:none; }
.stats ul { margin:auto;width:590px;padding:0 5px; }
.stats ul li {
width:20px;
margin-left:1px;
float:left;
position:relative;
height:120px;
border-bottom:2px solid black;
}
.stats ul div { position:absolute;bottom:0px;width:100%;height:150px;text-indent:-9999px;text-align:center; }
.stats ul div.c1 { background:#70b9ea url("http://2.bp.blogspot.com/_BmIFAHM3wdk/TQRAIb1o9fI/AAAAAAAAAtI/V0QGOp5IY78/s1600/bar_blue_over.png") repeat-x top right;z-index:20; }
.stats ul div.c2 { background:#f7f7f7 url("http://3.bp.blogspot.com/_BmIFAHM3wdk/TQRAJPEWDxI/AAAAAAAAAtM/PDMHtdIZsiI/s1600/bar_bw.png") repeat-x top right;z-index:10; }
.stats .settings {
position:absolute;
top:26px;
right:45px;
width:160px;
display:none;
background:#f4f4f4;
z-index:150;
}
.stats ul.chart li div.thRed { background:#ce4747 url("http://2.bp.blogspot.com/_BmIFAHM3wdk/TQRAOoeT1xI/AAAAAAAAAt4/wyS7mOlpqg8/s1600/theme_red.png") repeat-x top right;}
.stats .thRed { background:red; }
.stats ul.chart li div.thGreen { background:#aab464 url("http://2.bp.blogspot.com/_BmIFAHM3wdk/TQRAMr4IJmI/AAAAAAAAAts/iT5g-sS576U/s1600/theme_green.png") repeat-x top right;}
.stats .thGreen { background:#aab464; }
.stats ul.chart li div.thOrange { background:#ffa93e url("http://1.bp.blogspot.com/_BmIFAHM3wdk/TQRAN0dN1pI/AAAAAAAAAtw/LP6dIp7H99A/s1600/theme_orange.png") repeat-x top right;}
.stats .thOrange { background:#ffa93e; }
.stats ul.chart li div.thBlack { background:#9eadba url("../img/theme_black.png") repeat-x top right;}
.stats .thBlack { background:#9eadba; }
.stats ul.chart li div.thBlue { background:#61b9ff url("http://4.bp.blogspot.com/_BmIFAHM3wdk/TQRAL77sS1I/AAAAAAAAAtk/IQ4fIwPTymM/s1600/theme_blue.png") repeat-x top right;}
.stats .thBlue { background:#61b9ff; }
.stats ul.chart li div.thViolet { background:#975b99 url("http://3.bp.blogspot.com/_BmIFAHM3wdk/TQRAPJ2XLiI/AAAAAAAAAt8/INTV1Z7fXrg/s1600/theme_violet.png") repeat-x top right;}
.stats .thViolet { background:#975b99; }
.stats ul.chart li div.thBrown { background:#a78571 url("http://2.bp.blogspot.com/_BmIFAHM3wdk/TQRAMef0bgI/AAAAAAAAAto/fvKoPs4VK2g/s1600/theme_brown.png") repeat-x top right;}
.stats .thBrown { background:#a78571; }
.stats ul.chart li div.thPink { background:#de4c91 url("http://4.bp.blogspot.com/_BmIFAHM3wdk/TQRAOPE0nEI/AAAAAAAAAt0/gKPv3DEXW7A/s1600/theme_pink.png") repeat-x top right;}
.stats .thPink { background:#de4c91; }
.stats .left { float:left; }
.stats .right { float:right;}
.stats .metrics { height:94px;width:70px;padding:0 5px;overflow:hidden;}
.stats .metrics span {
display:block;
width:70px;
height:20px;
line-height:20px;
color:#6b6b6b;
text-align:center;
background:#d0d0d0;
margin:2px 0;
font-size:12px;
font-family:"trebuchet ms",verdana,arial;
cursor:pointer;
background:#d9d9d9 url("http://4.bp.blogspot.com/_BmIFAHM3wdk/TQRAKAjbsiI/AAAAAAAAAtU/jbX41ztJAZE/s1600/bk_theme.png") no-repeat center right;
}
.stats .metrics .selected{
background:#d9d9d9 url("http://4.bp.blogspot.com/_BmIFAHM3wdk/TQRAKAjbsiI/AAAAAAAAAtU/jbX41ztJAZE/s1600/bk_theme.png") no-repeat bottom right;
color:#feffff;
}
.stats .theme{
width:150px;
height:20px;
padding:0 0 0 10px;
display:block;
float:right;
background:#77bae3 url("http://4.bp.blogspot.com/_BmIFAHM3wdk/TQRAKAjbsiI/AAAAAAAAAtU/jbX41ztJAZE/s1600/bk_theme.png") no-repeat center left;
color:#f3f3f3;
text-decoration:none;
}
.stats .colors{
border-top:1px solid #cbcbcb;
padding:3px;
height:20px;
float:left;
margin-top:5px;
width:150px;
}
.stats .colors div{
height:11px;
width:11px;
margin:1px;
overflow:hidden;
line-height:10px;
border:1px solid black;
}
.stats .theme:link { }
.stats .theme:visited { }
.stats .theme:hover { background:#77bae3 url("http://4.bp.blogspot.com/_BmIFAHM3wdk/TQRAKAjbsiI/AAAAAAAAAtU/jbX41ztJAZE/s1600/bk_theme.png") no-repeat top left;color:#ffffff;}
.stats .theme:active,
.stats .thVisible { background:#77bae3 url("http://4.bp.blogspot.com/_BmIFAHM3wdk/TQRAKAjbsiI/AAAAAAAAAtU/jbX41ztJAZE/s1600/bk_theme.png") no-repeat bottom left;color:#595959;}
.stats ul li div.pr01 { height:1%;}
.stats ul li div.pr02 { height:2%;}
.stats ul li div.pr03 { height:3%;}
.stats ul li div.pr04 { height:4%;}
.stats ul li div.pr05 { height:5%;}
.stats ul li div.pr06 { height:6%;}
.stats ul li div.pr07 { height:7%;}
.stats ul li div.pr08 { height:8%;}
.stats ul li div.pr09 { height:9%;}
.stats ul li div.pr10 { height:10%;}
.stats ul li div.pr11 { height:11%;}
.stats ul li div.pr12 { height:12%;}
.stats ul li div.pr13 { height:13%;}
.stats ul li div.pr14 { height:14%;}
.stats ul li div.pr15 { height:15%;}
.stats ul li div.pr16 { height:16%;}
.stats ul li div.pr17 { height:17%;}
.stats ul li div.pr18 { height:18%;}
.stats ul li div.pr19 { height:19%;}
.stats ul li div.pr20 { height:20%;}
.stats ul li div.pr21 { height:21%;}
.stats ul li div.pr22 { height:22%;}
.stats ul li div.pr23 { height:23%;}
.stats ul li div.pr24 { height:24%;}
.stats ul li div.pr25 { height:25%;}
.stats ul li div.pr26 { height:26%;}
.stats ul li div.pr27 { height:27%;}
.stats ul li div.pr28 { height:28%;}
.stats ul li div.pr29 { height:29%;}
.stats ul li div.pr30 { height:30%;}
.stats ul li div.pr31 { height:31%;}
.stats ul li div.pr32 { height:32%;}
.stats ul li div.pr33 { height:33%;}
.stats ul li div.pr34 { height:34%;}
.stats ul li div.pr35 { height:35%;}
.stats ul li div.pr36 { height:36%;}
.stats ul li div.pr37 { height:37%;}
.stats ul li div.pr38 { height:38%;}
.stats ul li div.pr39 { height:39%;}
.stats ul li div.pr40 { height:40%;}
.stats ul li div.pr41 { height:41%;}
.stats ul li div.pr42 { height:42%;}
.stats ul li div.pr43 { height:43%;}
.stats ul li div.pr44 { height:44%;}
.stats ul li div.pr45 { height:45%;}
.stats ul li div.pr46 { height:46%;}
.stats ul li div.pr47 { height:47%;}
.stats ul li div.pr48 { height:48%;}
.stats ul li div.pr49 { height:49%;}
.stats ul li div.pr50 { height:50%;}
.stats ul li div.pr51 { height:51%;}
.stats ul li div.pr52 { height:52%;}
.stats ul li div.pr53 { height:53%;}
.stats ul li div.pr54 { height:54%;}
.stats ul li div.pr55 { height:55%;}
.stats ul li div.pr56 { height:56%;}
.stats ul li div.pr57 { height:57%;}
.stats ul li div.pr58 { height:58%;}
.stats ul li div.pr59 { height:59%;}
.stats ul li div.pr60 { height:60%;}
.stats ul li div.pr61 { height:61%;}
.stats ul li div.pr62 { height:62%;}
.stats ul li div.pr63 { height:63%;}
.stats ul li div.pr64 { height:64%;}
.stats ul li div.pr65 { height:65%;}
.stats ul li div.pr66 { height:66%;}
.stats ul li div.pr67 { height:67%;}
.stats ul li div.pr68 { height:68%;}
.stats ul li div.pr69 { height:69%;}
.stats ul li div.pr70 { height:70%;}
.stats ul li div.pr71 { height:71%;}
.stats ul li div.pr72 { height:72%;}
.stats ul li div.pr73 { height:73%;}
.stats ul li div.pr74 { height:74%;}
.stats ul li div.pr75 { height:75%;}
.stats ul li div.pr76 { height:76%;}
.stats ul li div.pr77 { height:77%;}
.stats ul li div.pr78 { height:78%;}
.stats ul li div.pr79 { height:79%;}
.stats ul li div.pr80 { height:80%;}
.stats ul li div.pr81 { height:81%;}
.stats ul li div.pr82 { height:82%;}
.stats ul li div.pr83 { height:83%;}
.stats ul li div.pr84 { height:84%;}
.stats ul li div.pr85 { height:85%;}
.stats ul li div.pr86 { height:86%;}
.stats ul li div.pr87 { height:87%;}
.stats ul li div.pr88 { height:88%;}
.stats ul li div.pr89 { height:89%;}
.stats ul li div.pr90 { height:90%;}
.stats ul li div.pr91 { height:91%;}
.stats ul li div.pr92 { height:92%;}
.stats ul li div.pr93 { height:93%;}
.stats ul li div.pr94 { height:94%;}
.stats ul li div.pr95 { height:95%;}
.stats ul li div.pr96 { height:96%;}
.stats ul li div.pr97 { height:97%;}
.stats ul li div.pr98 { height:98%;}
.stats ul li div.pr99 { height:99%;}
.stats ul li div.pr100 { height:100%;}
</style>
<div class="stats clearfix">
<div class="info">
<span><h2>Code1k.com </h2>(13-11-2010 to 10-12-2010)</span>
<a class="theme" href="#">Thuộc tính & màu sắc</a>
<span class="loader">Đang tải dữ liệu</span>
</div>
<!-- chart bars -->
<ul class="chart clearfix">
<li><div class="c2 pr84"><strong>2010-11-13</strong> 576 Visitors, 1177 Visits</div><div class="c1 pr83"></div></li><li><div class="c2 pr76"><strong>2010-11-14</strong> 565 Visitors, 1170 Visits</div><div class="c1 pr71"></div></li><li><div class="c2 pr58"><strong>2010-11-15</strong> 553 Visitors, 1153 Visits</div><div class="c1 pr58"></div></li><li><div class="c2 pr53"><strong>2010-11-16</strong> 549 Visitors, 1149 Visits</div><div class="c1 pr53"></div></li><li><div class="c2 pr71"><strong>2010-11-17</strong> 563 Visitors, 1165 Visits</div><div class="c1 pr69"></div></li><li><div class="c2 pr59"><strong>2010-11-18</strong> 552 Visitors, 1154 Visits</div><div class="c1 pr57"></div></li><li><div class="c2 pr74"><strong>2010-11-19</strong> 567 Visitors, 1168 Visits</div><div class="c1 pr73"></div></li><li><div class="c2 pr82"><strong>2010-11-20</strong> 572 Visitors, 1175 Visits</div><div class="c1 pr79"></div></li><li><div class="c2 pr83"><strong>2010-11-21</strong> 574 Visitors, 1176 Visits</div><div class="c1 pr81"></div></li><li><div class="c2 pr73"><strong>2010-11-22</strong> 566 Visitors, 1167 Visits</div><div class="c1 pr72"></div></li><li><div class="c2 pr100"><strong>2010-11-23</strong> 587 Visitors, 1191 Visits</div><div class="c1 pr95"></div></li><li><div class="c2 pr69"><strong>2010-11-24</strong> 560 Visitors, 1163 Visits</div><div class="c1 pr65"></div></li><li><div class="c2 pr69"><strong>2010-11-25</strong> 562 Visitors, 1163 Visits</div><div class="c1 pr68"></div></li><li><div class="c2 pr65"><strong>2010-11-26</strong> 555 Visitors, 1160 Visits</div><div class="c1 pr60"></div></li><li><div class="c2 pr85"><strong>2010-11-27</strong> 577 Visitors, 1178 Visits</div><div class="c1 pr84"></div></li><li><div class="c2 pr94"><strong>2010-11-28</strong> 585 Visitors, 1186 Visits</div><div class="c1 pr93"></div></li><li><div class="c2 pr83"><strong>2010-11-29</strong> 574 Visitors, 1176 Visits</div><div class="c1 pr81"></div></li><li><div class="c2 pr63"><strong>2010-11-30</strong> 554 Visitors, 1158 Visits</div><div class="c1 pr59"></div></li><li><div class="c2 pr90"><strong>2010-12-01</strong> 579 Visitors, 1182 Visits</div><div class="c1 pr86"></div></li><li><div class="c2 pr74"><strong>2010-12-02</strong> 562 Visitors, 1168 Visits</div><div class="c1 pr68"></div></li><li><div class="c2 pr82"><strong>2010-12-03</strong> 574 Visitors, 1175 Visits</div><div class="c1 pr81"></div></li><li><div class="c2 pr83"><strong>2010-12-04</strong> 575 Visitors, 1176 Visits</div><div class="c1 pr82"></div></li><li><div class="c2 pr68"><strong>2010-12-05</strong> 560 Visitors, 1162 Visits</div><div class="c1 pr65"></div></li><li><div class="c2 pr49"><strong>2010-12-06</strong> 545 Visitors, 1145 Visits</div><div class="c1 pr49"></div></li><li><div class="c2 pr60"><strong>2010-12-07</strong> 553 Visitors, 1155 Visits</div><div class="c1 pr58"></div></li><li><div class="c2 pr79"><strong>2010-12-08</strong> 571 Visitors, 1172 Visits</div><div class="c1 pr78"></div></li><li><div class="c2 pr52"><strong>2010-12-09</strong> 547 Visitors, 1148 Visits</div><div class="c1 pr51"></div></li><li><div class="c2 pr80"><strong>2010-12-10</strong> 570 Visitors, 1173 Visits</div><div class="c1 pr76"></div></li> </ul>
<div class="details">
<!-- Current day selection -->
<span> </span>
<!-- Chart Legend -->
<ol>
<li class="c2"><div class="thBlack"></div><a rel="c2">Visits</a></li>
<li class="c1"><div class="thBlue"></div><a rel="c1">Visitors</a></li>
</ol>
</div>
<!-- dropdown settings -->
<div class="settings">
<!-- metrics -->
<div class="metrics right">
<span>Bounces</span>
<span>New visits</span>
<span class="selected">Visitors</span>
</div>
<div class="metrics left">
<span class="selected">Visits</span>
</div>
<!-- colors -->
<div class="colors">
<div class="thRed right" onclick="changeTheme('c2','thRed')"></div>
<div class="thGreen right" onclick="changeTheme('c2','thGreen')"></div>
<div class="thPink right" onclick="changeTheme('c2','thPink')"></div>
<div class="thBrown right" onclick="changeTheme('c2','thBrown')"></div>
<div class="thBlue left" onclick="changeTheme('c1','thBlue')"></div>
<div class="thOrange left" onclick="changeTheme('c1','thOrange')"></div>
<div class="thBlack left" onclick="changeTheme('c1','thBlack')"></div>
<div class="thViolet left" onclick="changeTheme('c1','thViolet')"></div>
</div>
</div>
</div>
<!-- Tệp google-analytics.com/ga.js tại đây -->