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

 第一篇   http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript-1.html
 第二篇   http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript2aspnet.html
 
 
這兩篇文章的內容,都有 YouTube教學影片的簡介
藉此也讓各位看到「實際操作、(影片)教學」會比自己慢慢K書、看文件、K程式碼有效率多了。

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

http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript-1.html

 
 
 
一旦把 "前端"程式 (JavScript) 轉移到「後置程式碼」之後
   (請善用上面第二篇文章介紹的ClientScriptManager類別),就是我們動手腳的好時機
 
「組合字串」、「字串相連」,一直以來都是資料庫程式、網頁程式擅長的作法
   (但也因為動態地「組字串」造成 SQL Injection資料隱碼攻擊、XSS攻擊....等等缺失)
 
請透過「參數」的寫法來避免,詳見以下文章說明:
http://www.dotblogs.com.tw/mis2000lab/archive/2014/08/29/ado.net_parameter_sql_injection_20140829.aspx
 
http://www.dotblogs.com.tw/mis2000lab/archive/2014/11/04/microsoft_anti-xss_v43.aspx
 
首先,我們來看看原始的 Google Chart的資料格式(Raw Data)有哪些?
 
以簡單的圓餅圖(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來做,會用到兩個方法,取得「欄位名稱」與欄位裡面的「值」
詳見:
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版 裡面。 書本請看 http://www.books.com.tw/products/0010705908
----------------------------------------------------------------------------------------------
從最傳統的圖表作法,透過 <asp:Image> 與<img>的寬度與高度修改,來做最原始的長條圖。
 
然後介紹  ASP.NET Chart控制項 
 (這東西功能很強,但學起來也很費時、後置程式碼來控制要寫很多程式碼、熟悉很多屬性與方法)
 
 最後介紹「前端技術」為主的 Google Chart,讓您的ASP.NET Web Form跟得上時代
----------------------------------------------------------------------------------------------
 
內容是否豐盛?是否比上一本書又多了好多新鮮事?   請拭目以待。
 
 
 
這裡有一份 YouTube線上影片教學,雖然講英文,但應該看影片就會懂 --
 
Google Chart搭配JSON。這篇講得很清楚 
 
Google Chart原廠說明
 
這位網友提供 Google Chart + Web Service的範例(2016年五月補充)
 
 

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

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

寫信給我--  mis2000lab (at) yahoo.com.台灣  或是  school (at) mis2000lab.net

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

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

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

arrow
arrow

    MIS2000 Lab 發表在 痞客邦 留言(0) 人氣()