Reader's Conner

9th Aug Singapore Google Logo

Monday, 09 August 2010 10:30

ဒီေန႕ (9th August 2010) မွာ http://www.google.com.sg/ ကိုသြားလိုက္မယ္ ဆိုရင္ ဒီပုံေလးကို ျမင္ရပါမယ္။ အဲဒါကေတာ့ Google ကေနျပီး Doodle 4 Google - Our Singapore ဆိုျပီး Google Logo based ျပိဳင္ပြဲ ကေန ပထမ ရသြားတဲ့ ပုံပဲ ျဖစ္ပါတယ္။ ေရးဆြဲသူ ကေတာ့ James Rotanson Anglo-Chinese School (Independent) ျဖစ္ျပီး Google က ပထမ ရတဲ့ ပုံကို National Day မွာ Google Logo အျဖစ္ တင္ေပးမယ္ ဆိုလို႕ ျမင္ရတာ ျဖစ္ပါတယ္။ သူ႔ရဲ႕ Creative Thinking ေကာင္းပုံေလးကို သေဘာၾကမိပါတယ္။

Colours of Singapore

On the surface level, the Google letters depict the various panoramic places of interests in Singapore. Several of the iconic tourist attractions featured by my illustration encompasses the Merlion, the Singapore Flyer, the Jurong Bird Park, the Esplanade and the Changi Airport. In a more abstract manner, several distinctive values of Singaporeans such as education, punctuality, racial harmony and total defence are also shown respectively by the depiction of the graduation cap, the MRT, the people holding hands together and the 5 jets parading in the air. Thus, I feel that my doodle has expressed the theme of “Our Singapore” effectively.

Ref: http://www.google.com.sg/doodle4google/

Write comment (0 Comments)

Goodbye Google Wave

Thursday, 05 August 2010 22:48

ဒီသတင္း ၾကာတာကေတာ့ ၃ ရက္ေလာက္ ရွိျပီ ဆိုေတာ့ Latest မဟုတ္ေပမယ့္ Record ေလးတစ္ခု အေနနဲ႔ လိုက္ပါတယ္။ သိတဲ့ ေန႔က

မအားလို႕ ခုမွပဲ ေရးလိုက္ပါတယ္။ Google ကေနျပီး Real Time Collaboration Tool အျဖစ္အသုံးျပဳႏိုင္ေအာင္ Google Wave ဖန္တီး

ခဲ့ပါတယ္။ Wave မွာ Instant Messaging, Group Chat ေတြအျပင္ Desktop ေပၚက File တစ္ခုကို wave ထဲဆြဲထည့္ Discussion

လုပ္ႏိုင္ျခင္း စတဲ့ Feature ေတြပါ ခဲ့ပါတယ္။ ဒါအျပင့္ Typing ႐ိုက္ေနတုန္းမွာ character-by-character ျမင္ရျခင္းစတဲ့ Feature ေတြ ရွိေနတဲ့

Google Wave Product အတြက္ Development အသစ္ေတြကို ယခု August 2010 မွစတင္၍ ထပ္ျပီး လုပ္ေဆာင္ ေတာ့မည္ မဟုတ္ေၾကာင္း

Google မွ ထုတ္ျပန္ ခဲ့ပါသည္။

ဒီ Movie ေလးကေတာ့ Google Wave စျပီး Promotion လုပ္တုန္းက video ေလးပါ။

Ref: http://techcrunch.com/2010/08/04/wave-goodbye-to-google-wave/

Write comment (0 Comments)

Google Chart API Part - 3 (or) Events on Interactive Charts

Thursday, 22 July 2010 00:03

ဒီ Post ကိုဖတ္မယ္ ဆိုရင္ေတာ့ ျပီးခဲ့တဲ့ ဒီ post ႏွစ္ခုကို ျပန္ဖတ္ဖို႔ လိုပါတယ္။

ဒါမွ အဆက္အစပ္ေလး ရွိသြားျပီး ပိုျပီး သေဘာေပါက္သြား မွာျဖစ္ပါတယ္။ ဒီ Post မွာ အဓိက ေျပာခ်င္တာကေတာ့ user event ေတြကို

ဘယ္လိုထည့္ မလဲ ဆိုတာျဖစ္လို႕ အဲဒီေနရာေလးေတြကိုပဲ အဓိကထား ေရးပါမယ္။ တကယ္လို႕ တစ္ခုခု မသိတာ ရွိရင္ေတာ့ ေရွ႕က post

