---
layout: app/app-layout
pagename: charts-flot
---
<div class="title-block">
	<h3 class="title">
		Charts Flot 
	</h3>
	<p class="title-description">
		List of sample charts with custom colors
	</p>
</div>

<section class="section">
	<div class="row">
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">
					<div class="card-title-block">
						<h3 class="title">
							Bar Chart Example
						</h3>
					</div>

					<section class="example">
						<div class="flot-chart">
							<div class="flot-chart-content" id="flot-bar-chart"></div>
						</div>
					</section>
				</div>
			</div>
		</div>


		<div class="col-md-6">
			<div class="card">
				<div class="card-block">
					<div class="card-title-block">
						<h3 class="title">
							Line Cahrt Example
						</h3>
					</div>

					<section class="example">
						<div class="flot-chart">
							<div class="flot-chart-content" id="flot-line-chart"></div>
						</div>
					</section>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section">
	<div class="row">
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">
					<div class="card-title-block">
						<h3 class="title">
							Pie Chart Example
						</h3>
					</div>

					<section class="example">

						<div class="flot-chart">
							<div class="flot-chart-pie-content" id="flot-pie-chart"></div>
						</div>

					</section>
				</div>
			</div>
		</div>


		<div class="col-md-6">
			<div class="card">
				<div class="card-block">
					<div class="card-title-block">
						<h3 class="title">
							Live Chart Example
						</h3>
					</div>

					<section class="example">

						<div class="flot-chart">
							<div class="flot-chart-content" id="flot-line-chart-moving"></div>
						</div>

					</section>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section">
	<div class="row">
		<div class="col-md-12">

			<div class="card">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Multiple Axes Line Chart Example
						</h3>
					</div>

					<section class="example">

						<div class="flot-chart">
							<div class="flot-chart-content" id="flot-line-chart-multi"></div>
						</div>

					</section>

				</div>
			</div>
			
		</div>
	</div>
</section>