< previous | 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に応じる対話的なグラフを作成するには、link と link_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> |
スクリプト"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__ |
ここに、グラフのタイプを変える別の例があります。
(デフォルト縦棒→折れ線→積み上げ面→横棒→円→縦棒の順に入れ替わります。
グラフデータは、すべてデフォルトを使用していますので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スクリプト"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; $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 > |