ႏွစ္ခုကို ျပန္ဖတ္လိုက္ပါ။ အရင္ post ေတြမွာတုန္းက လုပ္ထားတဲ့ charts ေတြကို event ေတြဘယ္လို ေပါင္းထည့္မလဲ ဆိုေလးၾကည့္ ရေအာင္။

ဒီပုံကေတာ့ ျပီးခဲ့တဲ့ example က event မပါေသးတဲ့ column chart ေလးေပါ့။

First Chart
mouseover event ကိုေပါင္းထည့္မယ္ ဆိုရင္ေတာ့ ဒီ code ေလးကို အရင္ထည့္ ေပးရမယ္။

google.visualization.events.addListener(chart, 'onmouseover', showDetails);

parameters ေတြကိုၾကည့္မယ္ ဆိုရင္

chart က chart object name ကိုဆိုလိုျပီး 'onmouseover' ကေတာ့ event trigger အတြက္ပါ။ ေနာက္ဆုံး showDetails ကေတာ့

mouseover လုပ္တဲ့ အခါ run မယ့္ function ပဲျဖစ္ပါတယ္။

mouse over ျပီးရင္ေတာ့ mouse out ေလးလဲလိုေသးတာေပါ့။ ဒီလိုေလး ေရးလိုက္ရင္ ရပါျပီ။

google.visualization.events.addListener(chart, 'onmouseout', hideDetails);

အိုေက ... ဒါဆိုရင္ ကြၽန္ေတာ္တို႔ showDetails နဲ႔ hideDetails ကိုဆတ္ေရးလိုက္မယ္။

CSS ရဲ႕ style.visibility ကို ကစားသြားတာပဲ ျဖစ္ပါတယ္။ အဲဒါ ျပီးရင္ေတာ့ <body></body> ႏွစ္ခုၾကားမွာ ဒီ div ေလးေတြကို

ထည့္ေပးဖို႔ လိုပါတယ္။ ဒါမွ showDetails နဲ႔ hideDetails က style.visibility ကို ကစားတဲ့ အခါ အလုပ္လုပ္မွာ ျဖစ္ပါတယ္။

<body>

        
        <div id="chart"></div>

        
        <div id="details0">These are the details for Q1...</div>
        <div id="details1">Here you have the numbers for Q2...</div>
        <div id="details2">Explanations for the third quarter...</div>
        <div id="details3">Q4 was as expected...</div>

    </body>

ဒီေနရာမွာ တစ္ခုသတိထား ရမွာက div ရဲ႕ id ေတြနဲ႔ showDetails နဲ႔ hideDetails ထဲက getElementById မွာ ေခၚထားတဲ့ id ေတြတူဖို႔

လိုပါတယ္။ ဒီ code ကို copy ကူးျပီး စမ္းခ်င္တယ္ ဆိုရင္ေတာ့

