Chart

																	
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">Line Chart</h3>
											</div>
											<div class="panel-body">
												<div id="line-chart" style="height: 250px;"></div>
											</div>
										</div>
							
							
										<script>
										if($('#line-chart').length > 0){
											new Morris.Line({
											  // ID of the element in which to draw the chart.
											  element: 'line-chart',
											  // Chart data records -- each entry in this array corresponds to a point on
											  // the chart.
											  data: [
												{ year: '2008', value: 20 },
												{ year: '2009', value: 10 },
												{ year: '2010', value: 5 },
												{ year: '2011', value: 5 },
												{ year: '2012', value: 20 }
											  ],
											  // The name of the data record attribute that contains x-values.
											  xkey: 'year',
											  // A list of names of data record attributes that contain y-values.
											  ykeys: ['value'],
											  // Labels for the ykeys -- will be displayed when you hover over the
											  // chart.
											  labels: ['Value']
											});
										}
										</script>
									  
									

																	
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">Area Chart</h3>
											</div>
											<div class="panel-body">
												<div id="area-chart" style="height: 250px;"></div>
											</div>
										</div>
							
							
										<script>
										if($('#area-chart').length > 0){
											Morris.Area({
											  element: 'area-chart',
											  data: [
												{ y: '2006', a: 100, b: 90 },
												{ y: '2007', a: 75,  b: 65 },
												{ y: '2008', a: 50,  b: 40 },
												{ y: '2009', a: 75,  b: 65 },
												{ y: '2010', a: 50,  b: 40 },
												{ y: '2011', a: 75,  b: 65 },
												{ y: '2012', a: 100, b: 90 }
											  ],
											  xkey: 'y',
											  ykeys: ['a', 'b'],
											  labels: ['Series A', 'Series B']
											});
										}
										</script>
									  
									

																	
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">Bar Chart</h3>
											</div>
											<div class="panel-body">
												<div id="bar-chart" style="height: 250px;"></div>
											</div>
										</div>
							
							
										<script>
										if($('#bar-chart').length > 0){
											Morris.Bar({
											  element: 'bar-chart',
											  data: [
												{ y: '2006', a: 100, b: 90 },
												{ y: '2007', a: 75,  b: 65 },
												{ y: '2008', a: 50,  b: 40 },
												{ y: '2009', a: 75,  b: 65 },
												{ y: '2010', a: 50,  b: 40 },
												{ y: '2011', a: 75,  b: 65 },
												{ y: '2012', a: 100, b: 90 }
											  ],
											  xkey: 'y',
											  ykeys: ['a', 'b'],
											  labels: ['Series A', 'Series B']
											});
										}
										</script>
									  
									

																	
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">Donut Chart</h3>
											</div>
											<div class="panel-body">
												<div id="donut-chart" style="height: 250px;"></div>
											</div>
										</div>
							
							
										<script>
										if($('#donut-chart').length > 0){
											Morris.Donut({
											  element: 'donut-chart',
											  data: [
												{label: "Download Sales", value: 12},
												{label: "In-Store Sales", value: 30},
												{label: "Mail-Order Sales", value: 20}
											  ]
											});
										}
										</script>