<!doctype html>
<html>
<head>
<title>Ringchart</title>
<style type="text/css" media="screen">
@font-face {
font-family: 'United';
src: url('//media.vivint.com/global/en/fonts/united/united-heavy.eot');
src: url('//media.vivint.com/global/en/fonts/united/united-heavy.woff') format('woff'),
url('//media.vivint.com/global/en/fonts/united/united-heavy.ttf') format('truetype'),
url('//media.vivint.com/global/en/fonts/united/united-heavy.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
padding-top: 20px;
font: 12px/18px helvetica, arial, sans;
color: #ccc;
background: #000 url(http://subtlepatterns.com/patterns/square_bg.png);
}
h1, h2 {
margin: 10px;
color: #eee;
}
section {
float: left;
margin: 10px;
padding: 10px;
border: 1px solid rgb(68, 68, 68);
text-align: center;
}
.ringchart {
width: 180px;
height: 200px;
}
/*
* SVG Styles
* properties may not match the usual css
*/
.ringchart .label {
fill: #ddc078;
font-family: United;
font-size: 36px;
}
.ringchart .filled { fill: #ddc078; }
.ringchart .empty { fill: #222; }
.ringchart.no-goal .label { fill: #333; }
</style>
<script src="lilsvg.js" type="text/javascript" charset="utf-8"></script>
<script src="ringchart.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Hi there,</h1>
<h2>Go on and enjoy some ringcharts.</h2>
<section>
<div id="chart-one" class="ringchart" data-value="45%"></div>
<h3>Percentage</h3>
<p>data-value="45%"</p>
</section>
<section>
<div id="chart-two" class="ringchart" data-value="77"></div>
<h3>Number (as percentage)</h3>
<p>data-value="77"</p>
</section>
<section>
<div id="chart-three" class="ringchart" data-value="105/215"></div>
<h3>Fraction</h3>
<p>data-value="105/215"</p>
</section>
<section>
<div id="chart-one" class="ringchart" data-value="110%"></div>
<h3>Percentage > 100</h3>
<p>data-value="110%"</p>
</section>
<section>
<div id="chart-two" class="ringchart" data-value="130"></div>
<h3>Number > 100</h3>
<p>data-value="130"</p>
</section>
<section>
<div id="chart-three" class="ringchart" data-value="215/105"></div>
<h3>Improper fraction</h3>
<p>data-value="215/105"</p>
</section>
<section>
<div id="chart-one" class="ringchart" data-value="50%"></div>
<h3>Exactly 50%</h3>
<p>data-value="50%"</p>
</section>
<section>
<div id="chart-two" class="ringchart" data-value="100"></div>
<h3>Exactly 100%</h3>
<p>data-value="100"</p>
</section>
<section>
<div id="chart-three" class="ringchart no-goal" data-value="0/100"></div>
<h3>Exactly 0%</h3>
<p>data-value="0/100"</p>
</section>
<script type="text/javascript">
var charts = document.querySelectorAll('.ringchart');
for (var i = 0; i < charts.length; i++) {
ring_chart( charts[i] );
};
</script>
</body>
</html>