คู่มือการใช้งานระบบบริการแสดงกราฟจากข้อมูล

ระบบบริการแสดงกราฟจากข้อมูล (Chart-io) เป็นบริการที่สร้างบนเว็บที่สร้างภาพแผนภูมิได้ทันที รูปภาพเหล่านี้เหมาะสำหรับการฝังในเอกสาร, อีเมล, และรูปแบบอื่นๆ แผนภูมิถูกเรนเดอร์โดยระบบ ซึ่งเป็นไลบรารีการสร้างแผนภูมิที่สำนักงานสถิติแห่งชาติได้จัดทำขึ้น

เริ่มต้นใช้งาน
Chart-io ทำงานโดยใช้การกำหนดค่า Chart.js และแสดงผลเป็นรูปภาพ คุณสามารถส่งการกำหนดค่าแผนภูมิของคุณในรูปแบบ JSON หรือ Javascript โดยใช้ URL หรือผ่านคำขอ POST

ตัวอย่างเช่น ใช้การกำหนดค่า Chart แบบง่ายๆ นี้: 

                                        
{
  "type": "bar", // แสดงผลแบบ Bar
  "data": {
    "labels": ["2020", "2021", "2022", "2023", "2024"], // ตั้งค่าข้อความแกน X
    "datasets": [
      {
        "label": "ผู้ใช้งาน", // ตั้งชื่อ dataset เป็น ‘ผู้ใช้งาน’
        "data": [24, 75, 36, 9, 14] // เพิ่มข้อมูลบนแผนภูมิ
      }
    ]
  }
}

การเรียกใช้ API
การใช้ API รองรับทั้งวิธี GET และ POST พารามิเตอร์เหล่านี้ให้การควบคุมขนาด ความละเอียด พื้นหลัง ของแผนภูมิ:

ข้อมูล: เรียนรู้เพิ่มเติมเกี่ยวกับพารามิเตอร์ API และ POST endpoint
ตัวแปร (Parameter) รูปแบบ (Type) คำอธิบาย (description)
chart string ชุดคำสั่งที่ใช้สำหรับแสดงผล ให้เป็นแผนภูมิจะอยู่ในรูปแบบของ Javascript หรือ JSON
width integer ความกว้างของรูป (pixels) ค่าตั้งต้น 500
height integer ความสูงของรูป (pixels) ค่าตั้งต้น 300
backgroundColor string หน่วยเป็น RGB, HEX, HSL, หรือชื่อของสีโดยมีค่าตั้งต้นเป็นไม่มีสี
format string png, webp, svg, หรือ pdf. โดยมีค่าตั้งต้นเป็น png
encoding string url หรือ base64. โดยมีค่าตั้งต้นเป็นurl

ลงทะเบียนเพื่อใช้งาน API เมื่อเข้าใช้งานครั้งแรกต้องทำการลงทะเบียนที่เมนู “ลงทะเบียน”

ระบุข้อมูลส่วนตัวของผู้ใช้ใหม่สำหรับการลงทะเบียนเพื่อขอใช้งาน

ข้อมูลลงทะเบียน

อีเมล
ของผู้ใช้งานเพื่อให้ระบบตอบกลับการแจ้งสิทธิการใช้งานผ่านอีเมลตามที่ได้ระบุไว้
ชื่อ (ภาษาไทย)
ชื่อจริงภาษาไทยโดยไม่ต้องใส่คำนำหน้า
นามสกุล (ภาษาไทย)
นามสกุลภาษาไทย
ชื่อ (ภาษาอังกฤษ)
ชื่อจริงภาษาอังกฤษโดยไม่ต้องใส่คำนำหน้า
นามสกุล (ภาษาอังกฤษ)
นามสกุลภาษาอังกฤษ
เบอร์โทรศัพท์
เบอร์โทรศัพท์ 9-10 หลักโดยไม่ต้องเว้นวรรค เพียง 1 เลขหมาย
กระทรวง
เลือกกระทรวงที่สังกัด
หน่วยงาน
เลือกหน่วยงานที่สังกัด

เมื่อระบุข้อมูลครบถ้วนและกดปุ่มลงทะเบียน คุณจะได้รับข้อความ “โปรดรอการอนุมัติการใช้งานระบบจากอีเมลที่แจ้งกลับซึ่งจะดำเนินการภายใน 5 วันทำการ” ดังรูป

ข้อมูลลงทะเบียนของคุณจะถูกตรวจสอบ หากได้รับอนุมัติ โปรดตรวจสอบอีเมลของคุณ เพื่อรับโทเคนจากที่ระบบส่งให้ สำหรับประกอบการใช้งาน ผ่าน API

