[php] Open Flash Chart

其實這篇可以不只是php XD
他還有perl, python, ruby, java, .NET的函式庫可以用 超級強大

Tutorial
Download
真的很強大阿XD

使用:
※OFC 2的版本我怎麼用都不對 怎麼搞都沒有畫面出來阿 囧
所以我就用了1.9.7 這個就夠漂亮夠我用啦~~

<?php
include_once("./open-flash-chart/php-ofc-library/open_flash_chart_object.php");
open_flash_chart_object( 600, 400, './open-flash-chart/chart-data.php', false );
?>

然後在/open-flash-chart裡面 create一個chart-data.php
內容:
<?
$bar = new bar_sketch( 55, 6, '#d070ac', '#000000' );
for( $i=0; $i<count($count); $i++ )
$bar->data[] .= $count[$i];

$g = new graph();
$g->title( 'performance', '{font-size:20px; color: #ffffff; margin:10px; background-color: #d070ac; padding: 5px 15px 5px 15px;}' );
$g->bg_colour = '#FDFDFD';

//
// add the bar object to the graph
//

$g->data_sets[] = $bar;

$g->x_axis_colour( '#e0e0e0', '#e0e0e0' );
$g->set_x_tick_size( 9 );
$g->y_axis_colour( '#e0e0e0', '#e0e0e0' );

$g->set_x_labels( $name );

$g->set_inner_background( '#E3F0FD', '#CBD7E6', 90 );
$g->set_y_max( 10 );
$g->y_label_steps( 2 );
echo $g->render();
?>

$count和$name是從資料庫抓的東西

這樣就好了 一個很可愛的長條圖 我喜歡阿!!

[php] JPGraph

這也是用來畫圖表的工具
不過功能更強大 可是比較醜比較單調
official

方法:
<img src="graphing.php"/>

當作圖片宣告
graphing.php:
//jpgraph的使用方法
//這頁會輸出一張圖片, 欲使用的話插入圖片, src是這頁的URL即可
require("config.php");
include_once ("./jpgraph/src/jpgraph.php");
include_once ("./jpgraph/src/jpgraph_bar.php");

$SQL = "SELECT UID, COUNT(UID) AS count FROM `performance` GROUP BY UID ORDER BY COUNT(UID) DESC";
$query = mysql_query($SQL);
while($result = mysql_fetch_array($query)){
$name[] .= $result['UID'];
$count[] .= $result['count'];
}


// Create the graph. These two calls are always required
$graph = new Graph(600,400,"auto");
$graph->SetScale("textint");
$graph->SetColor("lightyellow");

// Add a drop shadow
$graph->SetShadow();

// Adjust the margin a bit to make more room for titles
$graph->img->SetMargin(60,30,30,50);

// Create a bar pot
$bplot = new BarPlot($count);
// 長條的顏色
$bplot->SetFillColor('navy');
// 長條的寬度
$bplot->SetWidth(70);
$graph->Add($bplot);

// Setup the titles
$graph->title->Set("performance of pilotTV");
//設定字體 設成中文字
$graph->title->SetFont(FF_CHINESE, FS_NORMAL, 12);


$graph->yaxis->SetFont(FF_CHINESE);
$graph->xaxis->SetFont(FF_CHINESE);

$graph->xaxis->title->SetFont(FF_CHINESE, FS_NORMAL, 12);
$graph->yaxis->title->SetFont(FF_CHINESE, FS_NORMAL, 12);
$graph->xaxis->title->Set("姓名");
$graph->yaxis->title->Set("業績");
$graph->yaxis->title->SetAngle(0);
$graph->yaxis->title->Align('left');
$graph->xaxis->SetTickLabels($name);

// Display the graph
$graph->Stroke();
?>

就這樣 囧
參數有很多很多要設定 可是可以設定的滿完整的
抓下來的檔案有詳細的document和class說明
是可以仔細研究的工具之一

[php] PHP/SWF

一個用來畫圖表(長條圖圓餅圖bla)的元件
很漂亮阿!! 而且整個會動超酷
官方頁面

使用:
include "./chart/charts.php";
echo InsertChart ( "./chart/charts.swf", "./chart/charts_library", "sample.php", 600, 400);
?>

include進來charts.php(函式庫)
然後把想要畫成的檔案寫在sample.php裡面

sample.php:
include "./chart/charts.php";
require("config.php");

$SQL = "SELECT UID, COUNT(UID) AS count FROM `performance` GROUP BY UID ORDER BY COUNT(UID) DESC";
$query = mysql_query($SQL);
$name = array("");
$count = array("performance");
while($result = mysql_fetch_array($query)){
$name[] .= $result['UID'];
$count[] .= $result['count'];
}

//$chart['chart_type']="bar"; //橫條圖
//$chart['chart_data'] = array(array("", "2001", "2002", "2003", "2004"),
// array("Region A", 5, 10, 30, 63),
// array("Region B", 100, 20, 65, 55),
// array("Region C", 56, 21, 5, 90));
$chart['chart_data'] = array($name,$count);

