IPv6 學習筆記 004 – 將擷取到的 ASes 資料畫圖,以 Google jsapi 實作

簡述

承接前篇「  IPv6 學習筆記 003 – 從 Ripe NCC 擷取各國 ASes 的資料,以 Python 實作」,將抓到的資料拿來畫圖。

畫圖有很多種方法,譬如用 jpggragh 這個 PHP 的 library,或是直接借用 Google 現成的jsapi 畫圖,而不需自己生產所需的 jQuery,初步完成圖請參考此頁

HTML 內容

這是一個靜態的 HTML ,畫出台灣這十年來 ASes 資料中, IPv6 的成長狀況。HTML 內容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
       var data = new google.visualization.DataTable();
       data.addColumn('date', 'Date');
       data.addColumn('number', 'Percent');
       data.addRows([
           [new Date(2004,0,01),15.0],
           [new Date(2004,1,01),15.0],
           [new Date(2004,2,01),12.0482],
           [new Date(2004,3,01),11.7647],
           [new Date(2004,4,01),11.4943],
           [new Date(2004,5,01),11.4943],
           [new Date(2004,6,01),12.7907],
           [new Date(2004,7,01),12.7907],
           [new Date(2004,8,01),12.6437],
           [new Date(2004,9,01),12.6437],
           [new Date(2004,10,01),12.5],
           [new Date(2004,11,01),12.5],
           [new Date(2005,0,01),11.236],
           [new Date(2005,1,01),12.0879],
           [new Date(2005,2,01),13.0435],
           [new Date(2005,3,01),12.0879],
           [new Date(2005,4,01),13.1868],
           [new Date(2005,5,01),12.3596],
           [new Date(2005,6,01),15.7303],
           [new Date(2005,7,01),15.9091],
           [new Date(2005,8,01),16.8539],
           [new Date(2005,9,01),13.3333],
           [new Date(2005,10,01),12.5],
           [new Date(2005,11,01),14.7727],
           [new Date(2006,0,01),14.6067],
           [new Date(2006,1,01),13.6364],
           [new Date(2006,2,01),11.3636],
           [new Date(2006,3,01),11.1111],
           [new Date(2006,4,01),13.3333],
           [new Date(2006,5,01),13.3333],
           [new Date(2006,6,01),11.9565],
           [new Date(2006,7,01),10.5263],
           [new Date(2006,8,01),12.6316],
           [new Date(2006,9,01),14.5833],
           [new Date(2006,10,01),14.5833],
           [new Date(2006,11,01),14.5833],
           [new Date(2007,0,01),14.5833],
           [new Date(2007,1,01),14.5833],
           [new Date(2007,2,01),14.5833],
           [new Date(2007,3,01),15.625],
           [new Date(2007,4,01),15.625],
           [new Date(2007,5,01),15.7895],
           [new Date(2007,6,01),14.8936],
           [new Date(2007,7,01),15.9574],
           [new Date(2007,8,01),16.129],
           [new Date(2007,9,01),17.0213],
           [new Date(2007,10,01),18.2796],
           [new Date(2007,11,01),18.0851],
           [new Date(2008,0,01),18.2796],
           [new Date(2008,1,01),15.9574],
           [new Date(2008,2,01),17.0213],
           [new Date(2008,3,01),15.9574],
           [new Date(2008,4,01),16.8421],
           [new Date(2008,5,01),16.8421],
           [new Date(2008,6,01),16.3265],
           [new Date(2008,7,01),16.3265],
           [new Date(2008,8,01),15.3061],
           [new Date(2008,9,01),15.4639],
           [new Date(2008,10,01),15.3061],
           [new Date(2008,11,01),15.3061],
           [new Date(2009,0,01),15.1515],
           [new Date(2009,1,01),15.3061],
           [new Date(2009,2,01),15.3061],
           [new Date(2009,3,01),14.7059],
           [new Date(2009,4,01),14.5833],
           [new Date(2009,5,01),14.5833],
           [new Date(2009,6,01),14.0],
           [new Date(2009,7,01),14.7059],
           [new Date(2009,8,01),14.7059],
           [new Date(2009,9,01),15.2381],
           [new Date(2009,10,01),15.2381],
           [new Date(2009,11,01),13.8889],
           [new Date(2010,0,01),14.1509],
           [new Date(2010,1,01),14.1509],
           [new Date(2010,2,01),14.1509],
           [new Date(2010,3,01),13.3333],
           [new Date(2010,4,01),14.2857],
           [new Date(2010,5,01),13.2075],
           [new Date(2010,6,01),12.963],
           [new Date(2010,7,01),14.1509],
           [new Date(2010,8,01),14.0187],
           [new Date(2010,9,01),13.8889],
           [new Date(2010,10,01),13.7615],
           [new Date(2010,11,01),13.0841],
           [new Date(2011,0,01),14.1509],
           [new Date(2011,1,01),14.9533],
           [new Date(2011,2,01),15.7407],
           [new Date(2011,3,01),17.2727],
           [new Date(2011,4,01),16.2162],
           [new Date(2011,5,01),17.1171],
           [new Date(2011,6,01),22.5225],
           [new Date(2011,7,01),22.3214],
           [new Date(2011,8,01),22.1239],
           [new Date(2011,9,01),21.9298],
           [new Date(2011,10,01),21.7391],
           [new Date(2011,11,01),22.2222],
           [new Date(2012,0,01),22.2222],
           [new Date(2012,1,01),22.4138],
           [new Date(2012,2,01),22.0339],
           [new Date(2012,3,01),21.1864],
           [new Date(2012,4,01),18.6441],
           [new Date(2012,4,22),20.6612],
           [new Date(2012,4,24),20.6612],
           [new Date(2012,5,01),20.6612],
           [new Date(2012,6,01),20.6612],
           [new Date(2012,7,01),20.4918],
           [new Date(2012,8,01),22.9508],
           [new Date(2012,9,01),23.7705],
           [new Date(2012,10,01),23.5772],
           [new Date(2012,11,01),23.7705],
           [new Date(2013,0,01),26.4463],
           [new Date(2013,1,01),27.2727],
           [new Date(2013,2,01),25.6198],
           [new Date(2013,3,01),25.4098],
           [new Date(2013,4,01),25.6198],
           [new Date(2013,5,01),26.2295],
           [new Date(2013,6,01),25.6198],
           [new Date(2013,7,01),28.6885],
           [new Date(2013,8,01),29.2683],
           [new Date(2013,9,01),29.2683],
           [new Date(2013,10,01),26.6129],
           [new Date(2013,11,01),25.7812],
           [new Date(2014,0,01),27.2],
]);
        var options = {
          title: 'TW Ases %',
          hAxis: {title: 'Year' , format: 'yyyy/MM', ticks : [ new Date(2004,5,1), new Date(2007,5,1), new Date(2010,5,1) ,new Date(2013,5,1)]},
          vAxis: {title: '%'}
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

 

1. 可以看到呼叫了 google.visualization.DataTable 來準備建立新的資料。

2. 用 data.addColumn、data.addRows分別新增欄位以及新增內容

3. 在data.addRows內,可以看到 new Date 的方式,這樣資料的型態會是日期,除日期外,可以為字串(離散資料點)或數字、日期、日期時間等等(連續資料點)。

資料點的資料型態,請參考:

https://developers.google.com/chart/interactive/docs/gallery/linechart#Data_Format

離散或連續,請參考:https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous

4. data.addRows 內,可以自己想法子用程式語言生成所需的數據,格式就如同上面所寫:

[  new Date(2004,0,01)  , 15.0  ]

[ X軸值 , 第一筆Y軸值 ]  (我只有一筆 Y)

5. var options 區段,訂定了顯示方式,其中,可以注意到我使用了 format 以及一些格式敘述來安排我的橫軸顯示,請務必注意, format 的顯示跟橫軸的資料型態有關係,像我寫的 format: ‘yyyy/MM’,唯有橫軸的資料是「日期」時才會生效。

詳細的格式與定義方法請參考

https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

6. 最後,chart.draw(data, options); 使繪圖生效。

7. 還有各種圖表請參考:

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料