ร ะ บ า ย อ า ร ม ณ์

ก่อนอื่น…
ทำไมถึงไม่มีคนเขียนเรื่องนี้…อิชั้นหานานมกกกกก ="=
ขอโวยวายนิดนึง – -"

หลังจากมั่วใน Google Chart Wizard อยู่นาน ก็ได้เวลาหาโค้ดจากที่อื่นแทน (เพราะงง และเนื้อหาเยอะเกินไปขี้เกียจอ่าน ^^") และก็คิดว่าต้องมีคนเขียนเรื่องนี้ไว้แล้วแน่ๆ ก็เลย Google ดู แล้วก็เจอเว็บนี้ค่ะ

http://wyly.wordpress.com/2009/04/24/adding-graphs-bar-and-pie-charts-to-sharepoint/

ถ้าไม่ได้เว็บนี้ ก็คงยังงมเข็มอยู่อีกนานค่ะ ขอบคุณมาก… >> เค้าไม่น่าจะอ่านออก – -"
เอาใหม่…
Thanks to whoever wrote the above blog. If you didn’t write such a thing, I will not complete my work today

Pls ignore my grammar =_=

ก็ขอมา share สำหรับคนที่ใช้ SharePoint เหมือนกันและอยากจะสร้าง chart สวยๆ ไว้ดูนะคะ
โค้ดที่ให้นี้จะสามารถสร้าง Pie Chart ได้สองวง อย่างที่เห็น
โดยอิงตามข้อมูลใน Custom List ที่อยู่ในหน้าเดียวกัน …ตามรูป

อย่างแรกคือ เราต้องมี Custom List ก่อน

1) สร้าง List ที่เก็บข้อมูลทั้งหมดไว้ และ group ไว้ตามหัวข้อที่ต้องการ เช่น group ตาม Status, group ตาม Category (โค้ดที่จะให้นี้จะใช้ได้กับแบบที่แบ่งเป็น Group แล้วเท่านั้นค่ะ)

2) copy โค้ดนี้ไป (Thanks to the above link again)

  1: <script type="text/javascript">

  2: if(typeof jQuery=="undefined"){

  3: var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";

  4: document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");

  5: }

  6: </script>

  7:

  8: <script type="text/javascript">

  9: var chartkeyword = [];

 10: var chartcolor = [];

 11:

 12: ////////////////////////// Customizations /////////////////////////////////

 13:

 14: chartkeyword[1]="Status"   //name of the first column that's grouped

 15: chartkeyword[2]="Category"   //name of the second column that's grouped

 16: chartcolor[1]="FE8497"    //Color of Pie Chart 1

 17: chartcolor[2]="FF6B00"    //Color of Pie Chart 2

 18:

 19: var charts=2 // if you only want one pie chart change this to 1

 20:

 21: </script>

 22: <table width=100%><tr>

 23: <td><div id="jLoadMex1" class="content"><strong>

 24:

 25: <!------------- Name of Chart 1 -------------------------->

 26: Status Chart

 27:

 28: </strong></div></td>

 29: <td><div id="jLoadMex2" class="content"><strong>

 30:

 31: <!------------- Name of Chart 2 -------------------------->

 32: Category Chart

 33:

 34: </strong></div></td>

 35: </tr></table>

 36:

 37: <script type="text/javascript">

 38: $("document").ready(function(){

 39:

 40: for(var i=1;i<=charts;i++)

 41: {

 42: makeChart(i)

 43: }

 44: });

 45:

 46: function makeChart(i)

 47: {

 48:   var arrayList=$("td.ms-gb:contains('" + chartkeyword[i] + "')");

 49:   var coord= new Array();

 50:   var labels= new Array();

 51:

 52:   $.each(arrayList, function(i,e)

 53:   {

 54:     var MyIf= $(e).text();

 55:     var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y' coordinates

 56:     coord[i]=txt;

 57:     var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels

 58:     //labels[i]=txt1+"("+txt+")";   //add also coordinates for better read

 59:     labels[i]=txt1

 60:   });

 61:   //----------Start of "Summerize Lists into a single Pie Chart" Code -----------

 62:   var labelsCoords= new Array();

 63:   for ( var count1=0;count1<labels.length;count1++) //Dupe Check

 64:   {

 65:     if (labels[count1]=="!delete!")

 66:     {

 67:        labels.splice(count1,1); //delete dupe from array

 68:        coord.splice(count1,1); //delete numbers from array

 69:        count1-=count1; //reset the counter to match the index

 70:     }

 71:     else

 72:     {

 73:       for ( var count2 in labels )

 74:       {

 75:         if (labels[count1].replace(/ /g,"-")==labels[count2].replace(/ /g,"-")&&count1!=count2&&labels[count1]!="!delete!")

 76:         {

 77:           coord[count1]=(coord[count1]*1)+(coord[count2]*1) //total dupe counts

 78:           labels[count2]="!delete!" //label as a dupe to delete

 79:         }

 80:       }

 81:     }

 82:     labelsCoords[count1]=labels[count1]+"("+coord[count1]+")";

 83:   }

 84:

 85:   var txt= coord.join(",");

 86:   var txt1= labelsCoords.join("|"); // This replaces  var txt1=labels.join("|");

 87:

 88:   //----------End of "Summerize Lists into a single Pie Chart" Code -----------

 89:

 90:   // Adjust Chart Properties below - See Google Charts API for reference

 91:   var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p&chs=320x120&chd=t:"+txt+"&chl="+txt1+"&chco="+chartcolor[i]+"' />";

 92:   $("#jLoadMex"+i).append("<p>"+vinc+"</p>")

 93: }

 94:

 95: </script>

 96: 

3) Add new Web Part  >  เลือก "Content Editor Web Part"

4) copy/paste โค้ดจากด้านบนมาไว้ใน Content Editor Web Part นี่แหละค่ะ > เลือก Source Editor …

5) Edit Code >>> เข้าไปแก้ไขโค้ดตัวอย่าง ให้คำ keyword เป็นคำของ Chart เราเอง…

ดูในช่วงบรรทัด 14- 32 นะคะ

บรรทัด 14:  Group ที่ 1 เช่น group ตาม Status

บรรทัด 15:  Group ที่ 2 เช่น group ตาม Category

บรรทัด 16:  สีของ chart วงที่ 1

บรรทัด 17:  สีของ chart วงที่ 2

บรรทัด 26:  ชื่อของ chart วงที่ 1

บรรทัด 32:  ชื่อของ chart วงที่ 2

เปลี่ยนแค่นี้เท่านั้นค่ะ ง่ายมากกกกกกกก ไม่ต้องเก่งโค้ดก็ทำได้ >_<

แล้วก็ Save > OK ok ok  ออกมา …เป็นอันเรียบร้อย

ลองดูกันนะคะ

จะได้ Pie Chart  แบบ real-time ที่สวยงาม ไม่ต้องมานั่งทำรูปจาก Excel ก๊อบปี้หน้าจอลง Paint แล้วตัดรูปมาแปะให้ยุ่งยาก ^^

Fighting! Fighting!!