$chart[ 'axis_value' ] = array ( 'min'=>0, 'font'=>"arial", 'bold'=>true, 'size'=>12, 'color'=>"000000", 'alpha'=>50, 'steps'=>4, 'prefix'=>"", 'suffix'=>"", 'decimals'=>0, 'separator'=>"", 'show_min'=>true );

$chart[ 'chart_border' ] = array ( 'color'=>"000000", 'top_thickness'=>1, 'bottom_thickness'=>2, 'left_thickness'=>0, 'right_thickness'=>0 );
//$chart[ 'chart_data' ] = array ( array ( "", "2005", "2006", "2007" ), array ( "region A", -20, 45, 100 ), array ( "region B", -40, 65, 80) );
$chart[ 'chart_grid_h' ] = array ( 'alpha'=>20, 'color'=>"FFFFFF", 'thickness'=>1, 'type'=>"dashed" );
$chart[ 'chart_rect' ] = array ( 'positive_color'=>"3333FF", 'negative_color'=>"FFFFFF", 'positive_alpha'=>30, 'negative_alpha'=>0 );
$chart[ 'chart_transition' ] = array ( 'type'=>"scale", 'delay'=>.5, 'duration'=>3, 'order'=>"series" );
$chart[ 'chart_value' ] = array ( 'color'=>"ffffff", 'alpha'=>85, 'font'=>"arial", 'bold'=>true, 'size'=>15, 'position'=>"top", 'prefix'=>"", 'suffix'=>"", 'decimals'=>0, 'separator'=>"", 'as_percentage'=>false );

$chart[ 'draw' ] = array ( array ( 'type'=>"text", 'color'=>"000000", 'alpha'=>10, 'font'=>"arial", 'rotation'=>-90, 'bold'=>true, 'size'=>75, 'x'=>-20, 'y'=>300, 'width'=>300, 'height'=>200, 'text'=>"performance", 'h_align'=>"left", 'v_align'=>"top" ) );

$chart[ 'legend_label' ] = array ( 'layout'=>"horizontal", 'font'=>"arial", 'bold'=>true, 'size'=>15, 'color'=>"333355", 'alpha'=>90 );
$chart[ 'legend_rect' ] = array ( 'x'=>75, 'y'=>27, 'margin'=>5, 'fill_color'=>"000066", 'fill_alpha'=>0, 'line_color'=>"000000", 'line_alpha'=>0, 'line_thickness'=>0 );

$chart[ 'series_color' ] = array ("666666"); // 長條的顏色
$chart[ 'series_gap' ] = array ( 'set_gap'=>40, 'bar_gap'=>-25 );

SendChartData ( $chart );

?>
這樣就有美美的圖了 驚!
不過按下圖後會自動連到首頁
要license才可以作圖的互動 可惜阿

SyntaxHighlighter 2.0

http://code.google.com/p/syntaxhighlighter/

It might be used in web pages in the future..

讓Blogger顯示程式碼

