Skip to content

Instantly share code, notes, and snippets.

@smowtion
Created November 7, 2013 19:46
Show Gist options
  • Select an option

  • Save smowtion/7360733 to your computer and use it in GitHub Desktop.

Select an option

Save smowtion/7360733 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h1>Alexa Search Traffic</h1>
<ul class="b-menu-01">
<li class="current" id="gr_traffic"><a onclick="viewGraphTab('traffic'); return false;" href="#"><span><b>Traffic Rank</b></span></a></li>
<li id="gr_reach" class=""><a onclick="viewGraphTab('reach'); return false;" href="#"><b>Reach</b></a></li>
<li id="gr_page" class=""><a onclick="viewGraphTab('page'); return false;" href="#"><b>Pageviews</b></a></li>
<li id="gr_page_user"><a onclick="viewGraphTab('page_user'); return false;" href="#"><b>Pageviews/User</b></a></li>
<li id="gr_bounce"><a onclick="viewGraphTab('bounce'); return false;" href="#"><b>Bounce %</b></a></li>
<li id="gr_time"><a onclick="viewGraphTab('time'); return false;" href="#"><b>Time on Site</b></a></li>
<li id="gr_search"><a onclick="viewGraphTab('search'); return false;" href="#"><b>Search %</b></a></li>
</ul>
<form class="f-alexa">
<div class="f-alexa-left">
<select id="selectPeriod" class="inp-select">
<option value="7d">Trailing 7 days </option>
<option value="1m">Trailing 1 month </option>
<option selected="selected" value="3m">Trailing 3 months </option>
<option value="6m">Trailing 6 months </option>
<option value="2y">Max</option>
</select>
<h4>Compare this site to:</h4>
<input type="text" value="" class="inp-text compare_to">
<input type="text" value="" class="inp-text compare_to">
<input type="text" value="" class="inp-text compare_to">
<input type="text" value="" class="inp-text compare_to">
<input type="button" onclick="compareTo(); return false;" value="Compare" class="btn">
</div>
<div class="f-alexa-right">
<img id="alexaGraphic" src="http://traffic.alexa.com/graph?&amp;w=400&amp;h=220&amp;o=f&amp;c=1&amp;y=t&amp;b=ffffff&amp;n=666666&amp;r=3m&amp;u=linkhay.com">
</div>
</form>
</body>
</html>
var domain_root = location.protocol + '//' + location.host;
var compareString = '';
var graphLetter = 't';
var graphPeriod = '3m';
var domain = 'linkhay.com';
var graphDomain = 'linkhay.com';
var graphLetters = {'traffic': 't',
'reach': 'r',
'page': 'p',
'page_user': 'u',
'bounce': 'b',
'time': 's',
'search': 'q'};
function ajax_search(searchbox) {
var dataString = 'searchword=' + searchbox;
if (searchbox === '')
{
}
else
{
$.ajax({
type: "POST",
url: window.domain_root + "/ajax/ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}
return false;
}
function change_alexa_graph() {
var time_data = $("#alexa-history-select").val();
time_data = time_data.replace(" days", "d").replace(" months", "m").replace(" years", "y").replace(" month", "m").replace(" year", "y");
$("#alexa-history-graph").html(alexa_graph_html.replace("%s", time_data));
}
function viewGraphTab(tabName)
{
$("li[id^=gr_]").removeClass("current");
$("#gr_" + tabName).addClass("current");
graphLetter = graphLetters[tabName];
updateGraphic();
}
function compareTo(tabName)
{
var compares = '';
var inputs = $('.compare_to');
var compareDomain='';
$.each(inputs, function(index, value) {
compareDomain = $(value).attr('value');
alert(compareDomain);
if ('' !== compareDomain) {
compares += '&u=' + compareDomain;
}
});
compareString = compares;
updateGraphic();
}
function updateGraphic()
{
var grQuerySting = 'http://traffic.alexa.com/graph?&w=400&h=220&o=f&c=1&y='
+ graphLetter
+ '&b=ffffff&n=666666&r=' + graphPeriod + '&u=' + graphDomain
+ compareString;
$('#alexaGraphic').attr({'src': grQuerySting});
}
$(document).ready(function() {
$(".message").hide();
$("span.readmore").click(function() {
$("span.message").show("slow");
$(this).hide();
});
// Handlers for alexa widget
$("#selectPeriod").on('click', function() {
graphPeriod = this.value;
updateGraphic();
});
$("#selectPeriod").on('change', function() {
graphPeriod = this.value;
updateGraphic();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment