30+ PHP Best Practices for Beginners

Sunday, 25 July 2010 14:25

ကြၽန္ေတာ္ nettuts မွာ "30+ PHP Best Practices for Beginners" ဆိုတဲ့ article တစ္ခုကိုဖတ္လိုက္ ရတယ္။ ဒါေၾကာင့္ အားလုံး

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

ေထာက္ေနလို႕ ဖတ္လို႕ အဆင္ေျပေစရန္ အနည္းငယ္ ျပင္ျပီး ေရးလိုက္ပါတယ္။

1. Befriend the PHP Manual

PHP Developer သမားတိုင္း အတြက္ အေကာင္းဆုံး reference  လုပ္ႏိုင္တဲ့ php.net က officially  လုပ္ေပးထားတဲ့ manual ပဲျဖစ္

ပါတယ္။ PHP မွာ သုံးေနတဲ့ function တိုင္းရဲ႕ manual usage ကို အဲဒီမွာ ဖတ္ႏိုင္ပါတယ္။ ဒီ manual ကိုဖတ္မယ္ ဆိုရင္ေတာ့ ေအာက္

ကေပးထားတဲ့ comment ေတြကိုလည္း ေသခ်ာ ဖတ္ၾကည့္သင့္ပါတယ္။ တစ္ခါတစ္ရံမွာ ကိုယ္ၾကဳံေနရတဲ့ ျပသနာက တျခားသူ တစ္ေယာက္

ၾကဳံျပီးသား ဆိုရင္ေအာက္က comment ေတြမွာရွိႏိုင္တယ္။ အနီးစပ္ဆုံးကေတာ့ PHP 5.3 Deprecated ျဖစ္တဲ့ functions ေတြမွာ ရွိေနတဲ့

ေအာက္က comment ေတြက အဖိုးတန္တယ္။ Download လုပ္ျပီး ဖတ္ခ်င္ရင္ေတာ့

http://php.net/download-docs.php



2. Turn on Error Reporting

ကြၽန္ေတာ္တို႔ coding ေရးေနတဲ့ development time မွာ Error Reporting ေတြကို On ျပီးေရးသင့္တယ္လို႕ သူကဆိုပါတယ္။ ဟုတ္ပါတယ္

ဒါမွ  ကိုယ္ေရးတဲ့ program ထဲမွာ  ရွိေနတဲ့ errors ေတြ၊ bugs ေတြ၊ warning ေတြကို  deployment မလုပ္ခင္ရွင္း သင့္ပါတယ္။ PHP ရဲ႕

error reporting မွာ ERROR ကိုျပမွာလား? WARNING ကိုျပမွာလား? NOTICE ကိုျပမွာလား? ဆိုျပီး အဆင့္ေတြရွိေပမယ့္

error_reporting(E_ALL);  ON ဆိုရင္ေတာ့ ရွိသမ်ွ PHP Errors ေတြအားလုံးကို  ျမင္ရမွာ ျဖစ္ပါတယ္။ Error Reporting Manual ကို

ဒီ link မွာ ဖတ္ၾကည့္ႏိုင္ပါတယ္။ ဒီ Error Reporting ေတြကို php.ini ထဲမွာလည္း config လုပ္ႏိုင္တယ္ဗ်။ ကြၽန္ေတာ္ကေတာ့ php.ini

ထဲမွာပဲ လုပ္ေလ့ရွိပါတယ္။ အေရးၾကီးတာက production မွာ live သြားေတာ့မယ္ ဆိုရင္ေတာ့ ဒီ Error Reporting ေတြကို OFF ျပန္လုပ္

ေပးဖို႔ ေတာ့လိုပါတယ္။

3. Try an IDE

Author က IDE တစ္ခုခုနဲ႔ ေရးသင့္တယ္လို႕ ေျပာေသာ္လည္း စစခ်င္းမွာ IDE သုံးျပီးေရးမယ္ဆိုရင္ function name မွတ္စရာ မလိုေတာ့ပဲ

အပ်င္းၾကီးသြားႏိုင္ တယ္လို႕ ကြၽန္ေတာ္ ျမင္ပါတယ္။ IDE ေတြကေတာ့ syntax highlighting, code completion, error warnings,

re-factoring (reworking) features ေတြရလို႕ coding ေရးရတာ ပိုျပီးလြယ္ကူ ျမန္ဆန္ပါတယ္။ နာမည္ၾကီး IDE ေတြရဲ႕ Feature ေတြကို