/* by minealan 讓文章可以貼程式碼*/
CODE {
display: block;
/* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em; }


把這段貼到Blogger的範本裡就好

jQuery UI Tabs

http://www.stilbuero.de/jquery/tabs_3/
doc: http://docs.jquery.com/UI/Tabs

以下節錄自魚乾的blog http://kevyu.blogspot.com/2008/03/jquery-tabsversion-3.html


利用jQuery完成的tab
比上一版多了
1.Tabs Extensions
2.Rotating tabs 會輪播
3.Nested tabs 就多層tab

除了多新功能外
原本的使用上也更加方便
也解決了一些問題
原來只能固定用#container-n
這些原先設定的div現在都可以自訂了
加上更操作上都以jQuery的存取方式設計
coding上更加便利...只要copy...paste.....

問題：
取得目前選取的tab
官網提供的方法
var $tabs = $('#example').tabs().data('selected.tabs');
只能在ie跑，firefox會印出undefine (後記...怎麼好像又可以= =")(後記..原來有偷改)
即然這樣就自己寫吧，但不能在ie跑...
因為ie會自動幫href加絕對路徑....更
var currentTab; //記錄目前選到的tab
$('#container-bag > ul').tabs({
select: function(ui) {
currentTab="#"+ui.panel.id;
}
});
$("#example > ul > li").find("a[@href="+currentTab+"]").text();



*取得目前tab名
var selected =$('#container-tab').tabs().data('selected.tabs');
var tabName=$("#container-tab" > ul > li").eq(selected).text();

上述方法可以取到值，但會導致tab無法切換了
所以就照著官網寫的方法
var selected =$('#container-tab > ul').data('selected.tabs');


**自訂jTab**

jTab裡也可以加圖示進去
把編輯、刪除放在同一格裡還滿實用的
不過似乎jtab多了一層，使得點擊圖示會trigger，但cursor不會改變 ... 慘念
前面也可加個「新增」鈕，當然要自己加囉

flot - plot with jQuery

http://code.google.com/p/flot/

以下節錄自魚乾的blog http://kevyu.blogspot.com/2008/03/google-code-flot.html


利用jQuery完成的圖表
也不用設定css，而是透過程式裡的參數
這點滿不錯的，免得影響到其他的設定
也滿容易上手的...
雖然偶爾還是卡住... >"<

*自訂x座標文字tick
//1.先做tick array
var titleName = [];
for(i){
//依display順序填入array
titleName.push([i, title_Name])
}

//2.再設定x座標
xaxis: {
min: 0,
ticks: titleName
}


常見問題：
卡住的地方
flot透過一個id名為placeholder的div裡做圖表
雖然是在html裡下的id，但似乎在google裡的js檔還是有靜態命稱
在js檔裡是沒找到placeholder，但當更改命名時，再透過$.plot($("#divName")
就畫不出來，但只要名稱一樣就沒問題

*隱藏圖表問題
如果將圖表隱藏後，得先顯示才能畫
否則Y軸的title會"黏"在原點的Y軸上
或出現錯誤息：throw一個錯誤未handle

jQuery Treeview

Doc & Demo: http://docs.jquery.com/Plugins/Treeview/treeview

jQuery Grid

也是用在表格的，但功能比tablesorter強大很多..

Home: http://www.trirand.com/blog/
Demo: http://trirand.com/jqgrid/jqgrid.html
Doc: http://www.secondpersonplural.ca/jqgriddocs/index.htm

以下引用自魚乾的blog http://kevyu.blogspot.com/2008/07/jqgrid.html

3.environment配置
有3個地方需要調整

(1)js的路徑
在jquery.jqGrid.js裡，有個pathtojsfiles變數
var pathtojsfiles = "js/"; // need to be ajusted
此為設定要載入的js檔路徑

(2)CSS路徑

href就指到預設的位置
<link rel="stylesheet" type="text/css" media="screen" href="lib/jqGrid/themes/basic/grid.css">
(3)圖檔路徑
在實作時，要給圖片的位置

var gridimgpath = 'themes/basic/images'; //預設的圖片
jQuery("#tbRecordList").jqGrid({
colNames: ['日期', '分數',
...
imgpath: gridimgpath, //設定gridimgpath
});


**有的沒的
//清空grid內容
$("#_TableName").clearGridData();

**備註
1.每個欄位長度至少要60以上，不然排序的icon(遞增，遞減)會看不見 (新版的不會了)
2.當遇到p.mutliselect是null時，代表設定table id不一致或未啟動jqGrid()的設定
3.利用jquery.load進來的頁面，如果也有include jquery.js會導致無法使用jqgrid的method,

[php] 在server中搜尋檔案

在php Manual看到的，用成class的方式去寫
覺得很完整所以貼上來
class RecDir{
protected $currentPath;
protected $slash;
protected $rootPath;
protected $recursiveTree;

function __construct($rootPath,$win=false){
switch($win){
case true:
$this->slash = '\\';
break;
default:
$this->slash = '/';
}
$this->rootPath = $rootPath;
$this->currentPath = $rootPath;
$this->recursiveTree = array(dir($this->rootPath));
$this->rewind();
}

function __destruct(){
$this->close();
}

public function close(){
while(true === ($d = array_pop($this->recursiveTree))){
$d->close();
}
}

public function closeChildren(){
while(count($this->recursiveTree)>1 && false !== ($d = array_pop($this->recursiveTree))){
$d->close();
return true;
}
return false;
}

public function getRootPath(){
if(isset($this->rootPath)){
return $this->rootPath;
}
return false;
}

public function getCurrentPath(){
if(isset($this->currentPath)){
return $this->currentPath;
}
return false;
}

public function read(){
while(count($this->recursiveTree)>0){
$d = end($this->recursiveTree);
if((false !== ($entry = $d->read()))){
if($entry!='.' && $entry!='..'){
$path = $d->path.$entry;
if(is_file($path)){
return $path;
}
elseif(is_dir($path.$this->slash)){
$this->currentPath = $path.$this->slash;
if($child = @dir($path.$this->slash)){
$this->recursiveTree[] = $child;
}
}
}
}
else{
array_pop($this->recursiveTree)->close();
}
}
return false;
}

public function rewind(){
$this->closeChildren();
$this->rewindCurrent();
}

public function rewindCurrent(){
return end($this->recursiveTree)->rewind();
}
}


to use:

$d = new RecDir("./",false);
echo "Path: " . $d->getRootPath() . "<br>";
while (false !== ($entry = $d->read())) {
echo $entry."<br>";
}
$d->close();

[jQuery] tablesorter

http://tablesorter.com/docs/

一個jQuery提供的表格服務
可以做sorting、分頁，還可以指定一頁要顯示幾筆資料

使用方法:
把js檔和CSS都import進來
(若要使用分頁的話，記得import tablesorter.pager的CSS和js)
然後將table分成和兩部份
裡面是表格標頭，用成的方式
則是把資料都抓進來

宣告方式則是這樣:
$(function () {
$("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});

*<2010/04/08> 補充一下 如果在表格中有某行有colspan或rawspan就無法使用