หน้านี้อธิบายวิธีนำบริการที่รองรับโปรโตคอลแหล่งข้อมูลของเครื่องมือแผนภูมิเพื่อแสดงข้อมูลไปยังแผนภูมิโดยใช้คลาสการค้นหา
เนื้อหา
ผู้ชม
หน้านี้มีไว้สำหรับนักพัฒนาซอฟต์แวร์ที่จะสร้างแหล่งข้อมูลของตนเองโดยไม่ใช้ไลบรารีแหล่งข้อมูลของเครื่องมือในแผนภูมิ หากคุณใช้ไลบรารีดังกล่าวหรือไลบรารีตัวช่วยอื่นๆ โปรดอ่านเอกสารประกอบของห้องสมุดก่อน
หน้านี้ยังมีไว้สำหรับผู้อ่านที่สนใจทำความเข้าใจ Wire Protocol ที่ใช้สำหรับการสื่อสารระหว่างการแสดงภาพไคลเอ็นต์กับแหล่งข้อมูล
หากคุณกำลังสร้างหรือใช้การแสดงภาพ คุณไม่จำเป็นต้องอ่านหน้านี้
คุณควรเข้าใจไวยากรณ์คำขอ JSON และ HTTP พื้นฐานเพื่ออ่านเอกสารนี้ คุณควรเข้าใจวิธีการทำงานของแผนภูมิจากมุมมองของผู้ใช้ด้วย
ภาพรวม
คุณสามารถใช้โปรโตคอลแหล่งข้อมูลของเครื่องมือแผนภูมิ เพื่อเป็นผู้ให้บริการแหล่งข้อมูลสำหรับแผนภูมิของคุณเองหรือแผนภูมิอื่นๆ แหล่งข้อมูลของเครื่องมือแผนภูมิจะแสดง URL ที่เรียกว่า URL ของแหล่งข้อมูล ซึ่งแผนภูมิสามารถส่งคำขอ HTTP GET ได้ ในการตอบสนอง แหล่งข้อมูลจะแสดงผลข้อมูลที่จัดรูปแบบอย่างถูกต้องซึ่งแผนภูมิสามารถใช้ในการแสดงผลกราฟิกบนหน้าเว็บได้ โปรโตคอลการตอบกลับคำขอนี้เรียกว่าโปรโตคอลแบบใช้สายของ Google Visualization API
ข้อมูลที่แสดงโดยแหล่งข้อมูลจะแยกออกจากทรัพยากรได้หลายรายการ เช่น ไฟล์หรือฐานข้อมูล ข้อจำกัดเพียงอย่างเดียวคือคุณจัดรูปแบบข้อมูลเป็นตาราง 2 มิติที่มีคอลัมน์ที่มีการพิมพ์ได้
ในฐานะแหล่งข้อมูลของเครื่องมือแผนภูมิ คุณต้องแยกวิเคราะห์คำขอในรูปแบบที่ระบุ และแสดงการตอบกลับในรูปแบบเฉพาะ วิธีการทั่วไปทำได้ 2 วิธีดังนี้
-
ใช้ไลบรารีตัวช่วยรายการใดรายการหนึ่งต่อไปนี้เพื่อจัดการคำขอและการตอบกลับ และสร้าง DataTable เพื่อให้แสดงผล หากใช้ไลบรารีเหล่านี้ คุณต้องเขียนเฉพาะโค้ดที่จำเป็นเพื่อให้ข้อมูลพร้อมใช้งานในไลบรารีในรูปแบบของตาราง
- ไลบรารีแหล่งข้อมูล Java - จัดการคำขอและการตอบกลับ สร้างตารางการตอบกลับจากข้อมูลที่คุณให้ไว้ และใช้งานภาษาการค้นหา SQL ของเครื่องมือ Google แผนภูมิ
-
ไลบรารีแหล่งข้อมูล Python -
สร้างตารางการตอบกลับจะสร้างไวยากรณ์การตอบกลับ ไม่ได้จัดการการแยกวิเคราะห์คำขอหรือการใช้ภาษาการค้นหา SQL ของเครื่องมือ Google แผนภูมิ
หรือ
- เขียนแหล่งข้อมูลของคุณเองตั้งแต่ต้นโดยการจัดการคำขอ สร้าง DataTable และส่งการตอบกลับ
วิธีการทำงาน
- แหล่งข้อมูลจะแสดง URL ที่เรียกว่า URL ของแหล่งข้อมูล ซึ่งแผนภูมิจะส่งคำขอ HTTP GET ให้
- ไคลเอ็นต์จะส่งคำขอ HTTP GET ที่มีพารามิเตอร์ที่อธิบายรูปแบบที่จะใช้กับข้อมูลที่ส่งคืน สตริงการค้นหาที่ไม่บังคับ และพารามิเตอร์ที่กำหนดเองที่ไม่บังคับ
- แหล่งข้อมูลรับและแยกวิเคราะห์คำขอ ตามที่อธิบายไว้ใน รูปแบบคำขอ
- แหล่งข้อมูลจะเตรียมข้อมูลในรูปแบบที่ขอ ซึ่งโดยปกติจะเป็นตาราง JSON รูปแบบการตอบกลับจะอยู่ในส่วนรูปแบบการตอบกลับ แหล่งข้อมูลอาจรองรับ ภาษาในการค้นหา Visualization API ซึ่งระบุการกรอง การจัดเรียง และการจัดการข้อมูลอื่นๆ ก็ได้
- แหล่งข้อมูลจะสร้างการตอบกลับ HTTP ที่มีข้อมูลที่ทำให้ต่อเนื่องและพารามิเตอร์การตอบกลับอื่นๆ แล้วส่งกลับไปยังไคลเอ็นต์ตามที่อธิบายไว้ในรูปแบบการตอบกลับ
หมายเหตุ: พารามิเตอร์และค่าคงที่ของสตริงทั้งหมดที่ระบุไว้ในเอกสารนี้สำหรับคำขอและการตอบกลับ (เช่น responseHandler
และ "ok") เป็นตัวพิมพ์เล็กและคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
ข้อกำหนดขั้นต่ำ
ข้อกำหนดขั้นต่ำในการใช้เป็นแหล่งข้อมูลของเครื่องมือในแผนภูมิมีดังนี้
- แหล่งข้อมูลควรยอมรับคำขอ HTTP GET และควรพร้อมใช้งานสำหรับไคลเอ็นต์ของคุณ
- โปรโตคอลสามารถเปลี่ยนและรองรับรูปแบบเวอร์ชัน (เวอร์ชันปัจจุบันคือ 0.6) ได้ ดังนั้นแหล่งข้อมูลควรรองรับคำขอที่ใช้เวอร์ชันก่อนหน้าและเวอร์ชันปัจจุบัน คุณควรพยายามสนับสนุนเวอร์ชันใหม่ทันทีที่เปิดตัว เพื่อหลีกเลี่ยงความเสียหายที่ไคลเอ็นต์ที่อัปเกรดเป็นเวอร์ชันใหม่ที่สุดจะเสียไปอย่างรวดเร็ว
- โปรดอย่าล้มเหลวหากมีการส่งพร็อพเพอร์ตี้ที่ไม่รู้จักเป็นส่วนหนึ่งของคำขอ เนื่องจากเวอร์ชันใหม่อาจนำเสนอพร็อพเพอร์ตี้ใหม่ที่คุณไม่รู้จัก
- แยกวิเคราะห์เฉพาะพร็อพเพอร์ตี้ที่คุณต้องการ แม้ว่าเวอร์ชันใหม่อาจนำเสนอพร็อพเพอร์ตี้ใหม่ แต่อย่ายอมรับและใช้สตริงคำขอทั้งสตริงโดยไม่เปิดเผย โปรดแยกวิเคราะห์และใช้พร็อพเพอร์ตี้ที่คุณต้องการเท่านั้นเพื่อป้องกันการโจมตีที่เป็นอันตราย
- บันทึกข้อกำหนดของแหล่งข้อมูลอย่างละเอียดหากคุณไม่ได้เขียนโค้ดแผนภูมิไคลเอ็นต์ด้วยตนเอง ซึ่งรวมถึงการบันทึกข้อมูลต่อไปนี้
- พารามิเตอร์ที่กำหนดเองใดๆ ที่คุณยอมรับได้
- คุณสามารถแยกวิเคราะห์ภาษาการค้นหาของ Google Visualization API ได้หรือไม่ และ
- ประเภทข้อมูลที่ส่งกลับ และโครงสร้างของข้อมูลดังกล่าว (ลักษณะของแถวและคอลัมน์ และการติดป้ายกำกับ)
- ใช้มาตรการรักษาความปลอดภัยแบบมาตรฐานทั้งหมดสำหรับเว็บไซต์ที่ยอมรับคำขอจากไคลเอ็นต์ที่ไม่รู้จัก คุณสามารถรองรับ MD5, การแฮช และกลไกความปลอดภัยอื่นๆ ในพารามิเตอร์ได้อย่างสมเหตุสมผลเพื่อตรวจสอบสิทธิ์คำขอหรือช่วยรักษาความปลอดภัยจากการโจมตีที่เป็นอันตราย รวมถึงคาดหวังให้ไคลเอ็นต์ทราบถึงข้อกำหนดและตอบกลับคำขอเหล่านั้น อย่างไรก็ตาม อย่าลืมบันทึกข้อกำหนดทั้งหมดไว้อย่างดีหากไม่ได้เขียนโค้ดแผนภูมิด้วยตัวเอง โปรดดูข้อควรพิจารณาด้านความปลอดภัยด้านล่าง
- สตริงคำขอและการตอบกลับทั้งหมดควรเข้ารหัส UTF-8
- รูปแบบการตอบกลับที่สำคัญที่สุดคือ JSON อย่าลืมใช้ JSON ก่อนเนื่องจากเป็นรูปแบบที่แผนภูมิส่วนใหญ่ใช้ หลังจากนั้นให้เพิ่มการตอบกลับประเภทอื่นๆ
- คุณไม่จำเป็นต้องรองรับภาษาที่ใช้ค้นหา Visualization API แต่แหล่งข้อมูลดังกล่าวจะทำให้แหล่งข้อมูลมีประโยชน์ต่อลูกค้ามากขึ้น
- คุณไม่จำเป็นต้องต้องรองรับคำขอจากแผนภูมิทุกประเภทและทุกประเภท รวมถึงรองรับพารามิเตอร์ที่กำหนดเองสำหรับแผนภูมิที่กำหนดเองได้ แต่คุณ ควรแสดงผลการตอบกลับในรูปแบบมาตรฐานที่อธิบายไว้ด้านล่าง
ข้อพิจารณาด้านความปลอดภัย
เมื่อออกแบบแหล่งข้อมูล คุณจะต้องคำนึงถึงความปลอดภัยของข้อมูล คุณสามารถใช้รูปแบบการรักษาความปลอดภัยที่หลากหลายสำหรับเว็บไซต์ ตั้งแต่การเข้าถึงรหัสผ่านอย่างง่ายไปจนถึงการตรวจสอบสิทธิ์คุกกี้ที่ปลอดภัย
การโจมตี XSSI (การรวมสคริปต์ข้ามเว็บไซต์) มีความเสี่ยงจากการโจมตีด้วยแผนภูมิ ผู้ใช้อาจไปยังหน้าเว็บที่มีสคริปต์ที่เป็นอันตรายซึ่งเริ่มพยายามค้นหา URL แหล่งข้อมูลโดยใช้ข้อมูลเข้าสู่ระบบของผู้ใช้ปัจจุบัน หากผู้ใช้ไม่ได้ออกจากระบบเว็บไซต์ สคริปต์จะผ่านการตรวจสอบสิทธิ์เป็นผู้ใช้ปัจจุบันและมีสิทธิ์ในเว็บไซต์นั้น การใช้แท็ก <script src> จะทำให้สคริปต์ที่เป็นอันตรายรวมแหล่งข้อมูลไว้ด้วยได้ ซึ่งคล้ายกับ JSONP
เพื่อเพิ่มระดับความปลอดภัยให้สูงขึ้น คุณอาจพิจารณาจำกัดคำขอที่ส่งไปยังโดเมนเดียวกับแหล่งข้อมูลของคุณ ซึ่งจะจํากัดระดับการเข้าถึงแหล่งข้อมูลอย่างมาก แต่หากมีข้อมูลที่ละเอียดอ่อนมากซึ่งไม่ควรเข้าถึงจากภายนอกโดเมน คุณควรพิจารณาข้อมูลดังกล่าว แหล่งข้อมูลที่อนุญาตเฉพาะคำขอจากโดเมนเดียวกันจะเรียกว่าแหล่งข้อมูลแบบจำกัด ไม่ใช่แหล่งข้อมูลที่ไม่มีการจำกัด ซึ่งจะรับคำค้นหาจากโดเมนใดก็ได้ รายละเอียดเกี่ยวกับวิธีใช้แหล่งข้อมูลที่ถูกจำกัดมีดังนี้
หากต้องการตรวจสอบว่าคำขอมาจากภายในโดเมนของคุณอย่างแท้จริง และไม่ได้มาจากโดเมนภายนอก (หรือเบราว์เซอร์ภายในโดเมนที่อยู่ภายใต้การโจมตี XSRF) ให้ทำดังนี้
- โปรดยืนยันว่ามีส่วนหัว "X-DataSource-Auth" ในคำขอ ส่วนหัวนี้กำหนดโดย Google Visualization API คุณไม่จำเป็นต้องตรวจสอบเนื้อหาของส่วนหัวนี้ เพียงแค่ยืนยันว่ามีส่วนหัวดังกล่าวอยู่เท่านั้น หากใช้ไลบรารีแหล่งข้อมูลของเครื่องมือ Google แผนภูมิ ก็ให้ไลบรารีจัดการเรื่องนี้ให้คุณได้
- ใช้การตรวจสอบสิทธิ์คุกกี้เพื่อตรวจสอบสิทธิ์ไคลเอ็นต์ ไม่มีวิธีที่ทราบว่าแทรกส่วนหัวที่กำหนดเองลงในคำขอข้ามโดเมนโดยที่ยังคงเก็บคุกกี้การตรวจสอบสิทธิ์ไว้
- ทำให้ JavaScript ไม่น่าจะทำงานเมื่อรวมกับแท็ก <script src> โดยใส่ )]}" แล้วขึ้นบรรทัดใหม่นำหน้าการตอบกลับ JSON ด้วย ในไคลเอ็นต์ของคุณ ให้ตัดคำนำหน้าออกจากการตอบกลับ สำหรับ XmlHttpRequest จะใช้ได้ก็ต่อเมื่อคำขอมาจากโดเมนเดียวกันเท่านั้น
รูปแบบคำขอ
ไคลเอ็นต์จะส่งคำขอ HTTP GET ที่มีพารามิเตอร์หลายรายการ รวมถึงองค์ประกอบที่กำหนดเอง สตริงการค้นหาที่ไม่บังคับ ลายเซ็น และองค์ประกอบอื่นๆ คุณเป็นผู้รับผิดชอบในการแยกวิเคราะห์พารามิเตอร์ที่อธิบายไว้ในส่วนนี้เท่านั้น และควรระวังอย่าจัดการกับผู้อื่นเพื่อหลีกเลี่ยงการโจมตีที่เป็นอันตราย
โปรดตรวจสอบว่ามีค่าเริ่มต้นสําหรับพารามิเตอร์ที่ไม่บังคับ (ทั้งมาตรฐานและที่กําหนดเอง) และบันทึกค่าเริ่มต้นทั้งหมดไว้ในเอกสารประกอบของเว็บไซต์
ต่อไปนี้คือตัวอย่างคำขอ (ดูตัวอย่างคำขอและคำตอบเพิ่มเติมได้ที่ส่วนท้ายของเอกสารนี้ในตัวอย่าง)
หมายเหตุ: สตริงคำขอต่อไปนี้และสตริงที่แสดงในส่วนตัวอย่าง ควรกำหนดอักขระหลีกกับ URL ก่อนส่ง
Basic request, no parameters: http://www.example.com/mydatasource Request with the tqx parameter that contains two properties: http://www.example.com/mydatasource?tqx=reqId:0;sig:4641982796834063168 Request with a query string: http://www.example.com/mydatasource?tq=limit 1
ต่อไปนี้คือรายการพารามิเตอร์มาตรฐานทั้งหมดในสตริงคำขอ โปรดทราบว่าทั้งชื่อพารามิเตอร์ (เช่น "version") และค่าสตริงคงที่ (เช่น "ok", "warning" และ "not_modified") คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ตารางนี้ยังอธิบายด้วยว่าคุณต้องส่งพารามิเตอร์หรือไม่ และหากต้องส่ง คุณจะต้องจัดการพารามิเตอร์นั้นหรือไม่
พารามิเตอร์ | ต้องระบุในคำขอใช่ไหม |
ต้องจัดการแหล่งข้อมูลไหม |
คำอธิบาย |
---|---|---|---|
TQ | ไม่ได้ |
ไม่ได้ |
การค้นหาที่เขียนด้วยภาษาการค้นหาของ Google Visualization API ซึ่งระบุวิธีกรอง จัดเรียง หรือจัดการข้อมูลที่ส่งกลับมา ซึ่งไม่จำเป็นต้องใส่เครื่องหมายคำพูด เช่น |
TQX | ไม่ได้ |
ได้ |
ชุดคู่คีย์/ค่าที่คั่นด้วยโคลอนสำหรับพารามิเตอร์มาตรฐานหรือพารามิเตอร์ที่กำหนดเอง คู่จะคั่นด้วยเครื่องหมายเซมิโคลอน รายการพารามิเตอร์มาตรฐานที่โปรโตคอลการแสดงภาพกำหนดมีดังนี้
ตัวอย่าง: |
tqrt | ไม่ได้ |
ไม่ได้ |
สงวนไว้: ข้ามพารามิเตอร์นี้ เมธอดที่ใช้ส่งคำค้นหา |
รูปแบบการตอบกลับ
รูปแบบของการตอบกลับขึ้นอยู่กับพารามิเตอร์ out
ของคำขอซึ่งระบุประเภทการตอบกลับที่คาดไว้ ดูวิธีตอบกลับคำขอแต่ละประเภทในส่วนต่อไปนี้
- JSON - แสดงผลการตอบกลับ JSON ที่ประกอบด้วยข้อมูลในออบเจ็กต์ JavaScript ที่ส่งผ่านไปยังตัวสร้าง
DataTable
โดยตรงเพื่อป้อนข้อมูล ซึ่งเป็นประเภทคำขอที่พบบ่อยที่สุดและสำคัญที่สุดในการใช้งานอย่างเหมาะสม - CSV - แสดงผลรายการค่าที่คั่นด้วยเครื่องหมายจุลภาคซึ่งจัดการโดยเบราว์เซอร์
- TSV - แสดงรายการค่าที่คั่นด้วยแท็บซึ่งเบราว์เซอร์จัดการ
- HTML - แสดงผลตาราง HTML ที่เบราว์เซอร์จะแสดงผล
คุณใช้ไลบรารีแหล่งข้อมูลการแสดงภาพของ Google (java) หรือไลบรารี Python เพื่อสร้างรูปแบบเอาต์พุตเหล่านี้ให้คุณได้
รูปแบบการตอบกลับ JSON
รูปแบบการตอบกลับเริ่มต้นคือ JSON หากคำขอมีส่วนหัว "X-DataSource-Auth" และอีก JSONP โปรดทราบว่าจริงๆ แล้วไคลเอ็นต์ Google แผนภูมิรองรับ JSON และ JSONP เวอร์ชันที่แก้ไขแล้ว หากคุณใช้ไลบรารีตัวช่วยของ Java หรือ Python ไคลเอ็นต์จะใส่โค้ดที่เหมาะสมสำหรับคุณ หากคุณแยกวิเคราะห์คำตอบด้วยตนเอง โปรดดูการแก้ไข JSON ด้านล่าง
หากคุณบังคับใช้คำขอที่มีโดเมนเดียวกัน คุณควรยืนยันว่ามีส่วนหัว "X-DataSource-Auth" ในคำขอและใช้คุกกี้การให้สิทธิ์
นี่คือการตอบกลับรูปแบบเดียวที่เมธอด Google Visualization API ระบุ
google.visualization.Query.send()
คุณดูตัวอย่างคำขอและการตอบกลับ JSON บางส่วนได้ที่ส่วนท้ายของหน้านี้ในตัวอย่าง
คุณใช้ไลบรารีตัวช่วยของ Java หรือ Python เพื่อสร้างสตริงการตอบกลับนี้ให้คุณได้
รูปแบบการตอบกลับนี้เป็นออบเจ็กต์ JSON ที่เข้ารหัสแบบ UTF-8 (ออบเจ็กต์ที่หุ้มด้วยวงเล็บปีกกา { } โดยมีพร็อพเพอร์ตี้แต่ละรายการคั่นด้วยคอมมา) ซึ่งมีพร็อพเพอร์ตี้ในตารางด้านล่าง (มีการกำหนดข้อมูลให้กับพร็อพเพอร์ตี้ table
) ออบเจ็กต์ JSON นี้ควรห่อไว้ภายในค่าพารามิเตอร์ responseHandler
จากคำขอ ดังนั้น หากค่า responseHandler
ของคำขอคือ "myHandler" คุณควรแสดงผลสตริงในลักษณะนี้ (มีเพียงพร็อพเพอร์ตี้เดียวที่แสดงเพื่อความกระชับ)
"myHandler({status:ok, ...})"
หากคำขอไม่มีค่า responseHandler
ค่าเริ่มต้นคือ "google.visualization.Query.setResponse" ดังนั้นคุณควรแสดงผลสตริงลักษณะนี้ (มีเพียงพร็อพเพอร์ตี้เดียวที่แสดงเพื่อความกระชับเท่านั้น)
"google.visualization.Query.setResponse({status:ok, ...})"
สมาชิกออบเจ็กต์การตอบกลับที่ใช้ได้มีดังนี้
พร็อพเพอร์ตี้ | จำเป็นไหม |
คำอธิบาย |
---|---|---|
เวอร์ชัน | ไม่ได้ |
หมายเลขสตริงที่ระบุหมายเลขเวอร์ชันโปรโตคอลแบบ Wi-Fi ของ Google Visualization หากไม่ได้ระบุ ไคลเอ็นต์จะถือว่าเวอร์ชันล่าสุดเป็นเวอร์ชันล่าสุด เช่น |
reqId | มี* |
หมายเลขสตริงที่ระบุรหัสของคำขอนี้สำหรับไคลเอ็นต์นี้ หากข้อมูลนี้อยู่ในคำขอ ให้แสดงผลค่าเดียวกัน ดูรายละเอียดเพิ่มเติมได้ที่คำอธิบาย reqId ในส่วนคำขอ * หากไม่ได้ระบุพารามิเตอร์นี้ในคำขอ ก็ไม่จำเป็นต้องตั้งค่าในการตอบกลับ |
status | ได้ |
สตริงที่อธิบายความสำเร็จหรือความล้มเหลวของการดำเนินการนี้ ต้องเป็นค่าใดค่าหนึ่งต่อไปนี้เท่านั้น
เช่น |
คำเตือน | เฉพาะในกรณีที่เป็น status=warning |
อาร์เรย์ของออบเจ็กต์อย่างน้อย 1 รายการ แต่ละรายการอธิบายปัญหาที่ไม่ร้ายแรง
ต้องระบุหากเป็น
เช่น |
ข้อผิดพลาด | ต้องระบุหากเป็น status=error |
อาร์เรย์ของออบเจ็กต์อย่างน้อย 1 รายการ โดยแต่ละรายการอธิบายข้อผิดพลาด ต้องระบุหาก
อาร์เรย์มีสมาชิกสตริงต่อไปนี้ (แสดงผลเพียง 1 ค่าสำหรับสมาชิกแต่ละคน)
ตัวอย่าง:
|
sig | ไม่ได้ |
ค่าที่แฮชของออบเจ็กต์ตาราง มีประโยชน์ในการเพิ่มประสิทธิภาพการโอนข้อมูลระหว่างไคลเอ็นต์และแหล่งข้อมูล คุณเลือกอัลกอริทึมของแฮชที่ต้องการได้ หากรองรับพร็อพเพอร์ตี้นี้ คุณควรแสดงผลค่าที่ไคลเอ็นต์ส่งหากไม่มีการส่งคืนข้อมูล หรือส่งแฮชใหม่หากมีการส่งคืนข้อมูลใหม่ เช่น |
โต๊ะ | ไม่ได้ |
ออบเจ็กต์ {cols:[{id:'Col1',label:'',type:'number'}], rows:[{c:[{v:1.0,f:'1'}]}, {c:[{v:2.0,f:'2'}]}, {c:[{v:3.0,f:'3'}]}, {c:[{v:1.0,f:'1'}]} ] } ควรมีพร็อพเพอร์ตี้ ตัวอย่าง: ดูตัวอย่างด้านล่าง |
ไลบรารีตัวช่วยของ Google และคำค้นหาทั้งหมดที่ส่งไปยัง Google จะแสดง JSON/JSONP ที่เข้มงวด
หากคุณไม่ได้แยกวิเคราะห์โค้ดที่แสดงผลด้วยตัวเอง ก็ไม่สำคัญสำหรับคุณ หากใช่ คุณจะใช้ JSON.parse() เพื่อแปลงสตริง JSON เป็นออบเจ็กต์ JavaScript ได้ ความแตกต่างอย่างหนึ่งเกี่ยวกับวิธีที่ API ประมวลผล JSON คือ แม้ว่า JSON จะไม่รองรับค่าวันที่ของ JavaScript (เช่น "new Date(2008,1,28,0,31,26)" แต่ API รองรับการแสดงวันที่ในรูปแบบ JSON ที่ถูกต้องเป็นสตริงในรูปแบบต่อไปนี้ Date(year, month, day[,hour, minute, second[, millisecond]])
ซึ่งทุกอย่างเป็นวันที่ที่ไม่บังคับและเดือนจะอิงกับวันที่ 0
การเพิ่มประสิทธิภาพการตอบกลับ JSON
หากลูกค้าส่งคำขอ 2 รายการและข้อมูลไม่มีการเปลี่ยนแปลงระหว่างคำขอ ก็อาจจะไม่ส่งข้อมูลอีกครั้ง การทำเช่นนั้นจะสิ้นเปลืองแบนด์วิดท์ เพื่อให้คำขอมีประสิทธิภาพมากขึ้น โปรโตคอลรองรับการแคชข้อมูลในไคลเอ็นต์ และการส่งสัญญาณในการตอบสนองหากข้อมูลไม่มีการเปลี่ยนแปลงตั้งแต่คำขอล่าสุด ต่อไปนี้เป็นวิธีดำเนินการ
- ไคลเอ็นต์จะส่งคำขอไปยังแหล่งข้อมูล
- แหล่งข้อมูลจะสร้าง
DataTable
รวมถึงแฮชของออบเจ็กต์DataTable
และแสดงผลทั้ง 2 อย่างในการตอบกลับ (แฮชจะแสดงในพารามิเตอร์tqx.
sig
) ไคลเอ็นต์ Google Visualization API จะแคชค่าDataTable
และsig
- ไคลเอ็นต์จะส่งคำขอข้อมูลอีกครั้ง รวมถึงค่า
tqx.sig
ที่แคชไว้ - แหล่งข้อมูลตอบกลับได้ 2 วิธีดังนี้
- หากข้อมูลมีการเปลี่ยนแปลงจากคำขอก่อนหน้า แหล่งข้อมูลจะส่งแฮชค่า
DataTable
และsig
ใหม่กลับมา - หากข้อมูลไม่มีการเปลี่ยนแปลงจากคำขอก่อนหน้า แหล่งข้อมูลจะส่งกลับ
status=error
,reason=not_modified
,sig=old_sig_value
- หากข้อมูลมีการเปลี่ยนแปลงจากคำขอก่อนหน้า แหล่งข้อมูลจะส่งแฮชค่า
- ในทั้ง 2 กรณี หน้าที่โฮสต์แผนภูมิจะได้รับการตอบกลับที่สำเร็จ และดึงข้อมูล
DataTable
ได้โดยการเรียกใช้QueryResponse.getDataTable()
หากข้อมูลเหมือนกัน ข้อมูลดังกล่าวจะเป็นเพียงตารางที่แคชไว้
โปรดทราบว่าวิธีนี้ใช้ได้กับคำขอ JSON จากแผนภูมิที่สร้างใน Google Visualization API เท่านั้น
รูปแบบการตอบกลับ CSV
หากคำขอระบุ out:csv
การตอบกลับจะไม่มีข้อมูลเมตา แต่จะมีเพียงการแสดงข้อมูล CSV เท่านั้น โดยทั่วไปแล้วตาราง CSV จะเป็นรายการที่คั่นด้วยคอมมา โดยที่ข้อมูลแต่ละแถวจะเป็นรายการค่าที่คั่นด้วยเครื่องหมายจุลภาค และลงท้ายด้วยอักขระขึ้นบรรทัดใหม่ UNIX (\n) ค่าของเซลล์ควรเป็นประเภทเดียวกันสำหรับแต่ละคอลัมน์ แถวแรกคือป้ายกำกับคอลัมน์ ต่อไปนี้คือตัวอย่างของตาราง 3 คอลัมน์ที่มี 3 แถว
A, B, C 1.0, "yes", true 2.0, "no", false 3.0, "maybe", true
โปรโตคอลนี้ไม่ได้ระบุรูปแบบ CSV แหล่งข้อมูลมีหน้าที่กำหนดรูปแบบ CSV อย่างไรก็ตาม รูปแบบทั่วไปคือชุดค่าที่คั่นด้วยคอมมา (ไม่มีการเว้นวรรค) และขึ้นบรรทัดใหม่ (\n) ที่ท้ายแถว เมื่อเบราว์เซอร์ได้รับการตอบกลับสตริง CSV เบราว์เซอร์อาจถามผู้ใช้ว่าจะใช้แอปใดเปิดสตริง หรืออาจแสดงผลออกมาบนหน้าจอ ไลบรารีโอเพนซอร์ส Java และ Python มีวิธีแปลง DataTable เป็นสตริง CSV
หากคำขอมีสมาชิก outFileName
ของพารามิเตอร์ tqx
คุณควรลองรวมชื่อไฟล์ที่ระบุในส่วนหัวการตอบกลับ
ออบเจ็กต์ google.visualization.Query
ไม่รองรับคำขอการตอบกลับ CSV หากลูกค้าต้องการขอ CSV คุณสามารถฝังแกดเจ็ตแถบเครื่องมือการแสดงภาพในหน้าเว็บ หรือสามารถใช้โค้ดที่กำหนดเองเพื่อสร้างคำขอ หรือคุณอาจระบุลิงก์ที่ตั้งค่าพร็อพเพอร์ตี้ out:csv
ของ tqx
อย่างชัดเจน ดังที่ปรากฏใน URL ของคำขอต่อไปนี้
คำขอ
http://www.example.com/mydatasource?tqx=reqId:1;out:csv
การตอบกลับ
Label 1,Label2\n1,a\n2,b\n3,c\n4,d
รูปแบบการตอบสนอง TSV
หากคำขอระบุ out:tsv-excel
การตอบกลับจะไม่มีข้อมูลเมตา แต่เป็นเพียงการนำเสนอข้อมูลที่คั่นด้วยแท็บและเข้ารหัส utf-16 หากคำขอมีสมาชิก outFileName
ของพารามิเตอร์ tqx
คุณควรลองรวมชื่อไฟล์ที่ระบุในส่วนหัวการตอบกลับ
รูปแบบการตอบสนอง HTML
หากคำขอระบุ out:html
การตอบกลับควรเป็นหน้า HTML ที่กำหนดตาราง HTML ที่มีข้อมูล วิธีนี้มีประโยชน์สำหรับการแก้ไขข้อบกพร่องของโค้ด เนื่องจากเบราว์เซอร์แสดงผลลัพธ์ในรูปแบบที่อ่านได้โดยตรง คุณจะส่งการค้นหาสำหรับการตอบกลับ HTML โดยใช้ออบเจ็กต์ google.visualization.Query
ไม่ได้
คุณต้องค้นหาการตอบสนอง HTML โดยใช้โค้ดที่กำหนดเอง หรือพิมพ์ URL ที่คล้ายกับ URL นี้ในเบราว์เซอร์
คำขอ
http://www.example.com/mydatasource?tqx=reqId:1;out:html
การตอบกลับ
<html><body><table border='1' cellpadding='2' cellspacing='0'><tr style='font-weight: bold; background-color: #aaa;'><td>label 1</td><td>label 2</td></tr><tr bgcolor='#f0f0f0'><td align='right'>1</td><td>a</td></tr><tr bgcolor='#ffffff'><td align='right'>2</td><td>b</td></tr><tr bgcolor='#f0f0f0'><td align='right'>3</td><td>c</td></tr><tr bgcolor='#ffffff'><td align='right'>4</td><td>d</td></tr></table></body></html>
ตัวอย่าง
ตัวอย่างคำขอและการตอบกลับมีดังนี้ โปรดทราบว่าคำขอไม่ได้ใช้อักขระหลีกกับ URL ซึ่งมักจะดำเนินการโดยเบราว์เซอร์หรือออบเจ็กต์ google.visualization.Query
คำขอแบบง่าย: แสดงผลข้อมูลพื้นฐานพร้อมคอลัมน์ 3 คอลัมน์ ตาราง 4 แถว
Request: http://www.example.com/mydatasource Response google.visualization.Query.setResponse({version:'0.6',reqId:'0',status:'ok',sig:'5982206968295329967',table:{cols:[{id:'Col1',label:'',type:'number'},{id:'Col2',label:'',type:'number'},{id:'Col3',label:'',type:'number'}],rows:[{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]},{c:[{v:2.0,f:'2'},{v:3.0,f:'3'},{v:4.0,f:'4'}]},{c:[{v:3.0,f:'3'},{v:4.0,f:'4'},{v:5.0,f:'5'}]},{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]}]}});
คำขอแบบง่ายที่มีเครื่องจัดการการตอบกลับ: แสดงผลคอลัมน์ 3 คอลัมน์ ตาราง 3 แถวที่มีประเภทข้อมูลต่างกัน
Request: http://www.example.com/mydatasource?tqx=responseHandler:myHandlerFunction Response myHandlerFunction({version:'0.6',reqId:'0',status:'ok',sig:'4641982796834063168',table:{cols:[{id:'A',label:'NEW A',type:'string'},{id:'B',label:'B-label',type:'number'},{id:'C',label:'C-label',type:'datetime'}],rows:[{c:[{v:'a'},{v:1.0,f:'1'},{v:new Date(2008,1,28,0,31,26),f:'2/28/08 12:31 AM'}]},{c:[{v:'b'},{v:2.0,f:'2'},{v:new Date(2008,2,30,0,31,26),f:'3/30/08 12:31 AM'}]},{c:[{v:'c'},{v:3.0,f:'3'},{v:new Date(2008,3,30,0,31,26),f:'4/30/08 12:31 AM'}]}]}});
การค้นหาด้วยสตริงการค้นหาแบบง่าย: คําขอคอลัมน์เดียวจะแสดงคอลัมน์เดียวที่มี 4 แถว
Request: http://www.example.com/mydatasource?tq=select Col1 Response: google.visualization.Query.setResponse({version:'0.6',reqId:'0',status:'ok',sig:'6099996038638149313',table:{cols:[{id:'Col1',label:'',type:'number'}],rows:[{c:[{v:1.0,f:'1'}]},{c:[{v:2.0,f:'2'}]},{c:[{v:3.0,f:'3'}]},{c:[{v:1.0,f:'1'}]}]}});
ข้อผิดพลาดเนื่องจากข้อมูลไม่ได้แก้ไข: ตัวอย่างของข้อผิดพลาด not_modified
Request: http://www.example.com/mydatasource?tqx=reqId:0;sig:4641982796834063168 Response: google.visualization.Query.setResponse({version:'0.6',reqId:'0',status:'error',errors:[{reason:'not_modified',message:'Data not modified'}]});
คำเตือนที่ตัดข้อมูลให้สั้นลง: ตัวอย่างคำเตือน data_truncated
โปรดสังเกตว่าคำขอยังคงแสดงข้อมูลอยู่
Request: http://www.example.com/mydatasource?tq=limit 1 Response: google.visualization.Query.setResponse({version:'0.6',reqId:'0',status:'warning',warnings:[{reason:'data_truncated',message:'Retrieved data was truncated'}],sig:'1928724788649668508',table:{cols:[{id:'A',label:'NEW A',type:'string'},{id:'B',label:'B-label',type:'number'},{id:'C',label:'C-label',type:'datetime'}],rows:[{c:[{v:'a'},{v:1.0,f:'1'},{v:new Date(2008,1,28,0,31,26),f:'2/28/08 12:31 AM'}]}]}});
ข้อผิดพลาดจากการถูกปฏิเสธการเข้าถึง: ตัวอย่างของข้อผิดพลาด access_denied
Request: http://www.example.com/mydatasource Response: google.visualization.Query.setResponse({version:'0.6',reqId:'0',status:'error',errors:[{reason:'access_denied',message:'Access denied',detailed_message:'Access Denied'}]});
สตริงการค้นหาไม่ถูกต้อง: ตัวอย่างคําขอที่มีสตริงการค้นหาไม่ถูกต้อง โปรดทราบว่าข้อความแบบละเอียดเป็นข้อความทั่วไป ไม่ใช่ข้อความแสดงข้อผิดพลาดจริง
Request: http://www.example.com/mydatasource?tq=select A Response: google.visualization.Query.setResponse({version:'0.6',reqId:'0',status:'error',errors:[{reason:'invalid_query',message:'Invalid query',detailed_message:'Bad query string.'}]});
เครื่องมือสำหรับการพัฒนา
- ไลบรารีแหล่งข้อมูล Java (จาก Google) - จัดการคำขอและการตอบกลับ สร้างตารางการตอบกลับจากข้อมูลที่คุณให้ไว้ และใช้งานภาษาการค้นหา SQL ของเครื่องมือ Google แผนภูมิ
- ไลบรารีแหล่งข้อมูล Python (จาก Google) - สร้างตารางการตอบกลับจะสร้างไวยากรณ์การตอบกลับ ไม่ได้จัดการการแยกวิเคราะห์คำขอหรือการใช้ภาษาการค้นหา SQL ของเครื่องมือ Google แผนภูมิ
- MC-Google_Visualization (บุคคลที่สาม) - นี่คือไลบรารีฝั่งเซิร์ฟเวอร์ของ PHP ที่คุณใช้ เพื่อติดตั้งใช้งานแหล่งข้อมูลเครื่องมือแผนภูมิสำหรับเครื่องมือฐานข้อมูล MySQL, SQLite และ PostgreSQL โดยใช้ PDO ได้
- bortosky-google-visualization (บุคคลที่สาม) - นี่คือไลบรารีตัวช่วยในการสร้างตารางข้อมูล Google Visualization API สำหรับผู้ใช้ .NET
- GV Streamer (บุคคลที่สาม) - GV Streamer เป็นเครื่องมือฝั่งเซิร์ฟเวอร์ที่แปลงข้อมูลจากแหล่งที่มาต่างๆ เป็นการตอบกลับการค้นหาที่ถูกต้องในแผนภูมิ Google GV Streamer รองรับหลายภาษา (เช่น PHP, Java, .NET) และแหล่งข้อมูลดิบหลายรายการ (เช่น MySql)
- TracGViz (บุคคลที่สาม) - TracGViz เป็นเครื่องมือโอเพนซอร์สที่ไม่มีค่าใช้จ่ายซึ่งมีองค์ประกอบเพื่อให้ Trac สามารถใช้แกดเจ็ตแผนภูมิ รวมถึงนำข้อมูลที่จัดการโดย Trac มาใช้เป็นแหล่งข้อมูลของเครื่องมือ Google Chart
- vis-table (บุคคลที่สาม) - ไลบรารีที่ใช้แหล่งข้อมูลเครื่องมือ Google Chart ใน PHP ซึ่งมี 3 ส่วนหลักๆ ด้วยกัน การใช้งานตารางข้อมูล โปรแกรมแยกวิเคราะห์ภาษาของการค้นหา และตัวจัดรูปแบบ
- การใช้งานแหล่งข้อมูลของ Google ใน Oracle PL/SQL (บุคคลที่สาม) - แพ็กเกจ Oracle PL/SQL ที่เปิดใช้แหล่งข้อมูลของ Oracle ไปยังเซิร์ฟเวอร์ โดยตรงจากฐานข้อมูล โดยพื้นฐานแล้ว คุณก็ใช้คำค้นหา Oracle เป็นแหล่งข้อมูลเครื่องมือของ Google Chart (แพ็กเกจจะแสดงไฟล์ JSON พร้อมข้อมูล) รองรับภาษา Google Query ได้เกือบสมบูรณ์แล้ว