黯然銷魂 之 網頁繪製圖表 Google Charts with JavaScript.... ADO.NET取得圖表原始資料

2015年11月23日星期一

黯然銷魂之網頁繪製圖表 Google Charts with JavaScript.... ADO.NET取得圖表原始資料

前兩篇文章介紹 Google Chart，並且把 "前端"程式 (JavScript) 改寫到ASP.NET (Web Form)後置程式碼

這兩篇文章的內容，都有 YouTube教學影片的簡介

藉此也讓各位看到「實際操作、(影片)教學」會比自己慢慢K書、看文件、K程式碼有效率多了。

黯然銷魂之網頁繪製圖表 Google Charts with JavaScript....好強、好簡單啊！太好用了，以後用不到怎麼辦？

http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx

黯然銷魂之網頁繪製圖表 Google Charts with JavaScript....與ASP.NET網頁結合 (ClientScriptManager.RegisterStartupScript 方法)

http://www.dotblogs.com.tw/mis2000lab/archive/2014/05/10/google_charts-with-asp.net-clientscriptmanager.registerstartupscript.aspx

一旦把 "前端"程式 (JavScript) 轉移到「後置程式碼」之後

（請善用上面第二篇文章介紹的ClientScriptManager類別），就是我們動手腳的好時機

「組合字串」、「字串相連」，一直以來都是資料庫程式、網頁程式擅長的作法

（但也因為動態地「組字串」造成 SQL Injection資料隱碼攻擊、XSS攻擊....等等缺失）

請透過「參數」的寫法來避免，詳見以下文章說明：

ADO.NET 參數寫法 Parameter（避免SQL Injection資料隱碼攻擊）

http://www.dotblogs.com.tw/mis2000lab/archive/2014/08/29/ado.net_parameter_sql_injection_20140829.aspx

Microsoft Anti-XSS (Anti-Cross Site Scripting Library) 避免XSS攻擊

http://www.dotblogs.com.tw/mis2000lab/archive/2014/11/04/microsoft_anti-xss_v43.aspx

首先，我們來看看原始的 Google Chart的資料格式（Raw Data）有哪些？

原廠網址 https://developers.google.com/chart/interactive/docs/datatables_dataviews?hl=zh-TW

以簡單的圓餅圖（Pie Chart）、地理圖表（GeoChart）為例，

兩者比較就能看出來：

甚至還能從 "google試算表"取得資料，透過大家熟悉的SQL指令來查詢

//*** 查詢 Google的一份試算表。

dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',

query: 'SELECT A,D WHERE D > 100 ORDER BY D',

這就是我強調：盡量學習「國際標準」的作法，可以避免單一廠商、單一技術改朝換代的威脅

寫在 HTML網頁內，前端 JavaScript的資料格式如下：

// 加入原始資料

data.addRows([

['Mushrooms', 3],

['Onions', 1],

['Olives', 1],

['Zucchini', 1],

['Pepperoni', 2]

]);

我們可以看出他的架構，每一筆記錄就是 ['欄位', 值]

類似JSON文件。說穿了並不難。

您在後置程式碼，透過ADO.NET或是任何您善用的技術，

把資料庫的數據取出，組合成以上字串格式即可！

以下圖為例，我用DataReader來做，會用到兩個方法，取得「欄位名稱」與欄位裡面的「值」

詳見：

[ADO.NET] DataReader自動產生資料表的「欄位名稱」。.FieldCount屬性 / .GetName()與.GetValue()方法

http://www.dotblogs.com.tw/mis2000lab/archive/2011/04/14/datareader_fieldcount_getname.aspx

料理東西軍！

「Google Chart V.S. ASP.NET Chart控制項」，今晚您要選擇哪一項？

完整內容將會收錄在 -- ASP.NET專題實務 (II) VS 2015版裡面。

----------------------------------------------------------------------------------------------

從最傳統的圖表作法，透過與的寬度與高度修改，來做最原始的長條圖。

然後介紹 ASP.NET Chart控制項

（這東西功能很強，但學起來也很費時、後置程式碼來控制要寫很多程式碼、熟悉很多屬性與方法）

最後介紹「前端技術」為主的 Google Chart，讓您的ASP.NET Web Form跟得上時代

----------------------------------------------------------------------------------------------

內容是否豐盛？是否比上一本書又多了好多新鮮事？請拭目以待。

這裡有一份 YouTube線上影片教學，雖然講英文，但應該看影片就會懂 --

https://www.youtube.com/playlist?list=PLFtLsSgifot9MKht9iIq1KAxbfQCfsO9K

Google Chart搭配JSON。這篇講得很清楚

http://www.santarosa.edu/~jperetz/projects/ajax-json/

Google Chart原廠說明

https://developers.google.com/chart/interactive/docs/php_example

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

......... 寫信給我，mis2000lab (at) yahoo.com.台灣 .....................................................................................

................ facebook社團 https://www.facebook.com/mis2000lab ............................

................ Google+ https://plus.google.com/100202398389206570368/posts ..............

................ YouTube (ASP.NET) 線上教學影片 http://goo.gl/rGLocQ

沒有留言:

張貼留言

MIS2000 Lab. - ASP.NET專題實務 & WebForm +MVC 遠距教學

2015年11月23日星期一