วันพุธที่ 31 สิงหาคม พ.ศ. 2554

การสร้าง Flash chart ด้วย Anychart แบบติดต่อฐานข้อมูล

ใช้ไฟล์อยุ่ 2 ไฟล์ในการแสดงผลคือ
1.
1. สำหรับแสดงผล Anychart
  name : aychart.htm
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="../AnyChart/styles/style.css" rel="stylesheet" type="text/css"></link>
  <link href="../AnyChart/styles/style.css" rel="stylesheet" type="text/css"></link>
  <script type="text/javascript" language="JavaScript" src="../AnyChart/js/AnyChart.js"></script>
  <script type="text/javascript" language="JavaScript" src=".../AnyChart/anychart/gallery/GalleryItem.js"></script>
  <title>ปริมาณน้ำไหลเ้ข้า-ระบายผ่านเครื่องและผ่าน Spillway รายวันเขื่อนสิริกิติ์ </title>
     <script src="../AnyChart/anychart/gallery/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
  <body topmargin="0">
  <table align="center" vspace="0" hspace="0">
   <tr valign="Center">
    <td id="sample" height="100%" colspan="2" align="Center">
     <script type="text/javascript">
AC_FL_RunContent( 'id','chart','name','chart','width','1000','height','600','codebase','http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab','pluginspage','http://www.adobe.com/go/getflashplayer','src','../AnyChart/swf/AnyChart','bgcolor','#FFFFFF','allowscriptaccess','always','flashvars','XMLFile=anydata.php','movie','../AnyChart/swf/AnyChart' ); //end AC code
</script><noscript>
      <object id="chart"
        name="chart"
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="1000"
        height="600"
        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
       <param name="movie" value="../AnyChart/swf/AnyChart.swf" />
       <param name="bgcolor" value="#FFFFFF" />
       <param name="allowScriptAccess" value="always" />
       <param name="flashvars" value="XMLFile=anydata.php" />
     
       <embed type="application/x-shockwave-flash"
           pluginspage="http://www.adobe.com/go/getflashplayer"
           src="../AnyChart/swf/AnyChart.swf"
           width="1000"
           height="600"
           id="chart"
           name="chart"
           bgColor="#FFFFFF"
           allowScriptAccess="always"
           flashvars="XMLFile=anydata.php" />
     
      </object>  
     </noscript>
    </body>
</html>


2. file anychart Setting และส่งออกเป็น Head type XML เพื่อให้ Anychart รู้จัก
   name : anydata.php

<?php require_once('Connections/xxxx.php');
header('content-type:text/xml'); //ส่วนนี้สำคัญมากกำหนดให้ php ส่ง Head เป็น XML ให้ Anychart รู้จัก
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;   
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
mysql_select_db($database_sk50, $sk50);
$query_rs_tu01 = "SELECT xxxxxx";
$rs_tu01 = mysql_query($query_rs_tu01, $sk50) or die(mysql_error());
$row_rs_tu01 = mysql_fetch_assoc($rs_tu01);
$totalRows_rs_tu01 = mysql_num_rows($rs_tu01);
do {
     $data0[] = $row_rs_tu01['dates'];
     $data1[] = number_format($row_rs_tu01['inflows'],3);
     $data2[] = number_format($row_rs_tu01['releases'],3);
     $data3[] = number_format($row_rs_tu01['spillway'],3);
     $data4[] = number_format($row_rs_tu01['tot_release'],3);        
 } while ($row_rs_tu01 = mysql_fetch_assoc($rs_tu01));

 $data = '<data>';
     $data .= "<series type = 'Area' name ='Inflow' color ='#00FF00'>";
 for ($i = 0;$i<$totalRows_rs_tu01;$i++) {
     $data .= '<point name="'.$data0[$i].'" y="'.$data1[$i].'" />';
  }
  $data .= '</series>'; 
     $data .= "<series type = 'Area' name ='Release+Spillway' color ='#FF00FF'>";
   for ($i = 0;$i<$totalRows_rs_tu01;$i++)
    {
     $data .= '<point name="'.$data0[$i].'" y="'.$data4[$i].'" />';
   }
  $data .= '</series>';
       $data .= "<series type = 'Area' name ='Release' color ='#FFFF00'>";
  for ($i = 0;$i<$totalRows_rs_tu01;$i++)
   {
     $data .= '<point name="'.$data0[$i].'" y="'.$data2[$i].'" />';
  }
 $data .= '</series>'; 
   $data .= "<series type = 'Area' name ='Spillway' color ='#FF0000'>";
  for ($i = 0;$i<$totalRows_rs_tu01;$i++) {
     $data .= '<point name="'.$data0[$i].'" y="'.$data3[$i].'" />';
  }
  $data .= '</series>'; 
 
 $data .= '</data>';
?>
<anychart>
<settings>
  <animation enabled="True"/>
</settings>
<charts>
  <chart type="CategorizedVertical">
  <chart_settings>
            <title>
              <text>ปริมาณน้ำไหลเ้ข้า-ระบายผ่านเครื่องและผ่าน Spillway รายวันเขื่อนสิริกิติ์ </text>
            </title>
            <scale minimum="1"/>
            <legend enabled="true" ignore_auto_item="false" padding="5" align="Spread" position="top">
                    <template/>
                    <columns_separator enabled="false"/>
                    <background>
                      <inside_margin right="10" left="10"/>
                    </background>
                    <title enabled ="false" />
            </legend>
            <axes>
                    <x_axis tickmarks_placement="Center">
                            <labels display_mode="Rotated" rotation="90" align="inside" allow_overlap="true"/>
                      <zoom enabled="true" start="400" end="500"/>
                      <line enabled="true"/>
                       <title>
                         <text>date</text>
                       </title>
                    </x_axis>
                    <y_axis>
                             <scale minimum="0"/>
                            <labels>
                                    <format>{%Value}{numDecimals:0}</format>
                            </labels>
                            <title>
                                    <text>mcm.</text>
                            </title>
                    </y_axis>
            </axes>
</chart_settings>
<data_plot_settings default_series_type="SplineArea">
<area_series>
        <marker_settings enabled="True">
                <marker type="Circle" size="4"/>
        </marker_settings>       
        <tooltip_settings enabled="true">
            <format>
                    <![CDATA[{%SeriesName}:{%Name}{enabled:false}={%Value}{numDecimals:2}mcm.]]>
            </format>
            <background>
                    <corners all="3" type="Rounded"/>
                    <effects enabled="false"/>
                    <border type="Solid" opacity="0.2" color="#FF0000"/>
            </background>
        </tooltip_settings>
        <area_style>
        <line enabled="true" color="DarkColor(%Color)"/>
         <fill opacity="0.3" color="%Color"/>
         <states>
          <hover color="white"/>
          </states>
          </area_style>
        </area_series>
</data_plot_settings>
<?php
// Output data section
echo $data;
?>
  </chart>
 </charts>
</anychart>
<?php
mysql_free_result($rs_tu01);
?>
เขียนโดย ที่
ป้ายกำกับ:

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)