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

ကြၽန္ေတာ္ Site ကို RSS နဲ႔ ဖတ္ခ်င္တယ္ဆိုရင္ေတာ့ http://feeds.feedburner.com/zack-rss ကေန ဖတ္ႏိုင္ ပါတယ္ ခင္ဗ်ာ။ ဖတ္ျပီး ၾကိဳက္ႏွစ္သက္တယ္ ဆိုရင္ FaceBook ကလို Like ဆိုတာမ်ိဳး လုပ္ခဲ့ ႏိုင္ပါတယ္။ ကြၽန္ေတာ္ ေရးထားတာေတြဟာ မွားေနတယ္ (သို႕) လိုအပ္ခ်က္ေတြ ရွိေနတယ္ (သို႕) နားမလည္ဘူး ဆိုရင္လည္း Comment ေရးထား ခဲ႔ႏိုင္ပါတယ္။ Category အလိုက္ Table View နဲ႔ ျပန္ၾကည့္ခ်င္တယ္ ဆိုရင္ေတာ့ ဘယ္ဘက္က Categories Table View ေအာက္မွာ အလြယ္တကူ ျပန္ၾကည့္ႏိုင္ပါတယ္။

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>