<cfsavecontent variable="htmlhead">

	    <script language="javascript" type="text/javascript" src="/includes/js/jquery.flot.min.js"></script>

		<script type="text/javascript">

			$(document).ready( function() {

				// Setup flot
				var options = {
					xaxis: { mode: "time" }
				};

				var chart = $("#chart");

				$.plot(chart, [], options);

				// Bind select
				$("#series").change( function() {

					requestData($(this).val());
				});

				// Send request
				function requestData(series) {

					$.ajax({
						url: "/index.cfm?event=client.reports.getinventoryjson",
						method: "GET",
						data: {"series": series},
						dataType: "json",
						success: onData
					});
				}

				// Handle response
				function onData(series) {

					$(series[0]["data"]).each( function() {
						$(this)[0] *= 1;
						$(this)[1] *= 1;
					});

					$.plot(chart, [series], options);
				}

				$("#series").trigger("change");
			});

		</script>

</cfsavecontent>

<cfhtmlhead text="#htmlhead#" />


<select id="series">
	<option value="a">Series A</option>
	<option value="b">Series B</option>
</select>

<div id="chart" style="height:300px;width:600px;" />