Visualizing data โดยใช้ charts, maps, tables คือหนทางที่ทำให้เราสามารถทำความเข้าใจภาพรวมของข้อมูลเบื้องต้นได้แบบเร็วๆ ซึ่งก่อนหน้านี้เวลาออกแบบข้อมูลบางอย่างแล้วจะเอามาแสดงเป็น charts สวยงาม คนใช้ MongoDB แบบผมก็พบว่าข้อมูลเรามีอยู่น่ะมันเป็น JSON Document ซึ่งเครื่องมือต่างๆ ก็มักไม่ค่อยรัก JSON สักเท่าไหร่ ทำให้เราจำเป็นต้องแปลงข้อมูลเหล่านั้นให้เป็นข้อมูลแบบตารางความสัมพันธ์ซะก่อน ถึงจะนำไปไปใช้แสดงลงใน chart ได้
แต่พอมาเจอ MongoDB Charts ผมก็พบว่ามันสามารถต่อตรงเข้ากับ Data Source บน Atlas ที่ผมใช้อยู่แล้วได้เลย และแทบไม่ต้องการการแปลงข้อมูลให้อยู่ในรูปตารางความสัมพันธ์ก่อนนำมาใช้งานอีกด้วย
ตั้งใจว่าจะแนะนำ MongoDB Charts มานานแล้ว แต่ติดตรงที่มันยังไม่สามารถ embed บนเว็บได้นี่แหละ แต่หลังจากงาน MongoDB World 2019 ที่ผ่านมาไม่นานนี้ได้เปิดตัวฟีเจอร์หลายอย่างที่น่าสนใจ ซึ่งหนึ่งในนั้นคือสิ่งที่ผมคอยติดตามาตลอดก็คือการที่เราสามารถ Embed MongoDB Charts ลงในเว็บของเราเองได้สักที ซึ่งก่อนหน้านี้ทำไม่ได้
MongoDB Charts ทำอะไรได้บ้าง
ก่อนหน้านี้
- นำข้อมูลใน Atlas มาแสดงเป็น chart type ต่างๆ ให้เราได้เลยแบบง่ายๆ ได้แก่ bar, line, scatter, heatmaps, tables, number โดยเราไม่ต้องเขียนโค้ดเลยสักตัว แต่ผู้ใช้ยังต้องมีความรู้เกี่ยวกับ concept ของ MongoDB Query อยู่บ้าง
- support MongoDB document model, nested documents และ array ก็คือไม่ต้องแปลงก่อน เลือก field แล้วนำมาใช้ได้เลย ซึ่งเครื่องมือบางตัวเราจำเป็นต้อง extract หรือทำตัว mappter ออกมาก่อนจึงจะนำข้อมูลมาใช้งานต่อได้
- สร้าง dashboard เพียงลากวาง ย่อ/ขยาย จัดตำแหน่งได้ค่อนข้างอิสระ และออโต้อัพเดท Dashboard ตามข้อมูลที่เปลี่ยนไปในฐานข้อมูลได้ถี่ที่สุดที่ทุกๆ 1 นาที
- share dashbaord ให้คนในทีมดูได้
ตอนนี้
- Embed chart (แปะ) ลงในเว็บของเราเองได้แล้ว !
- Visualize Geospatial data ลงใน map chart ได้
- pre-process data โดยใช้ aggregation pipeline ได้
ลอง Embed Chart
ผมดึงข้อมูลพยากรณ์อากาศจาก Dark Sky มา จากนั้นเอาไปเก็บไว้บน MongoDB Atlas ผ่าน MongoDB Stitch ซึ่งโค้ดฝั่ง Stitch service ก็ตรงไปตรงมาแค่นี้
exports = function(payload, response) {
const body = EJSON.parse(payload.body.text());
const result = context.services.get('mongodb-atlas').db('db-name').collection('collection-name').insertOne(body);
return result;
};จากนั้นย้ายข้อมูลไปเก็บไว้ที่ Stitch Service
curl \
-H "Content-Type: application/json" \
-d 'ข้อมูล' \
https://webhooks.mongodb-stitch.com/api/client/v2.0/app/<app-name>/service/<service-name>/incoming_webhook/setWeatherเวลาทำจริงเราไม่ต้องใช้ Stitch ก็ได้ เราต้องการแค่ MongoDB Atlas เท่านั้นในการสร้าง Chart ด้วย MongoDB Charts
จากนั้นก็ไปสร้าง Chart ได้เลย โดยขั้นตอนก็คล้ายกับเครื่องมือทำ chart ทั่วไปคือเริ่มจากการสร้าง DataSource ก่อนโดยเราแค่เลือก collection ที่ต้องการนำมาสร้าง chart ก็เสร็จแล้ว จากนั้นเข้าไปที่เมนู Dashboard และเริ่มสร้าง Chart ลงไปใน Dashboard ตามต้องการ
หลังจากเราเลือก DataSource แล้ว เราสามารถนำ attribute ต่างๆ ที่ MongoDB Charts ตรวจเจอใน document มาใช้งานได้ง่ายๆ แค่ลากมาวางไว้ที่แกน X, แกน Y ได้ดังรูปต่อไปนี้
เท่านี้เราก็พร้อมเอา chart มา embed ไว้ที่เว็บเราแล้ว
