<?php
//We've included ../Includes/FusionCharts.php and ../Includes/DBConn.php, which contains
//functions to help us easily embed the charts and connect to a database.
include("../Includes/FusionCharts.php");
include("../Includes/DBConn.php");
?>
<HTML>
<HEAD>
<TITLE>
FusionCharts Free - Database + JavaScript Example
</TITLE>
<?php
//In this example, we show a combination of database + JavaScript rendering using FusionCharts.
//The entire app (page) can be summarized as under. This app shows the break-down
//of factory wise output generated. In a pie chart, we first show the sum of quantity
//generated by each factory. These pie slices, when clicked would show detailed date-wise
//output of that factory.
//The XML data for the pie chart is fully created in PHP at run-time. PHP interacts
//with the database and creates the XML for this.
//Now, for the column chart (date-wise output report), we do not submit request to the server.
//Instead we store the data for the factories in JavaScript arrays. These JavaScript
//arrays are rendered by our PHP Code (at run-time). We also have a few defined JavaScript
//functions which react to the click event of pie slice.
//We've used an MySQL databasw which contains two databases.
//Before the page is rendered, we need to connect to the database and get the
//data, as we'll need to convert this data into JavaScript variables.
$link = connectToDB();
//The following string will contain the JS Data and variables.
//This string will be built in PHP and rendered at run-time as JavaScript.
$jsVarString = "";
//Generate the chart element
$strXML = "<graph caption='Factory Output report' subCaption='By Quantity' decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='20' formatNumberScale='0' >";
//initialize index
$indexCount = 0;
// Fetch all factory records
$strQuery = "select * from Factory_Master";
$result = mysql_query($strQuery) or die(mysql_error());
//Iterate through each factory
if ($result) {
while($ors = mysql_fetch_array($result)) {
$indexCount++;
//Create JavaScript code to add sub-array to data array
//data is an array defined in JavaScript (see below)
//We've added \t and \n to data so that if you View Source of the
//output HTML, it will appear properly. It helps during debugging
$jsVarString .= "\t\t data[" . $indexCount . "] = new Array(); \n";
//Now create second query to get date-wise details for this factory
$strQuery = "select * from Factory_Output where FactoryId=" . $ors['FactoryId'] . " order by DatePro Asc";
$result2 = mysql_query($strQuery) or die(mysql_error());
if ($result2) {
while($ors2 = mysql_fetch_array($result2)) {
//Put this data into JavaScript as another nested array.
//Finally the array would look like data[factoryIndex][i][dataLabel/name,dataValue]
$jsVarString .= "\t\t" . "data[" . $indexCount . "].push(new Array('" . datePart("d",$ors2["DatePro"]) . "/" . datePart("m",$ors2['DatePro']) . "'," . $ors2['Quantity'] . ")); \n";
}
//free the resultset
mysql_free_result($result2);
}
//Now create another query to get details for this factory
$strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" . $ors['FactoryId'];
$result2 = mysql_query($strQuery) or die(mysql_error());
$ors2 = mysql_fetch_array($result2);
//Generate <set name='..' value='..' link='..' />
//Note that we're setting link as updateChart(factoryIndex) - JS Function
$strXML .= "<set name='" . $ors['FactoryName'] . "' value='" . $ors2['TotOutput'] . "' link='javaScript:updateChart(" . $indexCount . ")'/>";
}
}
//Finally, close <graph> element
$strXML .= "</graph>";
?>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js">
//You need to include the above JS file, if you intend to embed the chart using JavaScript.
//Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer
//When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors.
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//Here, we use a mix of server side script (PHP) and JavaScript to
//render our data for factory chart in JavaScript variables. We'll later
//utilize this data to dynamically plot charts.
//All our data is stored in the data array. From PHP, we iterate through
//each recordset of data and then store it as nested arrays in this data array.
var data = new Array();
<?php
//Write the data as JavaScript variables here
echo $jsVarString;
//The data is now present as arrays in JavaScript. Local JavaScript functions
//can access it and make use of it. We'll see how to make use of it.
?>
/**
* updateChart method is invoked when the user clicks on a pie slice.
* In this method, we get the index of the factory, build the XML data
* for that that factory, using data stored in data array, and finally
* update the Column Chart.
* @param factoryIndex Sequential Index of the factory.
*/
function updateChart(factoryIndex){
//defining array of colors
//We also initiate a counter variable to help us cyclically rotate through
//the array of colors.
var FC_ColorCounter=0;
var arr_FCColors= new Array("1941A5" , "AFD8F8", "F6BD0F", "8BBA00", "A66EDD", "F984A1", "CCCC00", "999999", "0099CC", "FF0000", "006F00", "0099FF", "FF66CC", "669966", "7C7CB4", "FF9933", "9900FF", "99FFCC", "CCCCFF", "669900");
//Storage for XML data document
var strXML = "<graph caption='Factory " + factoryIndex + " Output ' subcaption='(In Units)' xAxisName='Date' decimalPrecision='0'>";
//Add <set> elements
var i=0;
for (i=0; i<data[factoryIndex].length; i++){
strXML = strXML + "<set name='" + data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' color='"+ arr_FCColors[++FC_ColorCounter % arr_FCColors.length] +"' />";
}
//Closing graph Element
strXML = strXML + "</graph>";
//Update it's XML
updateChartXML("FactoryDetailed",strXML);
}
</SCRIPT>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.text{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>
<CENTER>
<h3><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> - Database + JavaScript Example</h3>
<h5>Inter-connected charts - Click on any pie slice to see detailed chart below.</h5>
<p>The charts in this page have been dynamically generated using data contained in a database. We've NOT hard-coded the data in JavaScript.</p>
<?php
//Initialize the Pie chart with sum of production for each of the factories
//$strXML will be used to store the entire XML document generated
//Create the chart - Pie 3D Chart with data from strXML
echo renderChart("../../FusionCharts/FCF_Pie3D.swf", "", $strXML, "FactorySum", 650, 300);
?>
<BR>
<?php
//Column 2D Chart with changed "No data to display" message
//We initialize the chart with <graph></graph>
echo renderChart("../../FusionCharts/FCF_Column2D.swf?ChartNoDataText=Please click on a pie slice above to view detailed data.", "", "<graph></graph>", "FactoryDetailed", 600, 300);
?>
<BR><BR>
<a href='../NoChart.html' target="_blank">Unable to see the charts above?</a>
<H5 ><a href='../default
FusionCharts免费版
5星 · 超过95%的资源 需积分: 32 173 浏览量
2008-01-04
14:51:09
上传
评论
收藏 2.7MB ZIP 举报 
FusionCharts免费版 （371个子文件） 
Default.asp 8KB FusionCharts.asp 5KB MultiSeries.asp 4KB Combination.asp 4KB Stacked.asp 4KB dataXML.asp 3KB Default.asp 3KB Detailed.asp 3KB SingleSeries.asp 3KB Chart.asp 3KB BasicDBExample.asp 3KB BasicDataXML.asp 3KB Default.asp 3KB MultiChart.asp 2KB Default.asp 2KB SimpleChart.asp 2KB PieData.asp 2KB FC_Colors.asp 1KB BasicChart.asp 1KB DBConn.asp 569B Style.css 2KB Style.css 1KB dtree.css 551B Thumbs.db 527KB Thumbs.db 304KB Thumbs.db 38KB Thumbs.db 18KB Thumbs.db 6KB
ChartElements3.gif 20KB XML_2DStArea.gif 16KB CC_XML_Out1.gif 15KB XML_2DMSArea1.gif 15KB XML_3DCol_1.gif 15KB ChartElements1.gif 14KB ChartElements4.gif 14KB FolderStructure.gif 13KB XML_DY3DColLine.gif 13KB XML_3DStColumn.gif 13KB XML_2DCol_1.gif 13KB CC_Anatomy.gif 11KB XML_DY2DColLine.gif 11KB XML_3DMSColumn1.gif 11KB ChartElements5.gif 10KB XML_2DMSLine1.gif 10KB XML_Line1.gif 10KB XML_2DMSBar1.gif 10KB ChartElements8.gif 9KB ChartElements2.gif 9KB XML_2DStBar1.gif 8KB CC_FC.gif 8KB CC_3.gif 8KB XML_2DMSColumn1.gif 7KB XML_2DBar_1.gif 7KB ChartElements7.gif 7KB XML_2DStCol1.gif 6KB Code_Form.gif 6KB XML_2DPie1.gif 5KB CC_Resize_Out.gif 5KB ChartElements6.gif 5KB XML_2DArea_1.gif 5KB XML_Doughnut1.gif 4KB CC_XML_Out2.gif 4KB CC_4.gif 4KB Code_DB.gif 4KB XML_3DPie1.gif 4KB CC_1.gif 3KB CC_2.gif 3KB globe.gif 1KB help3.gif 1KB trash.gif 1KB question.gif 1KB nolines_plus.gif 870B nolines_minus.gif 861B base.gif 641B musicfolder.gif 633B imgfolder.gif 622B page.gif 582B BtnViewXML.gif 499B AppMessage.gif 437B folderopen.gif 376B folder.gif 372B email.gif 335B cd.gif 239B setup1.gif 195B faq.gif 149B trouble.gif 146B folder2.gif 139B faq4.gif 137B document1.gif 129B note3.gif 123B plus.gif 89B plusbottom.gif 88B minus.gif 86B minusbottom.gif 85B join.gif 69B Bullet.gif 69B joinbottom.gif 66B line.gif 66B empty.gif 62B Default.htm 3KB共 371 条
- 1
- 2
- 3
- 4
- 1
- 2
- 3
前往页