<html>
    <head>
        <title>Google Chart Tools Tutorial</title>

        <style type="text/css">

            #details0, #details1, #details2, #details3 {
                visibility:hidden;
                background: #FFFF7F;
                border: solid 1px;
                width: 350px;
                padding: 5px;
                font-size:smaller;
                position:absolute;
                top: 250px;

            }

        </style>

        
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load thee Google Visualization API and the chart
            google.load('visualization', '1', {'packages': ['columnchart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','Quarters 2009');
                dataTable.addColumn('number', 'Earnings');

                //define rows of data
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //instantiate our chart objects
                var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

                //draw our chart
                chart.draw(dataTable, options);

                //register callbacks
                google.visualization.events.addListener(chart, 'onmouseover', showDetails);
                google.visualization.events.addListener(chart, 'onmouseout', hideDetails);
            }

            function showDetails(e) {
                switch (e['row']) {
                    case 0: document.getElementById('details0').style.visibility='visible';
                        break;
                    case 1: document.getElementById('details1').style.visibility='visible';
                        break;
                    case 2: document.getElementById('details2').style.visibility='visible';
                        break;
                    case 3: document.getElementById('details3').style.visibility='visible';
                        break;
                }
            }

            function hideDetails(e) {
                switch (e['row']) {
                    case 0: document.getElementById('details0').style.visibility='hidden';
                        break;
                    case 1: document.getElementById('details1').style.visibility='hidden';
                        break;
                    case 2: document.getElementById('details2').style.visibility='hidden';
                        break;
                    case 3: document.getElementById('details3').style.visibility='hidden';
                        break;
                }
            }

        </script>
    </head>

    <body>

        
        <div id="chart"></div>

        
        <div id="details0">These are the details for Q1...</div>
        <div id="details1">Here you have the numbers for Q2...</div>
        <div id="details2">Explanations for the third quarter...</div>
        <div id="details3">Q4 was as expected...</div>

    </body>

</html>

ဒါကေတာ့ ျမင္ရမယ့္ ပုံပါ။

Event Example
ဒီ link မွာလည္း စမ္းၾကည့္ ႏိုင္သလို အရင္ event trigger မထည့္ခင္က chart ကိုလည္း ဒီမွာ ျပန္ၾကည့္ႏိုင္ပါတယ္။

တကယ္လို႕ Charts API ကိုစိတ္ဝင္စားလို႕ ေဆာ့ၾကည့္ခ်င္ သူမ်ား Google Code Playground မွာ ဝင္ေၾကးေပးစရာ မလိုပဲ ကစား

ၾကည့္ႏိုင္ပါေၾကာင္း ေျပာရင္ ကြၽန္ေတာ့္ Google Charts API ကေတာ့ နိဂုံးခ်ဳပ္ သြားပါျပီ။

Ref: http://net.tutsplus.com/tutorials/other/easy-graphs-with-google-chart-tools/

Write comment (0 Comments)

Google Chart API Part -2 (or) Interactive Charts

Wednesday, 21 July 2010 15:16

Interactive Charts

Google Visualization API ကိုသုံးျပီး Interactive Charts ေတြကိုဖန္တီး ႏိုင္ပါတယ္။ ျပီးခဲ့တဲ့ post ကေရးခဲ့တဲ့ static chart လိုေတာ့

URL ကေန run တာမ်ိဳးမဟုတ္ပဲ JavaScript Library သုံးျပီး charts ေတြကို ဖန္းတီးတာမ်ိဳး ျဖစ္ပါတယ္။ ဒီ link မွာေတာ့ ရွိျပီးသား

ယူသုံးႏိုင္တဲ့ ready made visualizations graphs ေတြေတြကို ၾကည့္ႏိုင္ပါတယ္။ ကိုယ္ဟာကို လုပ္ခ်င္တယ္ဆိုလဲ လုပ္ႏိုင္ေပမယ့္

သူရွိျပီးသား graphs ေတြေတာင္ ေတာ္ေတာ္စုံ ေနတာကို ေတြ႔ရတယ္။ example ေလးကို ဆက္ၾကည့္ လိုက္ရေအာင္

Formatting the Data

ဒီအဆင့္ကေတာ့ chart တစ္ခု ဖန္တီးဖို႔ရာ data ေတြကို analysis လုပ္တယ္လို႕ ေျပာႏိုင္ပါတယ္။ အရင္ဆုံး row and column

သေဘာေလးကို နားလည္ထားဖို့ လိုပါတယ္။

Row value ေတြကေတာ့ zero ကေန အျမဲတမ္း number value ေတြပဲ ျဖစ္ရပါမယ္။ Column values ေတြကေတာ့ zero လဲျဖစ္ႏိုင္

သလို တျခား optional ID ေတြလဲ ျဖစ္ႏိုင္ပါတယ္။ ဒီ example မွာေတာ့ company ရဲ႕ 2009 earnings ေတြကို chart ဆြဲထားတာပဲ

ျဖစ္ပါတယ္။ ဒါေၾကာင့္ အရင္ဆုံး data analysis လုပ္ၾကည့္မယ္ ဆိုရင္ေတာ့ ဒီလို ရပါလိမ့္မယ္။

Quarters 2009	Earnings
Q1	308
Q2	257
Q3	375
Q4	123

Code ေရးမယ္ ဆိုရင္ေတာ့ ဒီလိုျဖစ္ သြားပါမယ္။

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Google Charts Tutorial</title>

        
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load the Google Visualization API and the chart
            google.load('visualization', '1', {'packages': ['columnchart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','Quarters 2009');
                dataTable.addColumn('number', 'Earnings');

                //define rows of data
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //instantiate our chart object
                var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

                //draw our chart
                chart.draw(dataTable, options);

            }
        </script>

    </head>

    <body>

        
        <div id="chart"></div>

    </body>
</html>

Chart API ကို ေခၚတယ္ ဆိုတာ အားလုံး သိပါတယ္။

google.load('visualization', '1', {'packages': ['columnchart']});

AJAX API ကေန google.load ကိုသုံးျပီး chart ျဖစ္လာဖို႔ loading လုပ္ပါတယ္။ parameters ေတြကို ၾကည့္မယ္ ဆိုရင္ေတာ့

1: Version of the API ျဖစ္ပါတယ္။

packages array: ဘယ္ chart type ကိုသုံးမယ္ဆိုတာကို ေျပာတာျဖစ္ပါတယ္။

google.setOnLoadCallback(createChart);

setOnLoadCallback ကေန createChart ဆိုတဲ့ Function ကို ေခၚလိုက္တာ ျဖစ္လို႕ createChart ကို create လုပ္ဖို႔ လိုလာပါတယ္။

var dataTable = new google.visualization.DataTable();

chart ဆြဲဖို႔ dataTable object တစ္ခု ရျပီဗ်ာ။

//define columns
dataTable.addColumn('string','Quarters 2009');
dataTable.addColumn('number', 'Earnings');

Data type ေျပာျပီး column ေတြကို define လုပ္ပါတယ္။

//define rows of data
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

Row define လုပ္တယ္ ဆိုတာ သိမွာပါ။ 4 rows လုံးကို တခါထည္း ထည့္လိုက္တာ ျဖစ္ပါတယ္။ တကယ္လို႕ row တစ္ခုခ်င္း သြင္းခ်င္

ရင္ေတာ့ ဒီလိုမ်ိဳး လုပ္ႏိုင္ပါတယ္။

dataTable.addRow(['Q1',308]);
data.setValue(0, 0, 'Q1');

var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

ဒီ code အလုပ္လုပ္ဖို႔ ကေန <div id=”chart”></div> ဒီ div ရွိေနဖို႔ လိုပါတယ္။

var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
chart.draw(dataTable, options);

တျခား optional parameters ေတြကေတာ့ Chart size, 3D, Chart Title ေတြပဲျဖစ္ပါတယ္။ draw function မွာေတာ့ ဒီ value ကိုထည့္

ေပးဖို႔ လိုပါတယ္။ ဒီ script ေလးကို ကူးျပီး run လိုက္မယ္ ဆိုရင္ေတာ့ ဒီလို ပုံေလးကို ျမင္ရမွာ ျဖစ္ပါတယ္။

တကယ္လို႕ pie chart ကိုသုံးမယ္ဆိုလဲ ရပါတယ္။

//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages':['columnchart','piechart']});

ဒီလိုေလး ေျပာင္းေပးလိုက္ရင္ ရပါျပီ။ pie chart နဲ႔ေျပာင္းလိုက္မယ္ ဆိုရင္ေတာ့ ဒီလိုေလး ျဖစ္သြားပါလိမ့္မယ္။

demo link မွာ ၾကည့္ႏိုင္ပါတယ္။ ေနာက္ post မွာေတာ့ ဒီ charts ေတြကို user event ေတြဘယ္လို ထည့္မယ္၊ ဘယ္လို trigger လုပ္မယ္

ဆိုတာေတြကို ဆက္ေရးပါတယ္။

Write comment (0 Comments)

Google Chart API Part -1

Tuesday, 20 July 2010 22:39

ဒီညေတာ့ မိုးကလည္း အဖြဲဖြဲနဲ႔ ေကာင္းေနတာေၾကာင့္ ေကာ္ဖီေလး တစ္ခြက္နဲ႔ Net Tuts+ ကိုေရာက္

ခဲ့ပါတယ္။ ဖတ္စရာေတြက မ်ားျပားလွတာေၾကာင့္ ဘာကစဖတ္ျပီး စမ္းၾကည့္ရမွန္း မသိေအာင္ကို

ျဖစ္ရပါတယ္။ ဒီလိုနဲ႔ Google Charts API အေၾကာင္းဖတ္ကို ဖတ္လိုက္ေတာ့ လြယ္ကူျပီး ျပန္စမ္းၾကည့္

ခ်င္သူေတြ အဖို႔လည္း အလြယ္တကူ လုပ္ၾကည့္ႏိုင္တာမို႔ မ်ႇေဝလိုက္ပါတယ္။

Google Charts API ဆိုတာ

Web Page ထဲမွာ Charts ေတြကို static ျဖစ္ေစ၊ interactive ျဖစ္ေစ အလြယ္တကူထည့္ႏိုင္ေအာင္ လုပ္ေပးထားတဲ့ API တစ္ခုပဲျဖစ္ပါတယ္။

Static vs Interactive Charts

ဒီ Charts Tool မွာ API ႏွစ္ခုရွိပါတယ္။ အဲဒါေတြကေတာ့

* Image Charts.- Use the Google Chart API. (Static)

* Interactive Charts.- Use the Google Visualization API

Image Charts/Static ကေတာ့ ပိုလြယ္ေပမယ့္ Interactive Charts ကေတာ့ Java Script library ကိုသုံးထားျပီး event trigger

လုပ္ႏိုင္ေသာေၾကာင့္ သုံးရတာ flexible ျဖစ္တာကို ျမင္ႏိုင္ပါတယ္။

Static Chart

ဒီ Method ကေတာ့ အရမ္းကို လြယ္လြန္းလို႕ super easy လို႕ေတာင္ေျပာႏိုင္ပါတယ္။

http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones|Computers|Services|Other&chtt=Company%20Sales&chco=ff0000

ဒီ code ေလးကို copy ကူးျပီး browser မွာ run လိုက္ရင္ ေအာက္က ပုံးေလးကို auto generate လုပ္ေပးမွာ ျဖစ္ပါတယ္။

ဒီလိုေလးသာ လုပ္လိုက္ရင္ image အေနနဲ႔ ထည့္လို႕ရျပီဗ်ာ။

ကဲဘယ္ေလာက္ေတာင္ လြယ္သလဲဗ်ာ။ ေျပာပါတယ္ super easy ပါဆိုမွ ...

အလုပ္ပုံကေတာ့ Google Charts API ကို GET (or) POST သုံးျပီး request လုပ္လိုက္တဲ့ အခါ API ကေန png image ကို return

ျပန္ေပးလိုက္တာ ျဖစ္ပါတယ္။

ဒီ URL ကို ခဲြျခမ္း ၾကည့္မယ္ ဆိုရင္ေတာ့

http://chart.apis.google.com/chart?

Base URL ျဖစ္ျပီး က်န္တာေတြက ဒီ URL အတြက္ parameters ေတြပဲ ျဖစ္ပါတယ္။

Mandatory Parameters

ဒီ URL အတြက္ မပါမျဖစ္ထည့္ ေပးရမယ့္ parameters ေတြကိုၾကည့္မယ္ ဆိုရင္ေတာ့

cht=p3

Chart Type အတြက္ ျဖစ္ပါတယ္။ p3 ဆိုတာကေတာ့ 3D pie chart ကိုဆိုလိုပါတယ္။ ရႏိုင္တဲ့ chart type ေတြကိုေတာ့ ဒီမွာ ၾကည့္ႏိုင္

ပါတယ္။

chs=450×200

chart image size ပဲျဖစ္ပါတယ္။

chd=t:2,4,3,1

chart မွာျပမယ့္ data အတြက္ ျဖစ္ပါတယ္။ ပထမ စာလုံး t ကေတာ့ data format အတြက္ ညြန္းတာ ျဖစ္ျပီး ဒီ example မွာေတာ့

basic text format ကိုသုံးထားပါတယ္။

Optional Parameters

title, labels, font types, colors, gradients စတာေတြကို optional parameters အေနနဲ႔ ထည့္ေပးႏိုင္ပါတယ္။ ဒီ example

မွာၾကည့္ရင္ေတာ့

chl=Phones|Computers|Services|Other

chart label အတြက္ ျဖစ္ပါတယ္။ ဒီဟာေလးနဲ႔ တြဲျပီးၾကည့္ရင္ ပိုျမင္သာပါတယ္။ chd=t:2,4,3,1

chtt=Company%20Sales

chart title အတြက္ ျဖစ္ပါတယ္။

chco=ff0000

Chart color အတြက္ ျဖစ္ပါတယ္။ တကယ္လို႕ gradient နဲ႔ျပခ်င္ရင္ေတာ့ colors ႏွစ္ခုကို ဒီလိုျပႏိုင္ပါတယ္။ chco=ff0000,00ff00

Interactive Charts ကေတာ့ ရွည္တာေၾကာင့္ ေနာက္ post တစ္ခု အေနနဲ႔ ေရးမွ ပိုအဆင္ေျပမယ္။ အရမ္းရွည္ေတာ့လည္း ဖတ္ရတာ

ပ်င္းဖို႔ ေကာင္းပါတယ္။ စိတ္ပါရင္ေတာ့ Live Chart Playground မွာ ေဆာ့ၾကည့္ႏိုင္ပါတယ္။ ေဆာ့ၾကည့္ဗ် ေရလည္လန္းတယ္။

Write comment (0 Comments)

Reader's Conner

9th Aug Singapore Google Logo

Colours of Singapore

Goodbye Google Wave

Google Chart API Part - 3 (or) Events on Interactive Charts

Google Chart API Part -2 (or) Interactive Charts

Google Chart API Part -1

More Articles...

Login Form

Latest Post

Categories Table View

Most read article

RSS Feed

Facebook Share

Accordion FAQ

mod_joomtouch