3.1 วิธีส่งข้อมูลพารามิเตอร์ต่อท้าย URL ด้วยคำสั่ง GET

การกำหนดค่าพารามิเตอร์ท้าย URL http://chart-io.nso.go.th/api/v1/chart(endpoint)
เพื่อใช้สร้างแผนภูมิ โดยระบบจะรับค่าพารามิเตอร์เป็น URL
http://chart-io.nso.go.th:8007/api/v1/chart
รวมกับพารามิเตอร์อื่นๆ ได้แก่ โทเคน และ ชุดคำสั่งสตริงสำหรับสร้างแผนภูมิ ตัวอย่างเช่น:

ระบุโทเคนที่คุณได้รับผ่านอีเมล เช่น
http:/chart-io.nso.go.th/api/v1/chart?token=...&config={...}
ชุดคำสั่งสตริงสำหรับสร้างแผนภูมิ

หากคุณไม่ต้องการสร้าง URL ด้วยตัวเองระบบจะมีให้บริการ API ในการสร้าง URL ให้คุณ ภาษาการเขียนโปรแกรมหลายภาษา
พารามิเตอร์แผนภูมิที่รองรับ

  • ประเภท: Javascript หรือ JSON
  • จำเป็นต้องใส่ทุกครั้ง
  • ชื่อพารามิเตอร์: chart หรือ c

หากคุณกำลังส่งคำขอแบบ GET เราขอแนะนำให้คุณ เข้ารหัส เข้ารหัส URL หรือใช้ระบบของเราในการแปลงเป็น URL เท่านั้น
มิฉะนั้นคุณจะประสบปัญหาเกี่ยวกับอักขระพิเศษหรือข้อผิดพลาดทางไวยากรณ์ในโปรแกรมของคุณ

การใช้งาน backgroundColor

  • ประเภท: สตริง
  • รหัสสีที่รับได้: rgb, hex, hsl
  • ค่า Default: ไม่มีสี
  • ชื่อพารามิเตอร์: backgroundColor หรือ bkg

