FusionCharts? v3 のドキュメントパス

Guide for Web Developers→How FusionCharts? works?

のなかにjavascriptでのデータのやり取りがある。

Quick Guide to Chart XML

のなかにチャートの表示方法やXMLの格納方法がかいてある

FusionCharts? v3 グラフのある要素からクリックで別の要素をだす。

要素XMLを作成するときに、link属性にjavascriptを入れる

<set label='Leverling' value='100524' isSliced='1'  link='javascript:updateChart(3);'  />
	<HTML>
	<HEAD>
		<TITLE>
		FusionCharts v3 Demo Application - Sales By Employees
		</TITLE>
			
		<SCRIPT LANGUAGE="Javascript" SRC="FusionCharts/FusionCharts.js"></SCRIPT>		
		<SCRIPT LANGUAGE="JavaScript">			
		
		//We keep flags to check whether the charts have loaded successfully.
		//By default, we assume them to false. When each chart loads, it calls
		//a JavaScript function FC_Rendered, in which we'll update the flags
		var detailsChartLoaded=false;
		var orderChartLoaded=false;
		
		/**
		 * FC_Rendered function is invoked by all FusionCharts charts which are registered
		 * with JavaScript. To this function, the chart passes its own DOM Id. We can check
		 * against the DOM id and update charts or loading flags.
		 *	@param	DOMId	Dom Id of the chart that was succesfully loaded.
		*/
		function FC_Rendered(DOMId){
			//Here, we update the loaded flags for each chart
			//Since we already know the charts in the page, we use conditional loop
			switch(DOMId){
				case "EmployeeDetails":				
					detailsChartLoaded = true;
					break;
				case "EmployeeDetailsOrders":				
					orderChartLoaded = true;
					break;
			}
			return;
		}	
		/** 
		 * updateChart method is invoked when the user clicks on a pie slice.
		 * In this method, we get the index of the employee after which we request for XML data
		 * for that that factory from Data_EmpYearlySales.asp, Data_EmpYearlyOrder.asp, and finally
		 * update the Column Charts.
		 *	@param	employeeId	Id of the employee
		*/		
		function updateChart(employeeId){			
			//Update the chart only if has loaded
			if (detailsChartLoaded){
				//DataURL for the chart
				var strURL = "Data_EmpYearlySales.asp?id=" + employeeId;
						
				//Sometimes, the above URL and XML data gets cached by the browser.
				//If you want your charts to get new XML data on each request,
				//you can add the following line:
				strURL = strURL + "&currTime=" + getTimeForURL();
				//getTimeForURL method is defined below and needs to be included
				//This basically adds a ever-changing parameter which bluffs
				//the browser and forces it to re-load the XML data every time.
									
				//URLEncode it - NECESSARY.
				strURL = escape(strURL);
			
				//Get reference to chart object using Dom ID "EmployeeDetails"
				var chartObj = getChartFromId("EmployeeDetails");			
				//Send request for XML
				chartObj.setDataURL(strURL);
			} else {
				//Show error
				alert("Please wait for the charts to load.");
				return;
			}
			
			//Update other chart too (Orders) (if loaded)
			if (orderChartLoaded){
				//DataURL for the chart
				var strURL = "Data_EmpYearlyOrder.asp?id=" + employeeId;
				strURL = strURL + "&currTime=" + getTimeForURL();
				strURL = escape(strURL);
			
				var ordersChartObj = getChartFromId("EmployeeDetailsOrders");			
				//Send request for XML
				ordersChartObj.setDataURL(strURL);		
			}else{
				//Show error
				alert("Please wait for the charts to load.");			
				return;
			}
		}
		/**
		 * getTimeForURL method returns the current time 
		 * in a URL friendly format, so that it can be appended to
		 * dataURL for effective non-caching.
		*/
		function getTimeForURL(){
			var dt = new Date();
			var strOutput = "";
			strOutput = dt.getHours() + "_" + dt.getMinutes() + "_" + dt.getSeconds() + "_" + dt.getMilliseconds();
			return strOutput;
		}
		</SCRIPT>
		<LINK REL='stylesheet' HREF='Style.css' />
	</HEAD>
	<BODY topmargin='0' leftmargin='0' bottomMargin='0' rightMargin='0' bgColor='#EEEEEE'>
		<table width="960" align="center" cellpadding="0" cellspacing="0" border="0" background="images/PageBg.jpg">
			<tr height="70">
				<td width="33">	
				&nbsp;
				</td>
				<td align="left" valign="bottom">
					<a href="http://www.InfoSoftGlobal.com" target="_blank"><img src="Images/IGPLogo.jpg" alt="InfoSoft Global" border="0"></a>
				</td>
				<td align="right" valign="bottom">
					<img src="Images/TopRightText.gif" border="0">	
				</td>
				<td width="37">	
				&nbsp;
				</td>
			</tr>
			<tr>
				<td width="33">		
				</td>
				<td height="1" colspan="2" bgColor="#EEEEEE">
				</td>
				<td width="37">		
				</td>
			</tr>
		
		<tr>
			<td height="10" colspan="4">
			</td>
		</tr>
		<tr>
			<td width="33">	
			</td>
			<td colspan="2">		
		
	<table width='875' align='center' cellspacing='0' cellpadding='0'>
		<tr>
		<td align='center'>
		
		<!-- START Script Block for Chart EmpSalesTotal -->
		<div id='EmpSalesTotalDiv' align='center'>
			Chart.
			
		</div>
			
		<script type="text/javascript">	
			//Instantiate the Chart	
			var chart_EmpSalesTotal = new FusionCharts("FusionCharts/Pie3D.swf", "EmpSalesTotal", "700", "350", "0", "0");
			
			//Provide entire XML data using dataXML method 
			chart_EmpSalesTotal.setDataXML("<chart caption='Sales Per Employee for year 1996' subcaption='(Click on a pie slice to view details)' palette='2' animation='1' formatNumberScale='0' numberPrefix='$' pieSliceDepth='30' startingAngle='125'><set label='Leverling' value='100524' isSliced='1'  link='javascript:updateChart(3);'  /><set label='Fuller' value='87790' isSliced='1'  link='javascript:updateChart(2);'  /><set label='Davolio' value='81898' isSliced='0'  link='javascript:updateChart(1);'  /><set label='Peacock' value='76438' isSliced='0'  link='javascript:updateChart(4);'  /><set label='Callahan' value='55091' isSliced='0'  link='javascript:updateChart(8);'  /><set label='King' value='57430' isSliced='0'  link='javascript:updateChart(7);'  /><set label='Dodsworth' value='43962' isSliced='0'  link='javascript:updateChart(9);'  /><set label='Suyama' value='22474' isSliced='0'  link='javascript:updateChart(6);'  /><set label='Buchanan' value='21637' isSliced='0'  link='javascript:updateChart(5);'  /><styles><definition><style type='font' name='CaptionFont' size='15' color='666666' /><style type='font' name='SubCaptionFont' bold='0' /></definition><application><apply toObject='caption' styles='CaptionFont' /><apply toObject='SubCaption' styles='SubCaptionFont' /></application></styles></chart>");
					
			//Finally, render the chart.
			chart_EmpSalesTotal.render("EmpSalesTotalDiv");
		</script>	
		<!-- END Script Block for Chart EmpSalesTotal -->
		
		</td>
		</tr>
	</table>
		<table width="875">
			<tr>
				<td width="33">		
				</td>
				<td height="1" colspan="2" bgColor="#EEEEEE">
				</td>
				<td width="37">		
				</td>
			</tr>
		</table>
		
	<P align='center' class='text'>Click on a pie slice above to see the employee's past performance.</P>
		<table width="875">
			<tr>
				<td width="33">		
				</td>
				<td height="1" colspan="2" bgColor="#EEEEEE">
				</td>
				<td width="37">		
				</td>
			</tr>
		</table>
		
		<table width='700' align='center'>
			<tr>
			<td width='400' align='center' style='BORDER-RIGHT:#EEEEEE 1px solid;'>
			
		<!-- START Script Block for Chart EmployeeDetails -->
		<div id='EmployeeDetailsDiv' align='center'>
			Chart.
			
		</div>
			
		<script type="text/javascript">	
			//Instantiate the Chart	
			var chart_EmployeeDetails = new FusionCharts("FusionCharts/Column3D.swf?ChartNoDataText=Please select an employee above.", "EmployeeDetails", "400", "250", "0", "1");
			
			//Provide entire XML data using dataXML method 
			chart_EmployeeDetails.setDataXML("<chart></chart>");
					
			//Finally, render the chart.
			chart_EmployeeDetails.render("EmployeeDetailsDiv");
		</script>	
		<!-- END Script Block for Chart EmployeeDetails -->
		
			</td>
			<td width='300' align='center'>
			
		<!-- START Script Block for Chart EmployeeDetailsOrders -->
		<div id='EmployeeDetailsOrdersDiv' align='center'>
			Chart.
			
		</div>
			
		<script type="text/javascript">	
			//Instantiate the Chart	
			var chart_EmployeeDetailsOrders = new FusionCharts("FusionCharts/Column3D.swf?ChartNoDataText=Please select an employee above.", "EmployeeDetailsOrders", "300", "250", "0", "1");
			
			//Provide entire XML data using dataXML method 
			chart_EmployeeDetailsOrders.setDataXML("<chart></chart>");
					
			//Finally, render the chart.
			chart_EmployeeDetailsOrders.render("EmployeeDetailsOrdersDiv");
		</script>	
		<!-- END Script Block for Chart EmployeeDetailsOrders -->
		
			</td>
			</tr>
		</table>	
				<br>
				</td>
				<td width="37">
				&nbsp;
				</td>
			</tr>	
			
			<tr>
				<td width="33">		
				</td>
				<td height="1" colspan="2" bgColor="#EEEEEE">
				</td>
				<td width="37">		
				</td>
			</tr>
			
			<tr>
				<td height="4" colspan="4">		
				</td>			
			</tr>
			
			<tr>
				<td width="33">		
				</td>
				<td colspan="2" align="center">
				<span class="text">This application was built using <a href="http://www.InfoSoftGlobal.com/FusionCharts" target="_blank"><b>FusionCharts v3</b></a> - &quot;Animated flash charts for the web&quot;.</span>
				</td>
				<td width="33">
				</td>
			</tr>
			
			<tr>
				<td width="33">		
				</td>
				<td colspan="2" align="center">
				<span class="text">(c) All Rights Reserved</span>
				</td>
				<td width="33">
				</td>
			</tr>
			
			<tr>
				<td height="4" colspan="4">		
				</td>			
			</tr>
		</table>
		
	</BODY>
	</HTML>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-01-15 (金) 21:30:18 (3388d)