ဒီ link မွာ ဆက္ဖတ္ႏိုင္ပါတယ္။ ကြၽန္ေတာ္ အၾကံျပဳခ်င္တာ ကေတာ့ Advanced Text Editor ေတြကိုလည္း သုံးၾကည့္သင့္ပါတယ္။

 

4. Try a PHP Framework

PHP Framework ေတြကိုသုံးမယ္ ဆိုရင္ေတာ့ ျမန္ျမန္ဆန္ဆန္နဲ႔ application တစ္ခုကို လုပ္ႏိုင္ပါတယ္။ နာမည္ၾကီး PHP Framework

ေတြကေတာ့ Codeigniter, CakePHP, Symfony, Zend ျဖစ္ျပီး ကိုယ္နဲ႔သင့္ေတာ္မယ္ ထင္တာကို ေရြးခ်ယ္သုံးႏိုင္ပါတယ္။ ဒီ link မွာ

ၾကည့္မယ္ ဆိုရင္ေတာ့ PHP Framework ေတြရဲ႕ List ေတြကို ျမင္ရပါမယ္။ Beginner ေတြအေနနဲ႔ ကေတာ့ Framework ေပၚမွာ မေရး

သင့္ေသးဘူးလို႕ ထင္ပါတယ္။ Framework ေတြကိုစျပီး လုပ္ခ်င္သူေတြကို ကြၽန္ေတာ္ အၾကံျပဳခ်င္တာကေတာ့ Codeigniter ဟာစရတာ

လြယ္ပါလိမ့္မယ္။

5. Learn the DRY Approach

DRY ဆိုတာကေတာ့ Don’t Repeat Yourself ပဲျဖစ္ပါတယ္။ ကြၽန္ေတာ္လည္း ဒီအေခၚအေဝၚကို ဒီ article ကိုဖတ္လိုက္ေတာ့မွ သိသြား

တာျဖစ္ပါတယ္။ PHP မွ မဟုတ္ပဲ တျခားဘယ္ Programming Languages မွာ မဆို code ေတြဟာ DRY Approach ျဖစ္ဖို႔၊ redundant

code ေတြမျဖစ္ဖို႔ကို ေရွာင္ၾကဥ္ေသာက္သင့္ပါတယ္။ DRY Approach ကိုေတာ့ ဒီမွာ ဆက္ဖတ္ၾကည့္ႏိုင္ပါတယ္။

http://en.wikipedia.org/wiki/Don't_repeat_yourself
http://www.artima.com/intv/dry.html


6. Indent Code and Use White Space for Readability

ဟုတ္ပါတယ္ coding ေရးတဲ့အခါ ညီညာတဲ့ Indent ေတြ၊ White Space ေတြနဲ႔ဆိုရင္ေတာ့ ေနာက္ပိုင္း ျပန္ျပီး maintain လုပ္ရတာလဲ

အဆင္ေျပရပါတယ္။တကယ္လို႕ IDE ေတြသုံးမယ္ ဆိုရင္ေတာ့ alignment ေတြ auto adjust လုပ္ေပးတဲ့ အတြက္ ေရးရတာ ပိုေကာင္း

ပါတယ္။ Author ကေတာ့ Indent Code and Use White Space မရွိတဲ့ Coding ေတြကို Jackson Pollock painting နဲ႔ ခိုင္းႏႈိင္းကာ

ေျပာသြားပါတယ္။ Jackson Pollock paintingဆိုတာကို ဗဟုသုတ အေနနဲ႔ ၾကည့္လို႕ရေအာင္ ေအာက္မွာ ထည့္ေပးထားပါတယ္။


7. “Tier” your Code

Coding ထဲမွာ HTML ဆိုရင္ HTML သက္သက္၊ JS ဆိုရင္ JS သက္သက္၊ PHP Code ဆိုရင္ PHP Code သက္သက္ Tier ေတြခြဲထား

သင့္ပါတယ္။ Tier ေတြဘယ္လို႕ခြဲထုတ္လဲ ဆိုတာကို ဒီမွာ ဖတ္ၾကည့္ႏိုင္ပါတယ္။ ကြၽန္ေတာ္လည္း အဲဒီ article ကိုျပန္ေရးဖို႔ အစီအစဥ္

ရွိပါတယ္။

