< previous
XML/SWF Charts Reference*1
next >
22.update ライブアップデート機能

<update url='string' 
           delay='int'
           timeout='int'
           retry='int'
      
           mode='string' 
           span='string' 
             />

(説明)

updateは、ウェブページをリロードせずに、間隔を置いて、グラフをアップデートします。
これで、ライブデータと共にグラフを表示するか、時間がたつにつれて強調のためにグラフの外観を変更させるか、
または異なったグラフからスライドショーを作成するのが可能になります。updateは、フルスクリーンでは動作しません。

アップデートコードは、,まさしくグラフのデータではなく、グラフをどのよぷにも変えることができます。
属性が静的なhtmlページの一部になるcanvas_bgは、唯一の例外です(影響を受けない)。

アップデートコードの最も簡単な実現は以下の通りです。

<chart>

</chart>

上のコードは、どんなグラフの変数も設定しないので、グラフにおける変化を全く発生させません。
変化を発生させるには、このように必要なXML要素を作成します。

<chart>

 <chart_type>bar</chart_type>

</chart>

変化をさせるために、およびスケジュールを作り出すには、アップデートコードにもう一度ライブアップデートを使用します。
(すなわち、yourXMLsopurceの中にライブアップデートを書きます)

<chart>

 <chart_type>bar</chart_type>
 
 <update url='http://yourServer/yourXMLsopurce' delay='5' /> 

</chart>

グラフをアップデートするために必要なXML要素を使用して、新しいグラフを作成するようにグラフをアップデートします。
あなたが変えたいグラフの一部だけをアップデートしてください。そして、あなたが変えたくない部品は省略します。

幾つかのブラウザは、繰り返してアップデートソースに呼び出すことの代わりにキャッシュされたアップデートを使用
するかもしれません。
これは1つの新鮮なアップデートだけを見るのに結果として生じます。
これを避けるには、あらゆるユニークな値をそれを新しく保つアップデートURLに追加します。

<chart>

 <chart_type>bar</chart_type>

 <update url='http://yourServer/yourXMLsopurce?uniqueID=0.26440600+1128349620 
    />
</chart>

ユーザによって引き起こされたアップデート(User-Triggered Updates)

マウスクリックとjavascriptに応じる対話的なグラフを作成するには、linklink_dataを参照してください。


(例1mode=data)-Perl

<chart>

   <axis_value max='100' />
   
   <chart_data>
      <row>
         <null/>
         <string>2002</string>
         <string>2003</string>
         <string>2004</string>
      </row>
      <row>
         <string>TOKYO</string>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
      <row>
         <string>OSAKA</string>
         <number>20</number>
         <number>65</number>
         <number>55</number>
      </row>
   </chart_data>
   
   <!-- relative url. Script document: live_update_1.cgi -->
   <update url='live_update_1.cgi' delay='2' /> 

</chart>

ライブアップデート(Perlスクリプト)

スクリプト"live_update_1.cgi"は、XMLコードを生成するPerlスクリプトです。
これは、XMLソースのいずれかのタイプです。Perlスクリプトは、このようになります。

#!/usr/bin/perl

#
#use Jcode; #for kanji
#
print "Content-type: text/html\n\n";
print "<chart>\n";

#generate random data
print "   <chart_data>";
print "      <row>";
print "         <null/>";
print "         <string>2002</string>";
print "         <string>2003</string>";
print "         <string>2004</string>";
print "      </row>";
print "      <row>";
print "         <string>TOKYO</string>";
print "         <number>".rand (90)."</number>";
print "         <number>".rand (90)."</number>";
print "         <number>".rand (90)."</number>";
print "      </row>";
print "      <row>";
print "         <string>OSAKA</string>";
print "         <number>".rand (90)."</number>";
print "         <number>".rand (90)."</number>";
print "         <number>".rand (90)."</number>";
print "      </row>";
print "   </chart_data>";

#schedule for the next update
print "   <update url='live_update_1.cgi?time=".time()."' delay='2' /> ";
print "   <draw>\n <image layer='background' url='./img/fujisan1.jpg' x='0' y='0' width='400' height='250' alpha='75'/>\n";
print "    </draw>\n";

print "</chart>";
#__END__


(例2 mode=strean_category)工事中
(例3 mode=strean_serias)工事中
(例4 その他)

ここに、グラフのタイプを変える別の例があります。
(デフォルト縦棒→折れ線→積み上げ面→横棒→円→縦棒の順に入れ替わります。
 グラフデータは、すべてデフォルトを使用していますのでXMLコード上に見えません)

<chart>
   
   <!-- start with the default chart -->
   
   <!-- relative url. Script document: live_update_2.php -->
   <update url='live_update_2.cgi' delay='2' /> 

</chart>

ライブアップデート(Perlスクリプト)

Perlスクリプト"live_update_2.cgi"はこのようになります。

#!/usr/local/bin/perl

# フォーム内容を取得
if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); }
else { $buffer = $ENV{'QUERY_STRING'}; }
@pairs = split(/&/,$buffer);
foreach $pair (@pairs) {
	($name, $value) = split(/=/, $pair);
	$value =~ tr/+/ /;
	$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
    #&jcode::convert(\$value,'euc'); #EUCへ
	$value =~ s//>/g;
	$FORM{$name} = $value;
}
print "Content-type: text/html\n\n";

print "<chart>\n";

#the counter to keep track of change
if($FORM{"counter"}){
   $counter = $FORM{"counter"};
   $counter++;
}
else{
   $counter=1;
}
if($counter > 5){ $counter=1;}

if($counter == 1){
   print "<chart_type>line</chart_type>";
 }
elsif($counter == 2){
   print "<chart_type>stacked area</chart_type>";
 }
elsif($counter == 3){
   print "<chart_type>bar</chart_type>";
 }
elsif($counter == 4){
   print "<chart_type>pie</chart_type>";
 }
else{
   print "<chart_type>column</chart_type>";
}

#schedule a new update and append the counter to the URL to keep track of change
print "<update url='live_update_2.cgi?counter=".$counter."&time=".time()."' delay='2' />";

print "</chart>\n";

#__END__


< previous このページのTOP next >

*1 XML/SWF Charts Reference原本の著作権は、http://www.maani.usが所有しています

2006.12.8  by ma3ki