<!--S:Pie-->
	
	<script>

		$(function() {

			var {CHART_ID}_placeholder = $("#{CHART_ID}");
			var {CHART_ID}_data = {SERIES};

			$.plot({CHART_ID}_placeholder, {CHART_ID}_data, {
				series: {
					pie: { 
						show: true
					}
				}
			});
		});

	</script>

	<div class="chartWrapper">
		<div id="{CHART_ID}" class="chart" style="width: {WIDTH} ; height: {HEIGHT};"></div>
	</div>
<!--E:Pie-->


<!--S:Graph-->
	
	<script>

		$(function() {

			var {CHART_ID}_placeholder = $("#{CHART_ID}");
			var {CHART_ID}_data = {SERIES};

			$.plot(
				{CHART_ID}_placeholder, 
				{CHART_ID}_data, 
				{
					yaxis: {
						min: 0,

						mode: "{Y_MODE}",
						tickFormatter: function(value, axis) {
							return "{Y_PREFIX}" + value + "{Y_SUFIX}";
						}
					},

					xaxis: {
						min: 0,
						mode: "{X_MODE}",
						tickFormatter: function(value, axis) {
							return "{X_PREFIX}" + value + "{X_SUFIX}";
						}
					},

					crosshair: {
						mode: "x"
					},
					grid: {
						hoverable: true,
						autoHighlight: true
					}
				}
			);

		});

	</script>

	<div class="chartWrapper">
		<div id="{CHART_ID}" class="chart" style="width: {WIDTH} ; height: {HEIGHT};"></div>
	</div>
<!--E:Graph-->



<!--S:Bars-->
	
	<script>

		$(function() {

			var {CHART_ID}_placeholder = $("#{CHART_ID}");
			var {CHART_ID}_data = {SERIES};

			$.plot(
				{CHART_ID}_placeholder, 
				{CHART_ID}_data, 
				{

					bars: {
						show: true,
						barWidth: 0.6,
						align: "center"
					},

					xaxis: {
						min: 0,
						mode: "{X_MODE}",
						tickLength: 0,
						tickFormatter: function(value, axis) {
							return "{X_PREFIX}" + value + "{X_SUFIX}";
						}
					}


				}
			);

		});

	</script>

	<div class="chartWrapper">
		<div id="{CHART_ID}" class="chart" style="width: {WIDTH} ; height: {HEIGHT};"></div>
	</div>
<!--E:Bars-->