မဂၤလာပါခင္ဗ်ာ။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar ကုမၸဏီတြင္ Web Designer အျဖစ္ ဝင္ေရာက္ လုပ္ကိုင္လ်က္ရွိေသာ ေက်ာ္စိုးႏိုင္ ျဖစ္ပါတယ္။ ဒီတစ္ပတ္မွာေတာ့ Chart.js ကို အသုံးျပဳၿပီး chart create ျပဳလုပ္ပုံအဆင့္ဆင့္ နဲ႔ ပတ္သက္ၿပီး ေဝမွ်ေပးခ်င္ပါတယ္ခင္ဗ်။
ပထမဆုံးအေနနဲ႔ Chart.js ဆိုတာ ဘာလဲ။

What is Chart.js?
Chart.js ဆိုတာ designer မ်ားႏွင့္ developer မ်ားအတြက္ HTML5 Canvas element ကို အသုံးျပဳ၍ Chart အမ်ိဳးမ်ိဳးကို အသုံးျပဳလြယ္ကူေစရန္ခြင့္ျပဳထားေသာ javascript library တစ္ခုျဖစ္ပါတယ္။

Chart Types
Chart.js ဆိုတာ open source javascript library တစ္ခု ျဖစ္တဲ့အတြက္ မိမိ website မွာလိုအပ္ေသာ chart မ်ားကို ထည့္သြင္းအသုံးျပဳရန္ Chart အမ်ိဳးအစား (၈)မ်ိဳး Build-in အေနျဖင့္ ပါလာပါတယ္။
1.Scatter
2.Line
3.Bar
4.Radar
5.Pie
6.Doughnut
7.Polar Areaႏွင့္
8.Bubble တို႔ျဖစ္ပါတယ္။

Installation

Chart.js ကို ေအာက္ပါ နည္းလမ္းမ်ားကို အသုံးျပဳၿပီး install ျပဳလုပ္အသုံးျပဳႏိုင္ပါတယ္။

#npm

>> npm install chart.js --save

npm ႏွင့္ bower ကိုအသုံးျပဳမယ္ဆိုရင္ မိမိ computer မွာပထမဦးဆုံး node.js ကို download လုပ္ၿပီး install တင္ရန္လိုအပ္ပါတယ္။ Node.js ကို nodejs.org မွာ download ရယူႏိုင္ပါတယ္။ Node.js ကို install လုပ္လိုက္ရင္ NPM က တစ္ခါတည္း ပါဝင္လာမည္ ျဖစ္ပါသည္။

Node.js ႏွင့္ NPM ကို install လုပ္ၿပီးေနာက္ မိမိစက္ထဲတြင္ installation success ျဖစ္မျဖစ္ command prompt (သို႔မဟုတ္) terminal ကို ဖြင့္ၿပီး အခုလို စစ္ၾကည့္ႏိုင္ပါတယ္။

ေအာက္ပါပုံ အတိုင္း version ေပၚလာရင္ installation လုပ္တာ ေအာင္ျမင္ပါတယ္။

ထို႔ေနာက္ NPM ကို အသုံးျပဳၿပီး terminal တြင္

>> npm install chart.js --save
>> bower install chart.js --save

ကို အသုံးျပဳႏိုင္သလို npm အစား bower command line utility ကိုလဲ install လုပ္ၿပီးလည္းပဲအသုံးျပဳႏိုင္ပါတယ္။

>> npm install -g bower

bowerနဲ႔ပတ္သတ္ၿပီး အေသးစိတ္ကိုေတာ့ ေအာက္ပါlink မွာ ဝင္ေရာက္ေလ့လာႏိုင္ပါတယ္။
https://bower.io/
ေနာက္ဆုံးနည္းလမ္းကေတာ့ minimize လုပ္ထားေသာ Chart.js CDN link ကို အသုံးျပဳျခင္းျဖစ္ပါတယ္။

#CDN
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js”></script>

Chart တစ္ခုကို စတင္ create ျပဳလုပ္မယ္ဆိုရင္ chart နဲ႔ သက္ဆိုင္ေသာ data ႏွင့္ label ပါရွိရမည္ျဖစ္ၿပီး structure ‌အေနျဖင့္ ေအာက္မွာ ျပထားေသာ line chart figure မွာ ေတြ႕ႏိုင္ပါတယ္။

Chart.js နဲ႔ပတ္သက္ၿပီး install ျပဳလုပ္ပုံကို သိရွိသြားၿပီဆိုေတာ့ Chart.js နဲ႔ပတ္သတ္ၿပီး စတင္အသုံးျပဳသူမ်ားအတြက္ chart create လုပ္ပုံအဆင္ဆင့္ကို တစ္ဆင့္ျခင္း ‌ေရးသားထားပါတယ္။
ေအာက္ပါ Link ကေန ေလ့လာၾကည့္လို႔ရပါတယ္ခင္ဗ်။

Sample coding အေသးစိတ္ကိုေတာ့ နမူနာအေနနဲ႔ ၾကည့္ရႈလို႔ရေအာင္ ေအာက္ပါ link မွာ ေဖာ္ျပေပးထားပါတယ္။

https://github.com/kyawsoenaingspiceworksmyanmar/CHART.git

Chart.js နဲ႔ပတ္သက္ၿပီး အနည္းငယ္ သိရွိသြားလိမ့္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ စိတ္ဝင္စား၍ အေသးစိတ္ေလ့လာလိုပါက chartjs.org မွာ ဝင္ေရာက္ ၾကည့္ရႈေလ့လာႏိုင္ပါတယ္။

အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။