在自行撰寫的 DNN Module 中使用 & 列印 Microsoft Chart Controls 的注意事項

前陣子因緣際會的又摸了一下 DNN，根據官網上的 Basic DotNetNuke Module Development Video 教學影片的說明開始自行撰寫模組，並且在模組中用到 Microsoft Chart Controls 來呈現圖表。過程中陸續遇到一些問題，以下是解法。

問題一：error: Invalid temp directory in chart handler configuration [c:\TempImageFiles\]

這個問題挺好解的，因為錯誤訊息很明確，直接 Google 就可以找到解法，重點在於自己新增的 DNN Module 專案（位於 C:\inetpub\wwwroot\dotnetnuke\DesktopModules\[YourModule]）下的 web.config 是找不到 Chart Handler 的設定的，必須要去找最上層的 DNN 站台的 web.config，位置是 C:\inetpub\wwwroot\dotnetnuke\web.config：

找對 web.config 檔案以後，把多餘的「c:\TempImageFiles\」設定刪除，或者指定一個確實存在且有寫入權限的目錄即可。

問題二：無法列印 Chart Control 圖表，列印時會看到表示圖檔不存在的紅色叉叉


經過一番搜尋，最後在 StackOverflow 找到這篇文章，雖然該文作者說在 web.config 的 ChartImageHandler 設定中加上「deleteAfterServcing=false」對他們的專案偶爾也沒作用，但我試著加上這個設定之後，測試到目前為止每次都可以順利的把圖表列印出來！而從這個問題一直到現在都沒人回覆的狀況來看，大概只有極少數狀況在加上此設定以後仍然無法確保100% 正確的執行結果，因此有需要列印 Chart Control 的內容的話，加上這個設定就沒錯啦！（看起來就是叫系統不要把暫存圖檔立刻刪掉）


以上就是最近在 DNN Module 中使用 Microsoft Chart Control 遇到的問題 & 解法，有了這次的經驗，下次開發就可以更順利啦！

[Chart Control 技巧篇] 改變特定軸線的樣式