พื้นหลังของแผนภูมิ ใช้รูปแบบรหัสสี เช่น

  • RGB ให้ใส่รหัสสี เช่น rgb(255, 150, 0)
  • สีพื้นฐาน ให้ใส่คำ เช่น red
  • ค่าเลขฐานสิบหกที่เข้ารหัส URL ให้ใส่รหัสสี เช่น %23FF9600 (คือ #FF9600 ที่เข้ารหัสแล้ว)

ตัวอย่างการเรียกใช้ GET
เข้าใช้งานผ่าน http://chart-io.nso.go.th/api/v1/#/default/get_chart

ที่ GET /chart ให้กดปุ่ม [Try it out] เพื่อระบุ token และ Config โดยระบุโทเคนที่คุณได้รับผ่านอีเมล

ตัวอย่างชุดคำสั่งสตริงที่ใช้สำหรับสร้างแผนภูมิ

                                        
    {
      "type": "bar",
      "data": {
        "labels": [
          "มกราคม",
          "กุมภาพันธ์",
          "มีนาคม",
          "เมษายน",
          "พฤษภาคม",
          "มิถุนายน",
          "กรกฎาคม"
        ],
        "datasets": [
          {
            "label": "ข้อมูลชุดแรก",
            "backgroundColor": "rgba(255, 99, 132, 0.5)",
            "borderColor": "rgb(255, 99, 132)",
            "borderWidth": 1,
            "data": [
              -31,
              -70,
              -30,
              -33,
              -9,
              14,
              -41
            ]
          },
          {
            "label": "ข้อมูลชุดที่สอง",
            "backgroundColor": "rgba(54, 162, 235, 0.5)",
            "borderColor": "rgb(54, 162, 235)",
            "borderWidth": 1,
            "data": [
              73,
              41,
              29,
              61,
              -65,
              59,
              38
            ]
          }
        ]
      },
      "options": {
        "plugins": {
          "title": {
            "display": "true",
            "text": "Bar Chart"
          },
          "datalabels": {
            "anchor": "start",
            "align": "start",
            "color": "#666",
            "font": {
              "weight": "normal"
            }
          }
        }
      }
    }

คัดลอกชุดคำสั่งสตริงที่ใช้สำหรับสร้างแผนภูมิลงในช่องนี้

เมื่อระบุครบทั้ง 2 ช่องแล้วให้กดปุ่ม [Execute] หากข้อมูล โทเคนและชุดคำสั่งสตริงที่ระบุก่อนหน้าถูกต้องระบบจะตอบกลับ ดังนี้

Curl

Request URL
- สำหรับ GET แผนภูมิผ่าน URL คุณสามารถคัดลอกไปใช้งานได้ทันที

Server Response

Response headers

3.2 วิธีส่งข้อมูลพารามิเตอร์ต่อท้าย URL ด้วยคำสั่ง POST

หากแผนภูมิของคุณมีขนาดใหญ่หรือซับซ้อน คุณอาจต้องการส่งคำขอ POST แทนที่จะส่งคำขอ GET
ซึ่งจะช่วยหลีกเลี่ยงการจำกัดความยาว URL และหมายความว่าคุณไม่ต้องกังวลเกี่ยวกับการเข้ารหัส URL
ที่พารามิเตอร์ท้ายของ URL ยาวเกินไปด้วยคำสั่ง POST /chart ดังนี้

ตัวอย่างการเรียกใช้ POST
เข้าใช้งานผ่าน http:/chart-io.nso.go.th/api/v1/#/default/get_chart

ที่ POST /chart ให้กดปุ่ม [Try it out] เพื่อระบุ token และ Value โดยระบุโทเคนที่คุณได้รับผ่านอีเมล

ตัวอย่างชุดคำสั่งสตริงที่ใช้สำหรับสร้างแผนภูมิ

                                        
    {
  "type": "bar",
  "data": {
    "labels": [
      "มกราคม",
      "กุมภาพันธ์",
      "มีนาคม",
      "เมษายน",
      "พฤษภาคม",
      "มิถุนายน",
      "กรกฎาคม"
    ],
    "datasets": [
      {
        "label": "ข้อมูลชุดแรก",
        "backgroundColor": "rgba(255, 99, 132, 0.5)",
        "borderColor": "rgb(255, 99, 132)",
        "borderWidth": 1,
        "data": [
          -31,
          -70,
          -30,
          -33,
          -9,
          14,
          -41
        ]
      },
      {
        "label": "ข้อมูลชุดที่สอง",
        "backgroundColor": "rgba(54, 162, 235, 0.5)",
        "borderColor": "rgb(54, 162, 235)",
        "borderWidth": 1,
        "data": [
          73,
          41,
          29,
          61,
          -65,
          59,
          38
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Bar Chart"
      },
      "datalabels": {
        "anchor": "start",
        "align": "start",
        "color": "#666",
        "font": {
          "weight": "normal"
        }
      }
    }
  }
}

คัดลอกชุดคำสั่งสตริงที่ใช้สำหรับสร้างแผนภูมิลงในช่องนี้

เมื่อระบุครบทั้ง 2 ช่องแล้วให้กดปุ่ม [Execute] หากข้อมูล โทเคนและชุดคำสั่งสตริงที่ระบุก่อนหน้าถูกต้องระบบจะตอบกลับ ดังนี้

Curl

Request URL

Server Response

Response headers

สำหรับตัวอย่างแผนภูมิที่มีให้บริการ สามารถดูได้ที่ chart gallery
การเปลี่ยนประเภทของแผนภูมิสามารถทำได้ไม่ยาก เช่น เมื่อเปลี่ยน type: bar เป็นtype: line
เราจะสามารถสร้างแผนภูมิแบบเส้นด้วยข้อมูลเดียวกันได้ทันที: แผนภูมิแบบพื้นฐาน

4.1 Bar
ดูเอกสารประกอบแผนภูมิ Bar 

                                            
{
  "type": "bar",
  "data": {
    "labels": ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม"],
    "datasets": [
      {
        "label": "ข้อมูลชุดแรก",
        "data": [-31, -70, -30, -33, -9, 14, -41]
      },
      {
        "label": "ข้อมูลชุดที่สอง",
        "data": [73, 41, 29, 61, -65, 59, 38]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Bar Chart"
      }
    }
  }
}

4.2 Line
ดูเอกสารประกอบแผนภูมิ Line 

                                            
{
  "type": "line",
  "data": {
    "labels": ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม"],
    "datasets": [
      {
        "label": "ข้อมูลชุดแรก",
        "data": [-31, -70, -30, -33, -9, 14, -41]
      },
      {
        "label": "ข้อมูลชุดที่สอง",
        "data": [73, 41, 29, 61, -65, 59, 38]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Line Chart"
      }
    }
  }
}

4.3 Pie
ดูเอกสารประกอบแผนภูมิ Pie 

                                            
{
  "type": "pie",
  "data": {
    "labels": [ "แดง", "ส้ม", "เหลือง", "เขียว", "ฟ้า" ],
    "datasets": [
      {
        "data": [ 84, 28, 57, 19, 97 ],
        "label": "ข้อมูลชุดที่ 1"
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Pie Chart"
      },
      "datalabels": { }
    }
  }
}

4.4 Doughnut
ดูเอกสารประกอบแผนภูมิ Doughnut 

                                            
{
  "type": "doughnut",
  "data": {
    "labels": [ "แดง", "ส้ม", "เหลือง", "เขียว", "ฟ้า" ],
    "datasets": [
      {
        "data": [ 84, 28, 57, 19, 97 ],
        "label": "ข้อมูลชุดที่ 1"
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Doughnut Chart"
      },
      "datalabels": { }
    }
  }
}

4.5 Polar
ดูเอกสารประกอบแผนภูมิ Polar 

                                            
{
  "type": "polarArea",
  "data": {
    "labels": [
      "แดง", "ส้ม", "เหลือง", "เขียว", "ฟ้า"
    ],
    "datasets": [
      {
        "data": [ 84, 28, 57, 19, 97 ],
        "label": "ข้อมูลชุดที่ 1"
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "PolarArea Chart"
      },
      "datalabels": {}
    }
  }
}

4.6 Scatter
ดูเอกสารประกอบแผนภูมิ Scatter 

                                            
{
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "ข้อมูลชุดที่ 1",
        "data": [
          {"x": -49, "y": 40},
          {"x": -59, "y": -67},
          {"x": -92, "y": -50},
          {"x": -21, "y": -39},
          {"x": -79, "y": 56},
          {"x": -25, "y": 81}
        ]
      },
      {
        "label": "ข้อมูลชุดที่ 2",
        "data": [
          {"x": -88, "y": -59},
          {"x": 17, "y": 99},
          {"x": -84, "y": 12},
          {"x": -76, "y": 91},
          {"x": -98, "y": 71},
          {"x": -51, "y": -31}
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": true,
        "text": "Scatter Chart"
      }
    }
  }
}

