顯示具有 圖表產生器 標籤的文章。 顯示所有文章
顯示具有 圖表產生器 標籤的文章。 顯示所有文章

2016年12月21日 星期三

網頁繪製圖表 Google Charts with JavaScript(3).... ADO.NET取得圖表原始資料

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

這兩篇文章的內容，都有 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.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
張貼者： 於 沒有留言:
標籤： , , , , , , ,

網頁繪製圖表 Google Charts with JavaScript(2)....與ASP.NET網頁結合 (ClientScriptManager.RegisterStartupScript 方法)

網頁繪製圖表 Google Charts with JavaScript (2)....與ASP.NET網頁如何結合在一起？ 
ClientScriptManager.RegisterStartupScript 方法 

JavaScript寫在HTML畫面上，該如何與 AP.NET後置程式碼搭配呢？
上一篇文章提到 Google Charts
http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript-1.html


今天上課時，學員都很有興趣。

但是， JavaScript寫在HTML畫面上，該如何與 AP.NET後置程式碼搭配呢？
您可以參考：ClientScriptManager 類別  http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx

把您的 Google Charts範例（JavaScript程式碼）
沿用上面超連結的寫法，把它（字串相連）寫在後置程式碼裡面，就搞定囉！

============================================================================
============================================================================

上一個範例：
<%@ Page .........


 



    
 
    <!--Load the AJAX API   提醒您  2016/11月起，第一列Script有異動
-->

把上面咖啡色字體（斜體字）放到 "ASP.NET 後置程式碼"裡面
以字串相連來做即可。
您可以參考：ClientScriptManager 類別  http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx
上一個範例：
 



    ASP.NET如何搭配「Google Charts」的JavaScript
 
    <!--Load the AJAX API
    
 
    //============================================================
    //  這裡全部消失了，寫去「後置程式碼」
    //============================================================
ClientScriptManager.RegisterStartupScript 方法 (Type, String, String, Boolean)

資料來源：http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx 



本範例 JavaScript碼沿用範例 Google_Chart_00.aspx

-->
   
ClientScriptManager.RegisterStartupScript 方法 (Type, String, String, Boolean)       
                          
本範例 JavaScript碼沿用範例 Google_Chart_00.aspx                      
           後置程式碼：
    protected void Page_Load(object sender, EventArgs e)
    {    //** 資料來源  http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx
        // Define the name and type of the client scripts on the page.
        String csname1 = "Script1";
        String csname2 = "Script2";
        Type cstype = this.GetType();
        // Get a ClientScriptManager reference from the Page class.
        ClientScriptManager cs = Page.ClientScript;
        // Check to see if the startup script is already registered.
        // 呼叫 IsStartupScriptRegistered 方法，判斷特定索引鍵和型別組的啟始指令碼是否已註冊，避免不必要的指令碼加入嘗試。
        if (!cs.IsStartupScriptRegistered(cstype, csname1))
        {
            String cstext1 = "google.load('visualization', '1.0', { 'packages': ['corechart'] });";
            cstext1 += "google.setOnLoadCallback(drawChart);";
            cs.RegisterStartupScript(cstype, csname1, cstext1, true);
            // 使用 addScriptTags (最後一個)參數，指出 script 參數所提供的指令碼是否包裝在 ");
            cs.RegisterClientScriptBlock(cstype, csname2, cstext2.ToString(), false);
        }
        // 在網頁上的 OnLoad 事件引發之前。 不保證指令碼區塊可以根據其所註冊的順序來輸出。 
        // 如果指令碼區塊的順序很重要，請使用 StringBuilder 物件，在單一字串中一起蒐集指令碼，
        // 然後在單一用戶端指令碼區塊中註冊所有的指令碼。
    }
  
執行後的成果，沒有問題

