cloudvisio
Version:
Visual Representation of cloud data
81 lines (66 loc) • 1.36 kB
HTML
<html>
<head>
<title>Cloudvisio :: Forks example</title>
<meta charset="utf8">
<!-- Dependencies -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Cloudvisio lib -->
<script type="text/javascript" src="../build/cloudvisio-min.js"></script>
<!-- Example code -->
<script type="text/javascript">
// variables
var vis;
$(function(){
vis = new Cloudvisio({
layout: "pie"
});
requestUser();
});
function requestUser(){
var user = prompt("Please enter your Github username","tracend");
if (user!=null && user!=""){
getData( user );
}
}
function getData( user ){
$.getJSON("https://api.github.com/users/"+ user +"/repos", function(response){
//console.log(response);
renderGraph( response );
});
}
function renderGraph( data ){
vis.data( data );
vis.select("fork").find(true);
vis.amount({ labels: true });
vis.render();
}
</script>
<!-- Example styling -->
<style type="text/css">
#vis {
width: 100%;
height: 100%;
}
header {
position: absolute;
padding: 12px;
}
</style>
</head>
<body>
<header>
<h2>Forks</h2>
<p>Check how many of any user's repositories are forks</p>
<pre>
vis = new Cloudvisio({
layout: "pie"
});
vis.select("fork").find(true);
vis.amount({ labels: true });
vis.render();
</pre>
</header>
<div id="vis"><!-- --></div>
</body>
</html>