4.7 Bubble
ดูเอกสารประกอบแผนภูมิ Bubble 

                                            
{
  "type": "bubble",
  "data": {
    "datasets": [
      {
        "label": "ข้อมูลชุดที่ 1",
        "data": [
          { "x": 62, "y": 94, "r": 9.8 },
          { "x": -62, "y": -34, "r": 7.4 },
          { "x": 8, "y": 60, "r": 1.8 },
          { "x": -44, "y": 59, "r": 9.4 },
          { "x": 64, "y": 46, "r": 6.8 },
          { "x": 95, "y": -80, "r": 1.8 }
        ]
      },
      {
        "label": "ข้อมูลชุดที่ 2",
        "data": [
          { "x": -15, "y": -28, "r": 14.8 },
          { "x": -31, "y": -53, "r": 11 },
          { "x": -70, "y": -74, "r": 14 },
          { "x": -82, "y": 34, "r": 13.6 },
          { "x": -89, "y": -71, "r": 16.8 },
          { "x": 15, "y": -38, "r": 0.2 }
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": true,
        "text": "Bubble Chart"
      }
    }
  }
}

4.8 Radar
ดูเอกสารประกอบแผนภูมิ Radar 

                                            
{
  "type": "radar",
  "data": {
    "labels": [
      "กิน", "ดื่ม", "นอน", "ออกแบบ", "เขียนโค้ด", "ปั่นจักรยาน", "วิ่ง"
    ],
    "datasets": [
      {
        "label": "ข้อมูลชุดที่ 1",
        "data": [65, 59, 90, 81, 56, 55, 40]
      },
      {
        "label": "ข้อมูลชุดที่ 2",
        "data": [28, 48, 40, 19, 96, 27, 100]
      }
    ]
  },
  "options": {
    "elements": {
      "line": {
        "borderWidth": 3
      }
    },
    "plugins": {
      "title": {
        "display": "true",
        "text": "Radar Chart"
      }
    }
  }
}

4.9 Mixed Chart
เป็นการรวมแผนภูมิเข้าด้วยกัน โดยระบุหลาย Type 

                                            
{
  "type": "bar",
  "data": {
    "labels": [ "มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม" ],
    "datasets": [
      { "label": "หมา", "data": [ 50, 60, 70, 180, 190 ] },
      { "label": "แมว", "data": [ 100, 200, 300, 400, 500 ] },
      { "type": "line", "fill": "false", "label": "มันฝรั่ง", "data": [ 100, 400, 200, 400, 700 ] }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Mixed Chart"
      }
    }
  }
}

