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 လုပ္မယ္

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


Comments (0)
Write comment
Your Contact Details:
Comment:
[b] [i] [u] [url] [quote] [code] [img]   
:D:angry::angry-red::evil::idea::love::x:no-comments::ooo::pirate::?::(
:sleep::););)):0
Security
Please input the anti-spam code that you can read in the image.
< Prev   Next >

Latest Post

Login Form



Categories Table View

Most read article

JoomlaWatch Stats 1.2.9 by Matej Koval

Facebook Share

Share on facebook

mod_joomtouch

Version Iphone

Version Iphone by JoomTouch