8. Always Use <?php ?>

PHP မွာ

<?  echo "Hello world";  ?>
<?="Hello world"; ?>



စသည္ျဖင့္ ႐ိုက္ႏိုင္ေပမယ့္ author ကေတာ့ အျမဲတမ္း <?php ?> ထည့္ေပး သင့္တယ္လို႕ ဆိုပါတယ္။ ကြၽန္ေတာ္ အေတြ႔အၾကဳံအရ

short tag ေတြကို on ထားမွ အေပၚမွာျပထားတဲ့ code ေတြက အလုပ္လုပ္မွာ ျဖစ္ပါတယ္။ ဒီမွာေတာ့ short open tag အေၾကာင္းေရး

ထားတာ ရွိပါတယ္။ <?php ?> လို႕ေရးရင္ေတာ့ open tag ဘာပဲျဖစ္ေနျဖစ္ေန အလုပ္လုပ္မွာ ျဖစ္တာေၾကာင့္ author က standard 

အေနနဲ႔ ေျပာတာ ျဖစ္ပါလိမ့္မယ္။

9. Use Meaningful, Consistent Naming Conventions

Variable name, Class Name, function name, object name ေတြကို အမည္ေပးတဲ့ အခါ အဓိပၸါယ္ရွိေသာ name ေတြကိုသာ ေပးသင့္

ပါတယ္။ ဒါမွကိုယ့္ code ကိုကိုယ္ပဲ ျပန္ဖတ္ဖတ္ သူမ်ားပဲလာဖတ္ဖတ္ အလြယ္တကူ နားလည္ႏိုင္မွာ ျဖစ္ပါတယ္။

10. Comment, Comment, Comment

ကိုယ့္ code ကိုေနာက္တခ်ိန္ ကိုယ့္ဟာကိုယ္ပဲ ျပန္ဖတ္ဖတ္၊ သူမ်ားက ဆက္ျပီး maintain လုပ္ဖို႔ ဖတ္ဖတ္ indent ေတြ၊ white space ေတြ

အျပင္အေရးၾကီးတဲ့ ေနရာေတြမွာ comment ေတြရွိေနမယ္ဆိုရင္ အရမ္းကိုေကာင္ပါတယ္။ ဒါေၾကာင့္ စနစ္တက် comment ေပးတတ္တဲ့

အက်င့္ေလးကို လုပ္သင့္ပါတယ္။ ဘယ္ programming languages မွာမဆို စနစ္တက် သန္႔သန္႔ ရွင္းရွင္း ေရးတတ္တာ အလြန္ေကာင္းမြန္တဲ့

အက်င့္ပဲ ျဖစ္ပါတယ္။ကြၽန္ေတာ္လည္း ပ်င္းလာရင္ ျဖစ္ေစ၊ dead line အရမ္နီးလာရင္ ျဖစ္ေစ code ေတြကို dirty ျဖစ္ေအာင္ေရးတက္တဲ့

အက်င့္ကို ျပင္ဖို႔ ဒီ article ကိုေရးရင္ သတိဝင္လာပါတယ္။  စုစုေပါင္း ၃၂ ခ်က္ရွိေပမယ့္ ဒီ post မွာေတာ့ ဒီေလာက္နဲ႔ပဲ ခဏရပ္ခ်င္ပါတယ္။ 



Write comment (0 Comments)
 

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

Thursday, 22 July 2010 00:03

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

  1. Google Chart API Part -1
  2. Google Chart API Part -2 (or) Interactive Charts

ဒါမွ အဆက္အစပ္ေလး ရွိသြားျပီး ပိုျပီး သေဘာေပါက္သြား မွာျဖစ္ပါတယ္။ ဒီ 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 ကိုဆတ္ေရးလိုက္မယ္။

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;
        }
    }

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

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

<body>

        <!--Div for our chart -->
        <div id="chart"></div>

        <!--Divs for our messages -->
        <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>

        <!-- load Google AJAX API -->
        <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 for our chart -->
        <div id="chart"></div>

        <!--Divs for our messages -->
        <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> 
 
        <!-- load Google AJAX API --> 
        <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 for our chart --> 
        <div id="chart"></div> 
 
    </body> 
</html>


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


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)
 

More Articles...

Page 1 of 52

«StartPrev12345678910NextEnd»

mod_joomtouch

Version Iphone

Version Iphone by JoomTouch