4.10 Box & Violin
เป็นการรวมแผนภูมิเข้า Box & Violin 

                                            
{
  "type": "violin",
  "data": {
    "labels": [ 2012, 2013, 2014, 2015 ],
    "datasets": [
      {
        "label": "ชุดข้อมูล",
        "data": [
          [ 12, 6, 3, 4 ],
          [ 1, 8, 8, 15 ],
          [ 1, 1, 1, 2, 3, 5, 9, 8 ],
          [ 19, -3, 18, 8, 5, 9, 9 ]
        ]
      }
    ]
  },
  "options": {
    "elements": {
      "line": { "borderWidth": 3 }
    },
    "plugins": {
      "title": {
        "display": "true",
        "text": "Box & Violin Chart"
      }
    }
  }
}

4.11 Progress Bar
เป็นแผนภูมิแท่งแบบพิเศษ ชุดข้อมูลระบุหมายเลขที่แสดงผล ตัวเลขนี้คือเปอร์เซ็นต์รวมคือ 100
หากข้อมูลของยังไม่เต็ม 100 สามารถเพิ่มชุดข้อมูลชุดที่สองเพื่อรวมผลได้ 

                                            
{
  "type": "progressbar",
  "data": {
    "datasets": [
      {
        "data": [80],
        "backgroundColor": ["rgba(51, 205, 101, 0.7)"],
        "borderColor": ["rgba(51, 147, 255, 1)"]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Progress Bar"
      }
    }
  }
}

4.12 Sparkline
เส้นแผนภูมิที่มีลักษณะคล้ายประกายไฟ เป็นแผนภูมิเชิงเส้นแบบพิเศษ 

                                            
{
  "type": "sparkline",
  "data": {
    "datasets": [
      {
        "data": [ 140, 60, 274, 370, 199, 250, 150, 160, 70 ]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Sparkline Chart"
      }
    }
  }
}

4.13 Radial gauge 

                                            
{
  "type": "radialgauge",
  "data": {
    "datasets": [
      {
        "data": [80],
        "backgroundColor": ["rgba(51, 51, 255, 1)"],
        "borderColor": ["rgba(51, 147, 255, 1)"]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Radial gauge"
      }
    }
  }
}

4.14 QR Code 

                                            
{
  "type": "qr",
  "data": "https://www.nso.go.th/"
}

4.15 Wordcloud
เส้นแผนภูมิที่มีลักษณะคล้ายประกายไฟ เป็นแผนภูมิเชิงเส้นแบบพิเศษ 

                                            
{
  "type": "wordcloud",
  "data": {
    "color": "#E9590C",
    "datasets": [
      { "key": "word", "value": 10 },
      { "key": "cloud", "value": 8 },
      { "key": "sprite", "value": 7 },
      { "key": "placed", "value": 5 },
      { "key": "layout", "value": 4 },
      { "key": "algorithm", "value": 4 },
      { "key": "area", "value": 3 },
      { "key": "step", "value": 3 },
      { "key": "retrieve", "value": 3 },
      { "key": "operation", "value": 3 },
      { "key": "collision", "value": 3 },
      { "key": "candidate", "value": 3 },
      { "key": "32", "value": 2 },
      { "key": "placement", "value": 2 },
      { "key": "time", "value": 2 },
      { "key": "possible", "value": 2 },
      { "key": "even", "value": 2 },
      { "key": "simple", "value": 2 },
      { "key": "starting", "value": 2 },
      { "key": "previously", "value": 2 },
      { "key": "move", "value": 2 },
      { "key": "perform", "value": 2 },
      { "key": "hierarchical", "value": 2 },
      { "key": "draw", "value": 2 },
      { "key": "pixel", "value": 2 },
      { "key": "data", "value": 2 },
      { "key": "separately", "value": 2 },
      { "key": "expensive", "value": 2 },
      { "key": "pixels", "value": 2 },
      { "key": "masks", "value": 2 },
      { "key": "implementation", "value": 2 },
      { "key": "detection", "value": 2 },
      { "key": "larger", "value": 2 },
      { "key": "whole", "value": 2 },
      { "key": "comparing", "value": 2 },
      { "key": "box", "value": 2 },
      { "key": "large", "value": 2 },
      { "key": "think", "value": 2 },
      { "key": "version", "value": 2 },
      { "key": "single", "value": 2 }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": "true",
        "text": "Word Clouds"
      }
    }
  }
}