{% layout 'layout' %}
{% block title %}NVD3{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Charts</a></li>
<li class="active"><a href="charts-nvd3.html">NVD3</a></li>
{% endblock %}

{% block styles %}
{{ "plugins/nvd3/nv.d3.min.css" | asset_url | stylesheet_tag }} 		<!-- nvd3 -->
{% endblock %}

{% block scripts %}
{{ "plugins/d3/d3.min.js" | asset_url | script_tag }}             		<!-- nvd3 dependency -->
{{ "plugins/nvd3/nv.d3.min.js" | asset_url | script_tag }} 				<!-- nvd3 -->

{{ "demo/demo-nvd3.js" | asset_url | script_tag }}
{% endblock %}

{% block content %}

<div class="row">
	<div class="col-xs-12">
		<div class="alert alert-info">
			<h3>nvd3.js</h3>
			<p>This project is an attempt to build re-usable charts and chart components for <a href="http://d3js.org">d3.js</a> without taking away the power that d3.js gives you</p>
		</div>
	</div>
	<div class="col-xs-12">
		<div class="panel">
			<div class="panel-heading">
				<h2>Simple Line Chart</h2>
			</div>
			<div class="panel-body">
				<div id='line'>
				  <svg style='height:300px'> </svg>
				</div>
			</div>
		</div>
	</div>
	<div class="col-xs-12">
		<div class="panel">
			<div class="panel-heading">
				<h2>Stacked/Grouped Multi-Bar Chart</h2>
			</div>
			<div class="panel-body">
				<div id='stackedbar'>
				  <svg style='height:300px'> </svg>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-xs-12">
		<div class="panel">
			<div class="panel-heading">
				<h2>Stacked Area Chart</h2>
			</div>
			<div class="panel-body">
				<div id='stackedarea'>
				  <svg style='height:300px'> </svg>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}