但請您注意下圖，執行後的網頁「原始成果」
您可以發現 JavaScript放置的為置有點差異
這點請您小心。
請參閱我以前的文章
在伺服端程式碼中，呼叫下表中列出的方法之一。 
方法
說明
將指令碼區塊加入頁面頂端。 您可以字串形式建立指令碼，然後將它傳遞給加入網頁的方法。 您可以使用這個方法將任何指令碼插入網頁。 請注意，在完成所有項目之前指令碼可能就會呈現至網頁。因此您可能無法從指令碼參考網頁上所有的項目。
這個方法類似 RegisterClientScriptBlock 方法，但是會加入參考外部 .js 檔的指令碼區塊。 在以動態方式加入任何其他指令碼之前就會加入這個包含檔。因此您可能無法參考網頁上的某些項目。
將指令碼區塊加入當網頁完成載入，但是在引發網頁的 onload 事件之前，就會執行的網頁。 這個指令碼通常不會建立為事件處理常式或函式。其通常只包含想要執行一次的陳述式。
加入執行以回應網頁 onsubmit 事件的指令碼。 在送出網頁之前就會執行指令碼，並且讓您有機會取消送出動作。

***********************************************************************************
本系列第三篇文章：
如何寫ADO.NET程式，從（後端）資料庫裡面撈出數據，讓「前端」網頁畫Google Chart圖表

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

***********************************************************************************
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----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

張貼者： 於 沒有留言:
標籤： , , , , ,

網頁繪製圖表 Google Charts with JavaScript (1)

因而發覺這個東西。

我先連到 Google原廠網站，看了一下說明與範例  https://developers.google.com/chart/interactive/docs/quick_start
幾乎沒有大改，
光是從原廠範例修正一下，就能作出這種怪物等級的應用

本範例源自一開始介紹的文章
*******************************************************************************************************
右側上方的 Tab（分頁）可選三種圖表來呈現
這裡的時間軸，可以變成「動畫」，圖表會動！
*******************************************************************************************************
 抱歉，請您點選圖片，就能連去這範例的網站，可以現場Demo

請來看一下 Google原廠的 Demo網站

要學習也不難喔。
出乎意料的簡單！ 
==================================================================

==================================================================


點選圖片可連到 Google Charts原廠網站的教學
 
範例如下（基本架構）：
2016/11月，第一列的 script似乎已經更換（請注意原廠網站的範例，但我使用本文的 "舊" 寫法仍可運作） 

<html>
  <head>
    
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.  ******原始資料******

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // *********************差異之處*************************
        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    
    <div id="chart_div"></div>
  </body>
</html>


各位可以發現：
1. 一開始先設定（引用）必要的 JavaScript與API
2. 然後放入一些基本資料（RowData）
3. 最後.......搞定。
      圖表會出現在這裡

滑鼠點選右側的 Icon，網頁圖表會有顯著標記
      

滑鼠移到這一區塊，還有 Tooltip說明
      

  
上過我的課，買過我的書的讀者
您可以知道我強調「範本」，架構完整的範本，立即可用、可改

Google原廠的範例跟上面的應用，兩者的程式碼幾乎一樣
差異只有：
(1). 一開始，引用的地方，註明您要做什麼圖表？
      原廠範例：  google.load('visualization', '1.0', { 'packages': ['corechart'] });
      修改後的範例：google.load('visualization', '1', { 'packages': ['motionchart'] }); 
 (2).  Raw Data（原始資料）的多寡
(3). 最後兩段的程式碼有差異：

原廠：
            // Set chart options
            var options = {
                'title': 'How Much Pizza I Ate Last Night',
                'width': 400,
                'height': 300
            };
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);

修改後的應用：
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
            chart.draw(data, { width: 600, height: 300 });

  
上面兩個範例，可在此下載：Google_Chart.rar
      我已經準備好 10個範例，將會在我的 ASP.NET課程中介紹給大家。
  
圖表總類有多少呢？（還在成長、追加）
Chart Gallery
Playground
Miscellaneous Examples
Area Charts
Bar Charts
Bubble Charts
Candlestick Charts
Column Charts
Combo Charts
Diff ChartsN
Gauge Charts
Geo Charts
HistogramsNew!
IntervalsNew!
Line Charts
Maps
Org Charts
Pie Charts
Scatter Charts
Stepped Area Charts
Table Charts
TimelinesNew!
Tree Map Charts
TrendlinesNew!

 當然也可以從 Google Sheet（試算表）當成資料來源，然後在網頁上做圖表

Google Charts 太好用了，以後用不到怎麼辦？
    太黯然了~~~
       太銷魂了
 我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----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
張貼者： 於 沒有留言:
標籤： , , , , , ,
訂閱： 文章 (Atom)