iT邦幫忙

1

Google Chart網頁圖表 + 後端 ASP.NET Web Form(ADO.NET)

這系列的文章,今天來到第三篇。

第一篇,簡單介紹 Google Chart
如何與ASP.NET (Web Form)搭配
http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx

第二篇,把寫在HTML畫面裡的(前端)JavaScript改寫到 ASP.NET (Web Form)後置程式碼
http://www.dotblogs.com.tw/mis2000lab/archive/2014/05/10/google_charts-with-asp.net-clientscriptmanager.registerstartupscript.aspx

上面兩篇文章,我都有分享 YouTube教學影片

第三篇,從資料庫裡面,取出數據
組成Google Chart能接受的原始資料(Raw Data)格式
http://www.dotblogs.com.tw/mis2000lab/archive/2015/09/17/google_charts-with-ado-net.aspx
「組合字串」、「字串相連」,一直以來都是資料庫程式、網頁程式擅長的作法
(但也因為動態地「組字串」造成 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

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

         //*** 查詢 Google的一份試算表。
         dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         query: 'SELECT A,D WHERE D > 100 ORDER BY D',

我們可以看出他的架構,每一筆記錄就是 ['欄位', 值]
類似JSON文件。說穿了並不難。

您在後置程式碼,透過ADO.NET或是任何您善用的技術,
把資料庫的數據取出,組合成以上字串格式即可!

透過圖片與程式碼解說可能比較清楚

完整文章與範例,請看
網頁繪製圖表 Google Charts with JavaScript.... ADO.NET取得圖表原始資料
http://www.dotblogs.com.tw/mis2000lab/archive/2015/09/17/google_charts-with-ado-net.aspx


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
賽門
iT邦超人 1 級 ‧ 2015-09-17 15:59:13

筆記
最近正好在用ASP.NET Chart元件,總覺圖畫出來不好看,來試看看Google Chart....

0
James
iT邦大師 6 級 ‧ 2015-09-17 16:44:43

本站的推薦統計還是用Open Flash Chart作的,是時候該換一下了。

我要留言

立即登入留言