Am Charts with Coldfusion Component

AmCharts with Coldfusion Component

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="resources/amcharts/amcharts.js" type="text/javascript"></script>
	<script>
	CreateChart()
	function CreateChart()
	{
	var Hourlychart;
	$.getJSON("registration.cfc?method=GetChart&returnformat=json&queryformat=column", {}, function(res,code)
	{
	Hourlychart.dataProvider = res;
	});
	$(document).ready(function()
	{
	Hourlychart = new AmCharts.AmSerialChart();
	//Start : Hourlychart Script
	Hourlychart.categoryField = "Status";
	// the following two lines makes chart 3D
	Hourlychart.depth3D = 20;
	Hourlychart.angle = 30;
	Hourlychart.write("HourlychartDataDiv");
	// category
	var categoryAxis = Hourlychart.categoryAxis;
	categoryAxis.labelRotation = 90;
	categoryAxis.dashLength = 5;
	categoryAxis.gridPosition = "start";
	// value
	var valueAxis = new AmCharts.ValueAxis();
	valueAxis.title = "Hourly Distribution";
	valueAxis.dashLength = 5;
	Hourlychart.addValueAxis(valueAxis);
	// GRAPH
	var graph = new AmCharts.AmGraph();
	graph.valueField = "UserID";
	graph.colorField = "color";
	graph.balloonText = "[[UserName]]: [[value]]";
	graph.type = "column";
	graph.lineAlpha = 0;
	graph.fillAlphas = 1;
	Hourlychart.addGraph(graph);
	//END : Hourlychart Script
	setInterval(function ()
	{
	Hourlychart.validateData();
	}, 600);
	});
	}
	</script>
	<input type="button" value="ClickMe" onClick="CreateChart();">
	<table width="515px">
	<tr style="font-weight:bold; font-size:12px; background:##D0E0B4;" >
	<td>
	<div style="font-size:12px;text-align:center">
	User List
	</div>
	</td>
	</tr>
	</table>
	<div id="HourlychartDataDiv" class="temp" style="width: 25%; height: 300px;"></div>

view raw AmChart.cfm hosted with ❤ by GitHub

	<cfcomponent>
	<cffunction name="GetChart" access="remote" returnformat="plain">
	<cfquery name="GetUsers" datasource="TestDB">
	SELECT UserID, UserName,Active,
	CASE Active
	WHEN 1 THEN 'Active'
	WHEN 0 THEN 'InActive'
	END AS Status
	FROM shema_users
	</cfquery>
	<cfset resultStruct = Structnew() />
	<cfset JsonArray = ArrayNew(1) />
	<cfset Counter=1>
	<cfloop query="GetUsers">
	<CFSET color = FormatBaseN(RandRange(0,255), 16) & FormatBaseN(RandRange(0,255), 16) & FormatBaseN(RandRange(0,255), 16)>
	<cfset JsonArray[Counter] = Structnew() />
	<cfset JsonArray[Counter]["UserID"] = "#UserID#" />
	<cfset JsonArray[Counter]["UserName"] = "#UserName#" />
	<cfset JsonArray[Counter]["Status"] = "#Status#" />
	<cfset JsonArray[Counter]["color"] = "###color#" />
	<cfset Counter=Counter+1>
	</cfloop>
	<cfreturn JsonArray />
	</cffunction>
	</cfcomponent>

view raw registration.cfc hosted with ❤ by GitHub