Google Sheets

วิธีสร้าง Interactive Charts บนเว็บไซต์ด้วย Google Sheets

บทความนี้แอดมาสอนสร้าง interactive charts ง่ายๆด้วย Google Sheets สามารถนำไปใช้บน blog หรือ embed บนเว็บไซต์ของ WordPress ได้เลยโดยไม่ต้องใช้ plugin (สะดวกมาก!) ด้านล่างคือตัวอย่าง stacked bar chart ที่สร้างด้วย Google Sheets ภายในเวลาไม่ถึงนาที

ข้อดีของ interactive charts คือ users สามารถใช้เม้าส์เลือกดู label/ score ที่ต้องการ เพิ่มความน่าสนใจให้กับการนำเสนอข้อมูลบนเว็บไซต์ของเรา ต่อไปแอดน่าจะได้ใช้ฟีเจอร์นี้บ่อยเลย 😛

How to Create Charts

เปิด Google Sheets ขึ้นมา ลองใส่ข้อมูล dummy ซักสองสามคอลัมน์ กดปุ่ม CTRL+A เพื่อเลือกข้อมูลทั้งหมดแล้วคลิก Insert > Chart เสร็จแล้ว Sheets จะเลือกชาร์ทที่ดีที่สุดกับประเภทข้อมูลแบบอัตโนมัติ

เราสามารถเปลี่ยนประเภทชาร์ทได้ง่ายๆ แค่คลิกที่ปุ่ม options ด้านขวาบนของชาร์ทนั้นๆ แล้วคลิก Edit chart หรือถ้าต้องการ Publish ขึ้นเว็บไซต์เลยให้เลือก Publish chart > Embed > Publish เพื่อรับโค้ด iframe (HTML) ไปใช้บนเว็บไซต์ที่เราต้องการ

ด้านล่างคือตัวอย่างโค้ด iframe ของ interactive chart ในบทความนี้

.ugb-d4897ce li{–icon-size:20px;margin-bottom:16px !important}.ugb-d4897ce li::before{height:20px !important;width:20px !important;background-image:url(‘data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkwIDE5MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTczLjggMjguNEw2MC40IDE0MS44IDE1LjcgOTcuMiA1LjEgMTA3LjggNjAuNCAxNjNsMTI0LTEyNC0xMC42LTEwLjZ6Ij48L3BhdGg+PC9zdmc+’)}.ugb-d4897ce li ul{margin-bottom:16px !important}.ugb-d4897ce.ugb-icon-list ul{columns:1}
  • เราสามารถปรับขนาดของชาร์ทได้ที่ width และ height attribute
  • ถ้าใครสร้างเว็บไซต์ด้วย WordPress ให้ใช้ custom HTML block เพื่อ embed โค้ด iframe ได้เลย
<iframe width="754.5" height="466.5325" seamless="" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSIslgoebRJlU2Z9K5_dv2GUn6NtWhPTJqZxFGVSa5tv_igCb-mSKKvp0GfFD-SXh3j9nahsuynLcbg/pubchart?oid=127182445&format=interactive"></iframe>

Available Charts

Google Sheets สามารถสร้างชาร์ทได้หลายรูปแบบ ทั้งแบบพื้นฐาน bar, pie, scatter, line หรือรูปแบบพิเศษ เช่น waterfall, treemap, gauges และ radar ดูรายละเอียดชาร์ททั้งหมดได้ที่นี่

Download Charts

Google Sheets มี option ให้เราดาวน์โหลดชาร์ทออกมาเป็นไฟล์ PNG, PDF หรือ SVG (Scalable Vector Graphics) รูปภาพความละเอียดสูงเพื่อใช้ในโปรแกรมอื่นๆ เช่น Google Slides หรือ MS PowerPoint

🚀 Always Explore!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.