前陣子坎尼看到論譠上問了標題這個問題
想說試著來解解看 (以前沒遇過這個需求 :D
另外本篇來提供一下坎尼平常思考問題的方式

---

I.問題思考方式

先來看一下問題
「設定Y軸的25是一條有顏色的線(有點類似標準線的意思)，
其它Y軸的線正常顯示」
坎尼先擬定了幾個主要的方法：

利用 Custom Label 直接設定特定線段的樣式

開啟 Secondary Y 則是想用其他線段來蓋掉原本的線段

所以坎尼開啟了 Visual Studio，開始測試相關屬性
(這邊可以用心智圖之類的工具來輔助思考，如上圖)

從 Custom Label 的經驗得知，並無法只設定特定格線的樣式
格線屬性為整個 Y 軸所共用
但可以修改 GridTicks 屬性，使想要的格線顯示出來
 
經由上面的經驗，坎尼想到了 ChartArea 預設還有另一條軸線
如果同時打開兩邊的軸線，應該其中一邊的樣式會蓋掉另外一邊吧?

坎尼打開 Secondary Y ，加入 Custom Label 實驗出來的成果
Bingo!!!
Secondary Y 軸的樣式會蓋住主軸線的樣式，測完收工!!!

II.範例

上面已經將過程說明，所以這邊放一下實際的範例圖片吧

打開 ChartArea 的 Axes 集合
調整 Secondary Y 的 MajorGrid 線條樣式
建立 Custom Label，並設定顯示位置為 25
將 GridTicks 屬性設定成 Gridline，讓 Chart 只顯示自訂 Label 以及它的格線
實際設定完成後的原始碼
執行畫面

III.小結

其實坎尼寫到這邊發現，用 MinorGrid 是否也能達成此項需求?
這邊就賣個關子，不公布答案，讀者們有興趣可以試試看 :D

思考問題的過程其實很有趣
能建立起一套自己的思考方式，其實對自己的未來很有幫助 :P

[輕鬆學會 Chart Control] 利用 Generic Handler 提供 Chart 圖片資訊

有時候你的 Team Member 想要使用 Chart 來令資訊圖形化
但卻不會用 MS Chart Control 或是其他圖表工具時該怎麼辦呢?
好死不死他又來拜托你
此刻本篇範例就派的上用場啦~

---

I. 準備

首先，在 Web 專案中建立 Generic Handler 的檔案
先引用 System.Web.UI.DataVisualization.Charting Namespace
 
接著進入 class 中撰寫動態建立 Chart Control 的方法 設定完樣式和屬性之後，可從外部取得資料來源再進行繫結
再利用 Chart.SaveImage 的方法，將圖片丟給 OutputStream 即可
(不知道這個方法怎麼用的人，可以參考 這篇)

II. 使用方式

「雖然寫好了產生 Chart 圖片的 Code，但是該怎麼使用呢? 」

方法很簡單，只需在 Web 頁面上加入 img 的控制項
再將來源指定給寫好的 .ashx 即可
 
打開原始檔就能看到來源其實是 .ashx

III. 結論

利用上述的方式，就可以簡單的分工撰寫頁面及圖形

參考來源：

HttpResponse.OutputStream Property

Chart.SaveImage Method

[輕鬆學會 Chart Control] 將圖表匯出至 Excel - 使用NPOI

好久沒開 Chart Control 議題了
剛好前陣子 Codeplex 出現可以輕鬆建立 Excel 檔案的 Library-NPOI
於是坎尼想說研究一下，看能不能把 Chart Control 匯出圖片到 Excel 中
沒想到只花了不到1小時就研究出來了，真的是很簡單 :D

---

I.準備

首先是下載 NPOI Library，並將它加入至專案中
其他相關說明可以參考 MSDN 上的文章
在 Server 端存取 Excel 檔案的利器：NPOI Library

坎尼這邊就不多話，直接進入今天主題

II.範例

首先開啟一個 Web 專案，把 NPOI 的 Library 加入專案中
建立一個 Web page，在畫面上放入一個 Chart Control
另外再放個 Gridview 來呈現資料 ，最後建立 Button 來觸發匯出的事件
將畫面切換到 .cs 檔裡
引用這次範例中會用的兩個 Namespace：
NPOI.HSSF.UserModel – 建立 Excel 內容
NPOI.HSSF.Util - 建立相關樣式屬性
 
接著到匯出按鈕事件，建立 workbook 部分也跳過 (那不就什麼都沒講嗎? 毆
上面的 Code 就不詳細說明，主要是將 Chart 存成 Stream
再利用 NPOI 提供的圖片插入方法，把 Stream 轉為 Excel 可讀取的圖片格式
(注意圖片的匯出格式以及匯入格式)
最後再將整個 workbook 匯出即可 (見下圖)
資料部分坎尼本來還想加上樣式，後來覺得有點麻煩就作罷 (喂!

III.結論

NPOI 真的是很好用的 Library，建議有需求的人都可以去下載來試玩看看

本次範例 下載

參考資料：
NPOI Codeplex
在 Server 端存取 Excel 檔案的利器：NPOI Library
用 NPOI 操作EXCEL－－插入圖片

[Share] 學習 Chart Control 的資源

今天來介紹些學習 Chart Control 的資源

---

I. Blogs

Alex Gorev's Weblog
Alex 為 Chart Control Forum 的板主
之前在 Dundas 服務了八年，目前在 SSRS Data Visualization team 工作，
SSRS 及 .NET Framework 裡的 Chart Control 也是來自於這個 team 的研發


Scott Mitchell's blog
Alex 最新一篇推薦的 blog
待會兒會介紹這個 blog 幾篇文章的內容

II. Introduction

現在就來介紹 Scott Mitchell 的幾篇文章，補充一下坎尼 blog 上沒寫過的 XD


(i) Programmatically Generating Chart Images
之前坎尼也介紹過如何匯出 Chart 圖片
Scott 這篇又更加深入的教大家如何加上浮水印
以及如何直接用 email 把 Chart 圖片發送出去


(ii)Adding Statistical Formulas
Scott 在這篇教大家怎麼加入統計公式
主要是利用 Chart 底下 DataManipulator.Statistics 裡提供的靜態方法
另外 DataManipulator 還提供 Financial Formula 的運算，有興趣的人可以看看


(iii)Enhancing Charts With Ajax
坎尼有介紹過替 Chart 加上 javascript 事件
其實把事件替換成 Ajax 方法的呼叫即可
這篇 Scott 教的剛好是坎尼沒介紹的 Ajax 互動事件
想讓使用者有更好的體驗，一定不能錯過此篇

III. Conclusion

參考連結：

• Alex Gorev's Weblog
• Scott Mitchell's blog
• DataFormula.Statistics Property
• StatisticFormula Class
• Financial Formulas (Chart Controls)
• DataManipulator.FinancialFormula Method

輕鬆學會 Chart Control - 替 chart 加上 javascript 事件

之前坎尼介紹過 如何用 postbackvalue 來與使用者互動
但每次都要 postback 很麻煩，有些動作其實用 javascript 來做就好
今天就來教如何加入 javascript 事件

---

I.實戰

首先要在畫面上佈置 Chart (如下圖

接著就是撰寫 javascript function，本次範例是把訊息 alert 出來

最後是今天的主角，Series 裡的 MapAreaAttributes 屬性
這個屬性可以替每個 DataPoint (也就是每一條長條圖) 加上可支援的屬性

如 Url、Target、javascript 事件

坎尼在範例中把每個長條加上 onclick 事件
來呼叫前面所寫的 javascript function

另外再提醒一點，這個屬性也可支援 Chart Keywords
所以坎尼把 X 軸關鍵字 #VALX 傳給 javascript function
接著把DataSource繫結到 Chart 後，就趕緊來看一下成果吧!!!

點了第一個 Column，果然跳出了該店家的訊息
以上，能簡簡單單地把 javascript function 送給 Chart 執行

II. 小結

MapArea 是 Chart 中很好用的屬性，小平叔贏牌還要靠它呢!!!
而且不只資料點有，其他像 Label、Legend、Title 都有 MapAreaAttributes 屬性
所以想要簡單打造出豐富的互動式圖表已經不是遙遠的夢想

還沒學 MS Chart Control 嗎? 快點來學吧 ^^

III.本次範例下載及參考資料

• 範例下載
  
• MapArea.MapAreaAttributes Property
  

輕鬆使用MS Chart Control - 親愛的，我把餅切開啦

之前在 簡單設定圖表外觀 裡有提過
將圓餅圖裡的 Exploded 屬性設成 true
即會使圓餅分開，令使用者有互動的感覺
本篇還會提到善用特定關鍵字來讓互動事件更多元化

---

I. 設計圖表

首先，當然是先放個 Chart 到頁面上
坎尼還放了個 Label，等下要顯示點擊訊息
(Chart 的樣式設計就不多談了，請自行發揮)


接著設定 Label 顯示文字
這裡用的是 #PERCENT 關鍵字，顯示 Y 值所佔全部的百分比
後面的 P1 則是精確度的 Format


LegendText 則設成 類別 : 所佔百分比


重要的 PostbackValue 則是放入了三個關鍵字
#INDEX：表示此項資料所在的索引位置
#VALX 和 #VALY 分別是 X 軸及 Y軸的值
並用「 , 」把三個值給分開

II. 後端程式碼

資料繫結部份請直接看下圖

接著撰寫 Click 事件
利用 String.Split 方法將組合而成的 PostbackValue 給切開
切開的值依序分別為：Index、X、Y

將 Index 傳入 Chart1.Series[0].Points 中以取得點選的 DataPoint

再將 CustomProperties 的 Exploded 設為 true
如此一來，被點選的資料點即是顯示為分離狀態

再將 X 及 Y 值丟到 Label 上顯示
最後再補個目前時間，大功告成!!!!

III. 成果

可以看到，圓餅圖上標籤顯示為百分比
而圖例標籤上則是名稱加百分比

點選之後，該資料點呈分離狀
Label上的訊息為資料名稱及滿意度的件數

IV. 小結

利用關鍵字可省去不少麻煩
還有很多個關鍵字沒介紹，有興趣的人可以自行研究一下

本次的範例下載

輕鬆使用MS Chart Control - 使用多個 Y 值

坎尼在一開始學習 Chart Control 怎麼用的時候，就一直有這個疑問

怎麼指定 Y 值的屬性名稱是 YValueMembers ?
看起來似乎是可以傳入複數欄位? 但實際上填入複數又會出錯
今天就是探討一下如何指定多個欄位給 Y 欄位

---

其實方法很簡單，設定 YValuesPerPoint 屬性即可，以下是範例

UI設定

先在WebForm上加入 Chart Control
設定一下要顯示的樣式

設定 ToolTip 顯示內容，這邊會用到 3 個 Y 值來當作提示顯示
Y值的關鍵字為：#VAL 或是 #VALY
若要使用複數Y值，則是在 #VALY 後加上 INDEX，ex. #VALY2

設定完的 Html Source

撰寫繫結 Source Code

將 Series1.YValuesPerPoint 設定為3
然後把欄位名稱以 , 分隔指定給 YValueMembers

執行成果

小結

多項Y值是很好用的一項屬性
可惜只能給予數值型態的欄位
若是給文字型態，該欄位的值會全都變成 0，這點是需要注意的地方

輕鬆使用MS Chart Control - 匯出圖片

雖然在圖片上直接按右鍵就可以另存圖片 (沒設定權限的話
不過客戶還是想要有個按鈕能讓圖片下載
所以坎尼只好再想辦法滿足客戶的需求

---

UI設定

首先，在畫面上準備好下載按鈕和圖表
順便設定一下樣式和內容，這部分之前講過很多次就不多談了

撰寫按鈕事件

先宣告 System.IO.MemoryStream 物件，用來承接 Chart 的 binary 資料
再利用 Chart.SaveImage 方法將資料流放到 MemoryStream 中
把 Stream 轉為 byte[] 陣列後，再丟到匯出的方法中處理

Chart.SaveImage 儲存方式有兩種：FilePath 及 Stream
但用 FilePath 的方式是儲存在 Server 端，要另外再多做個動作才能讓使用者下載
所以坎尼就選用 Stream 來處理

接著是匯出 byte[] 裡的二進位資料
這邊坎尼是參考董大偉老師的 如何在ASP.NET中下載檔案
另外函式做了點小修改，也可以用來匯出其他二進位的資料流


執行程式，點下載圖片後會直接將圖片匯出

噹噹噹噹噹，圖片就這樣下載到使用者的電腦上啦


此次的範例檔下載

小結

上面有講到明明右鍵就可以下載，但為什麼還要弄個按鈕出來，是要累死工程師嗎?
最近坎尼有看到一篇 Web Design 的文章講的很好
(原文是英文，坎尼大致上翻譯一下意思)
「盡量把操作弄成最愚笨的方式，使用者會比較容易使用」
「但仍要保留給進階使用者進階技巧的使用權利，他們會希望用一組快速鍵達到滑鼠點三次的要求」

所以設計者們，記得有機會就多留點隱藏技巧，令使用者有驚喜的感覺
不過不要留了後門給駭客進出啊 XDDDD

輕鬆使用MS Chart Control - 簡單設定圖表外觀

本來坎尼要寫比較進階版的圖表應用
但上一篇實在太長了，所以先來篇短文休閒一下

---

I. 情境

校長打開電腦系統查閱一年級各班平均成績
由於2班有他喜歡的小蘿莉學生-心亞
於是校長進一步點開2班的詳細資料


校長發現心亞的國文不是很好，於是廣播要她放學後留下來...(故事請自己補完)

II. 實作

首先要設定圖表物件及基本樣式，下圖為已設定好之圖表區

要讓圖表呈現3D屬性，需要到 ChartArea 裡設定 Area3DStyle


要讓長條圖變得更好看，則是要打開 Series 的 CustomProperties 做設定
範例裡把 DrawingStyle 設成 Cylinder

要注意的是，CustomProperties 會依圖表類型不同而改變
長條圖、圓餅圖、折線圖的 CustomProperties 屬性大多不相同

下圖為完成後的 Html Code

接著要撰寫 Chart_Click 事件 (其他繫結事件之前談過很多次了，這邊省略)
這邊作了點小處理，讓圓餅圖在點下之後，會呈現分離狀態

圓餅圖的 PostBackValue 為 X 軸值，也就是班級名稱
(不曉得 PostBackValue 的人請先看這篇)
利用迴圈把已繫結的資料點 (Points) 抓出來和 PostBackValue比對
找出使用者按下的資料點後，將其 CustomProperties 的 Exploded 屬性設為 true

設定 CustomProperties 語法為 Chart.Series[a].Points[b]["屬性名稱"] = "屬性值";
Exploded 為圓餅圖(Pie)和甜甜圈圖(Doughnut)專用
目的為讓圖表呈現 pizza 型的切片狀態

接著就是利用 PostBackValue 找出班上的學生
其實用 Gridview 將清單列出也行，本篇是在講 Chart 所以就用長條圖來代替

執行後，大功告成，校長可以手指動一動就輕鬆的看到全校資料了

Chart Control 的屬性很多，有意要學好的人一定要多加練習，熟悉各項設定
MSDN Chart Control 論譠 是個很好的資源取得地，可多加利用

本次的範例檔下載

輕鬆使用MS Chart Control - 讓使用者與圖表互動

一般圖表多半只是以靜態的方式呈現
MS Chart Control 既然為 Server Control，當然支援後端事件啦
下面的範例會帶讀者們一步一步的完成 Chart 屬性設定及撰寫事件

---

情境：

在圖表一有本班學生成績平均，但老師想看單一學生的各科成績
此時只要將滑鼠移到該學生的長條圖上，當游標呈手狀

點下後即會出現該學生各科成績

要完成上面的功能需要很多程式碼嗎? 一點也不
但由於要設定的屬性眾多，所以這邊坎尼抓了不少張圖作說明

下圖是所有屬性設定完成後的狀態
很神奇地，這邊只需要單單一個 Chart Control 即可

1.建立 ChartAreas 及 Series

這次範例所需設定屬性，會到用到 Chart 三員大將 - ChartAreas、Legends、Series


首先點開 ChartAreas 新增一個圖表區，此時會發現原本的 Chart 被往上推擠
但由於尚未設定完，所以下方會是一片空白，這片空白就是新的 ChartArea


接著點開 Series 集合，加入新的 Series 並重新命名
分別用來顯示「平均」「數學」「英語」「國文」等分數

剛剛有提到一開始是看到所有學生的平均分數
所以這邊把 Average 的 ChartArea 設定為 ChartArea1 (第一圖表區)

另外三科成績則設定為 ChartArea2 (第二圖表區)
按下確定後，應該可以看到兩個圖表區都出現資料了

2.設定 Legend

接著打開 Legends 集合，加入新的 Legend 來顯示第二圖表區的圖例
這邊需要將 DockedToChartArea 屬性設定為 ChartArea2

由於一開始圖表區2應為不存在，但Legend2仍然會出現 (請將它們視為不同個體)
所以這邊還要將 Enabled 屬性設為 False

此時此刻雖然畫面上出現了圖例，但圖例的名稱卻不是坎尼所想要的
於是坎尼打開了 Series 集合，設定呈現的 Legend 以及 LegendText
(是的，你沒看錯，要在 Series 裡設定 Legend 的相關顯示設定)

把 Math、English、Chinese 的 Legend 目標設定為 Legend2
並將 LegendText 分別設定成「數學」、「英文」、「國文」

Average 為 Legend1顯示，LegendText 為平均分數

上圖出現了個 Important 的字樣，但這屬性稍後再提

3.加入 Label 及 PostBackValue

接著加入圖表上要顯示的 Label 屬性
先到 Series 的 Label，會發現旁邊有個 button，點開後可以填入 Label 上要呈現的文字
當然也有預先設定好的 keyword，點 Insert New Keyword 即可插入

圖中 keyword 為 #VALY ，代表 Y 軸的值，範例中即為各科及平均分數
當然這邊要一個一個 Series 去設定，坎尼就不放圖囉

再回到更之前的圖，這裡 PostBackValue 放了 #VALX

#VALX 指的是 X 軸值的 keyword，也就是每個學生的人名
但 PostBackValue 是什麼呢? 大家應該都猜到了，就是送回後端時所傳送的數值

當然，要配合 Chart 的 Click 事件才有效果

到此經過了漫長的時間，總算是設定好 Chart 的各項屬性了
看一下 Html Code 可以發現，其實沒有想像中的落落長

4.撰寫圖表資料後端程式碼

在 Page_Load 放入取得第一圖表區資料的方法
X軸為學生名字，Y軸為平均成績

資料來源，這邊用假造的資料取代資料庫

接著是最重要的 Click 事件
利用 e.PostBackValue 到資料來源抓取學生資料 (e.PostBackValue為學生名字)
將學生成績利用 Series.Points.AddXY 的方式放到圖表區2
(詳細內容可點圖放大，註解皆有說明)


完成上列步驟後，即可讓你的圖表和使用者互動囉