index.html

<!DOCTYPE html>
<html>
<head>
	<title>Aristochart - Sophisticated Javascript charts.</title>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<meta http-equiv="X-UA-Compatible" content="IE=9">
	<link href="doc/style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<header>
		<div class="wrapper">
			<h1><img src="doc/image/logo.png" height="30"/><a href="index.html"><em>Aristo</em>chart</a></h1>
			<nav>
				<li><a href="index.html" class="highlighted">Home</a></li>
				<li><a href="doc/index.html">Documentation</a></li>
				<li><a href="examples/index.html">Examples</a></li>
				<li><a href="themes/index.html">Themes</a></li>
				<li><a href="https://github.com/dunxrion/aristochart" class="github">Github</a></li>
			</nav>
		</div>
	</header>
	<div class="content home">
		<div class="wrapper">
			<section>
				<div  class="column wide flap-active" id="holder">
				</div><div class="column thin">
					<h1>Simple <br>and <em>sophisticated</em> static <br>2D<br> line charts.</h1>
					<p class="social"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><iframe src="http://ghbtns.com/github-btn.html?user=dunxrion&repo=aristochart&type=watch"
  allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe></p>
				</div>
			</section>
			<section>
				<div class="column wide">
						<p class="biggish">Aristochart is highly customizable and flexible line charting library for <span class="tag">canvas</span>. Aristochart allows you to focus on aesthetic while it manages the data behind the scenes.</p>
				</div><div class="column thin">
					<div class="download">
						<a class="button" href="https://github.com/dunxrion/aristochart/archive/v0.2.zip">Download Aristochart.js</a>
						<a class="button" href="https://github.com/dunxrion/aristochart/archive/master.zip">Download docs, examples, themes</a>
						<p>Version 0.2. Hosted on <a href="https://github.com/dunxrion/aristochart" class="github">Github</a></p>
					</div>
				</div>
			</section>
			<hr>
			<section>
				<div class="column quarter">
					<h3>Themes</h3>
					<p>Aristochart has a growing list of community sourced themes for you to pick and choose from.</p>
				</div><div class="column threequarters themes">
					<div id="theme-orange"></div>
					<div id="theme-dot"></div>
					<div id="theme-flat"></div>
				</div>
			</section>
			<hr>
			<section><div class="column twothirds themes">
				<pre>
new Aristochart(document.getElementById("holder"), {
	data: {
		x: 10,
		y: [0, 1, 2, 3, 4, 5, 6, 6, 5, 4, 3, 3, 4, 5, 6, 7, 8, 9, 10],
		y1: [10, 9, 8, 7, 7, 6, 2, 1, 1, 1],
		y2: [4, 4, 4, 3, 3, 2, 2, 1, 0, 0, 0, 0]
	}
}, theme);</pre>
				</div><div class="column third">
					<h3>API</h3>
					<p>Aristochart's API was designed to be as simple as possible to allow you to focus on the aesthetic and presentation.</p>
				</div>
			</section>
			<hr>
			<section class="finally">
				<div class="column third">
					<h3>Documentation</h3>
					<p>Aristochart has indepth documentation of it's internals and options that you can edit and extend. All packaged together and works locally.</p>
				</div><div class="column third">
					<h3>Examples</h3>
					<p>Aristochart has a growing set of examples and demonstrations with their code to let you see it in action and help you learn by doing.</p>
				</div><div class="column third">
					<h3>Open-source</h3>
					<p>Aristochart is completely open-source and hosted on Github. <a href="http://github.com/dunxrion/aristochart">Fork the repo</a> and start contributing on your own features and themes!</p>
				</div>
		</div>
	</div>
	<footer>
		<div class="wrapper">
			<p>An open-source project by <a href="http://dunxrion.github.io">Adrian Cooney</a>.</p>
		</div>
	</footer>
</body>
<script src="doc/script/Sintax.js" type="text/javascript"></script>
<script src="Aristochart.js" type="text/javascript"></script>
<script src="themes/dot/dot.js" type="text/javascript"></script>
<script src="themes/flat/flat.js" type="text/javascript"></script>
<script src="themes/orange/orange.js" type="text/javascript"></script>

<script type="text/javascript">
	//Print the chart mustache!
	new Aristochart(document.getElementById("holder"), {
		width: 700,

		axis: {
			y: {
				steps: 5,
				min: 0
			}
		},

		data: {
			x: 10,
			y: [20, 19, 18, 19, 18, 19, 20, 20, 20],
			y1: [14, 11, 9, 8, 8, 8, 9, 11, 13, 11, 9, 8, 8, 8, 9, 11, 14],
			y2: [14, 6, 3, 2, 2, 2, 4, 7, 4, 2, 2, 2, 3, 6, 14]
		}
	});

	//Print the themes
	["orange", "dot", "flat"].forEach(function(theme) {
		new Aristochart(document.getElementById("theme-" + theme), {
			padding: 10,
			margin: 15,
			width: 236,
			data: {
				x: 10,
				y: [0, 1, 2, 3, 4, 5, 6, 6, 5, 4, 3, 3, 4, 5, 6, 7, 8, 9, 10],
				y1: [10, 9, 8, 7, 7, 6, 2, 1, 1, 1],
				y2: [4, 4, 4, 3, 3, 2, 2, 1, 0, 0, 0, 0]
			},

			style: {
				default: {
					label: {
						x: {
							visible: false
						},

						y: {
							visible: false
						}
					},

					point: {
						radius: 3,
						width: 2
					},

					axis: {
						width: 2
					},

					tick: {
						major: 9,
						minor: 5
					}
				}
			}
		}, Aristochart.themes[theme]);
	});

	//Sintax highlighting
	Sintax.highlight()
</script>
</html>