WTC Chart Generator

🚀 Quick Start

WTC Chart Generator รองรับการสร้าง Chart ผ่าน URL สำหรับการใช้งานกับ GlideApps, Web Embed, หรือการ export รูปภาพ

URL Parameters

• c (required): Base64 encoded, URL-encoded JSON, or raw JSON chart configuration (auto-detected)
• engine (optional): echarts (default) หรือ chartjs
• w (optional): Width in pixels (default: 800)
• h (optional): Height in pixels (default: 600)
• dpr (optional): Device pixel ratio (default: 1)
• bg (optional): Background color (default: #ffffff)
• format (optional): Output format for export endpoint (png, jpeg, svg) (default: png)

Examples

Interactive View (iframe):

https://wtc-fe-chart-generator.pages.dev/view/radar?c=ENCODED_CONFIG

Export as PNG:

https://wtc-fe-chart-generator.pages.dev/export/radar.png?c=ENCODED_CONFIG&w=800&h=600&dpr=2

Configuration Format

The c parameter accepts three formats:

Base64 Encoding (Recommended):

const config = { type: 'radar', option: {} }
const encoded = btoa(JSON.stringify(config))
// URL: ?c=eyJ0eXBlIjoicmFkYXIiLCJvcHRpb24iOnt9fQ==

URL-Encoded JSON:

const config = { type: 'radar', option: {} }
const encoded = encodeURIComponent(JSON.stringify(config))
// URL: ?c=%7B%22type%22%3A%22radar%22%2C%22option%22%3A%7B%7D%7D

Raw JSON (Simple for Development):

// Direct JSON in URL (auto-detected)
// URL: ?c={"type":"radar","option":{}}

Auto-detection order: raw JSON → URL-decoded JSON → Base64

📊 Chart Types

{
  "type": "radar",
  "option": {
    "radar": {
      "indicator": [
        {
          "name": "ความเป็นผู้นำ",
          "max": 100
        },
        {
          "name": "ความสร้างสรรค์",
          "max": 100
        },
        {
          "name": "การสื่อสาร",
          "max": 100
        },
        {
          "name": "การทำงานเป็นทีม",
          "max": 100
        },
        {
          "name": "การจัดการเวลา",
          "max": 100
        }
      ]
    },
    "series": [
      {
        "type": "radar",
        "data": [
          {
            "value": [
              90,
              85,
              95,
              80,
              88
            ],
            "name": "ผลการประเมิน"
          }
        ]
      }
    ]
  }
}

{
  "type": "bar",
  "option": {
    "xAxis": {
      "type": "category",
      "data": [
        "ม.ค.",
        "ก.พ.",
        "พ.ค.",
        "มี.ค.",
        "พ.ย.",
        "มิ.ย."
      ]
    },
    "yAxis": {
      "type": "value"
    },
    "series": [
      {
        "type": "bar",
        "data": [
          120,
          200,
          150,
          80,
          70,
          110
        ]
      }
    ]
  }
}

{
  "type": "line",
  "option": {
    "xAxis": {
      "type": "category",
      "data": [
        "ม.ค.",
        "ก.พ.",
        "พ.ค.",
        "มี.ค.",
        "พ.ย.",
        "มิ.ย."
      ]
    },
    "yAxis": {
      "type": "value"
    },
    "series": [
      {
        "type": "line",
        "data": [
          120,
          200,
          150,
          80,
          70,
          110
        ],
        "smooth": true
      }
    ]
  }
}

{
  "type": "pie",
  "option": {
    "series": [
      {
        "type": "pie",
        "data": [
          {
            "value": 1048,
            "name": "Search Engine"
          },
          {
            "value": 735,
            "name": "Direct"
          },
          {
            "value": 580,
            "name": "Email"
          },
          {
            "value": 484,
            "name": "Union Ads"
          }
        ]
      }
    ]
  }
}

{
  "type": "scatter",
  "option": {
    "xAxis": {
      "type": "value"
    },
    "yAxis": {
      "type": "value"
    },
    "series": [
      {
        "type": "scatter",
        "symbolSize": 10,
        "data": [
          [
            9.145898267925412,
            28.064905795301932
          ],
          [
            61.85709852956214,
            15.786283584137994
          ],
          [
            8.638603681827906,
            30.990860777830807
          ],
          [
            37.787372803699206,
            98.91614221997558
          ],
          [
            68.9298006757057,
            15.582020833596033
          ],
          [
            25.599721309694424,
            42.60767065868942
          ],
          [
            90.7123235298674,
            95.09161405711927
          ],
          [
            67.8432017969132,
            48.7264974031777
          ],
          [
            56.12549360814548,
            8.964978794036249
          ],
          [
            69.40392890058587,
            78.45942546830959
          ],
          [
            48.19380684946154,
            5.206002567134094
          ],
          [
            10.6969139025893,
            15.317497462478002
          ],
          [
            24.404894223217568,
            65.59703508386566
          ],
          [
            6.528867551698614,
            54.212458749338765
          ],
          [
            33.179540497709105,
            18.490520082434216
          ],
          [
            51.785318493118524,
            7.971985814773552
          ],
          [
            93.77862623794542,
            9.33440720281623
          ],
          [
            50.22797285918893,
            57.52183344973337
          ],
          [
            32.34792090445055,
            77.7258730583592
          ],
          [
            73.54590671807966,
            15.470872620962528
          ],
          [
            35.86290951076329,
            31.23343348510086
          ],
          [
            18.199196340333135,
            67.36288700526221
          ],
          [
            24.759481948323923,
            54.37206685196833
          ],
          [
            31.058043376830426,
            8.426825131287941
          ],
          [
            28.479464374274187,
            99.83303627232084
          ],
          [
            9.00817302579322,
            90.71806117561707
          ],
          [
            74.20471458886803,
            31.348507554974315
          ],
          [
            94.51448861196432,
            48.50374294403746
          ],
          [
            61.72743029646863,
            99.02021172314832
          ],
          [
            15.438504762471384,
            81.63361674729984
          ],
          [
            30.53321706875167,
            75.13982018378435
          ],
          [
            55.430166961365636,
            75.83259989192578
          ],
          [
            80.04897110202226,
            58.33074444984885
          ],
          [
            42.23931612503753,
            34.66421523426493
          ],
          [
            9.099964430784235,
            87.14564406507795
          ],
          [
            18.719325494049876,
            84.60495544081155
          ],
          [
            26.042150949153175,
            34.21789847458232
          ],
          [
            13.534072514046503,
            16.191041026823815
          ],
          [
            29.958397703859198,
            8.88082670733833
          ],
          [
            99.29784864456163,
            14.755711454102071
          ],
          [
            30.50701360325797,
            47.6353337598595
          ],
          [
            45.01112783886681,
            30.693793893464928
          ],
          [
            91.10060770349749,
            71.07611002498095
          ],
          [
            62.284914070335304,
            16.398009684683345
          ],
          [
            86.4755064595469,
            34.402686632881355
          ],
          [
            66.39047465236796,
            84.37086880884563
          ],
          [
            69.98032690709283,
            94.46018559621405
          ],
          [
            94.44738174672851,
            18.96467033362078
          ],
          [
            62.40473079669102,
            9.919595584732587
          ],
          [
            74.78590969167223,
            63.65617760624712
          ]
        ]
      }
    ]
  }
}

{
  "type": "heatmap",
  "option": {
    "xAxis": {
      "type": "category",
      "data": [
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat",
        "Sun"
      ]
    },
    "yAxis": {
      "type": "category",
      "data": [
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00"
      ]
    },
    "series": [
      {
        "type": "heatmap",
        "data": [
          [
            0,
            0,
            10
          ],
          [
            1,
            0,
            21
          ],
          [
            2,
            0,
            22
          ],
          [
            3,
            0,
            32
          ],
          [
            4,
            0,
            18
          ],
          [
            5,
            0,
            24
          ],
          [
            0,
            1,
            39
          ],
          [
            1,
            1,
            90
          ],
          [
            2,
            1,
            10
          ],
          [
            3,
            1,
            4
          ],
          [
            4,
            1,
            3
          ],
          [
            5,
            1,
            26
          ],
          [
            0,
            2,
            25
          ],
          [
            1,
            2,
            24
          ],
          [
            2,
            2,
            30
          ],
          [
            3,
            2,
            66
          ],
          [
            4,
            2,
            66
          ],
          [
            5,
            2,
            99
          ],
          [
            0,
            3,
            26
          ],
          [
            1,
            3,
            42
          ],
          [
            2,
            3,
            63
          ],
          [
            3,
            3,
            44
          ],
          [
            4,
            3,
            40
          ],
          [
            5,
            3,
            78
          ],
          [
            0,
            4,
            3
          ],
          [
            1,
            4,
            25
          ],
          [
            2,
            4,
            53
          ],
          [
            3,
            4,
            6
          ],
          [
            4,
            4,
            30
          ],
          [
            5,
            4,
            5
          ],
          [
            0,
            5,
            3
          ],
          [
            1,
            5,
            47
          ],
          [
            2,
            5,
            99
          ],
          [
            3,
            5,
            47
          ],
          [
            4,
            5,
            72
          ],
          [
            5,
            5,
            7
          ],
          [
            0,
            6,
            83
          ],
          [
            1,
            6,
            31
          ],
          [
            2,
            6,
            17
          ],
          [
            3,
            6,
            50
          ],
          [
            4,
            6,
            39
          ],
          [
            5,
            6,
            90
          ]
        ]
      }
    ]
  }
}

{
  "type": "geo",
  "option": {
    "geo": {
      "map": "thailand",
      "roam": true
    },
    "series": [
      {
        "type": "scatter",
        "coordinateSystem": "geo",
        "data": [
          {
            "name": "กรุงเทพฯ",
            "value": [
              100.5018,
              13.7563,
              100
            ]
          },
          {
            "name": "เชียงใหม่",
            "value": [
              98.9853,
              18.7883,
              80
            ]
          },
          {
            "name": "ภูเก็ต",
            "value": [
              98.3923,
              7.8804,
              60
            ]
          }
        ]
      }
    ]
  }
}

{
  "type": "map",
  "option": {
    "visualMap": {
      "min": 0,
      "max": 1000,
      "calculable": true,
      "inRange": {
        "color": [
          "#50a3ba",
          "#eac736",
          "#d94e5d"
        ]
      }
    },
    "series": [
      {
        "type": "map",
        "map": "thailand",
        "data": [
          {
            "name": "กรุงเทพมหานคร",
            "value": 1000
          },
          {
            "name": "เชียงใหม่",
            "value": 800
          },
          {
            "name": "ภูเก็ต",
            "value": 600
          },
          {
            "name": "พัทยา",
            "value": 500
          }
        ]
      }
    ]
  }
}

{
  "type": "histogram",
  "option": {
    "xAxis": {
      "type": "value"
    },
    "yAxis": {
      "type": "value"
    },
    "series": [
      {
        "type": "line",
        "data": [
          63.80582751138329,
          80.63226694169002,
          91.74040667517797,
          16.01192615917074,
          58.68259001135926,
          64.54645830661643,
          48.72059326616278,
          44.13804202127317,
          29.161260477050643,
          23.68803623000555,
          8.559140829239464,
          34.7189248380417,
          4.979839979884781,
          22.54106357696054,
          46.583232600606785,
          71.73184771744488,
          3.5378036493238674,
          86.58507325328148,
          30.267723838759597,
          5.876094671898735,
          5.270942554165348,
          57.51240899939116,
          65.73961169435543,
          60.47520398469476,
          14.030523413327034,
          20.97085745523346,
          42.86592584856942,
          5.419007879394789,
          11.02332212777858,
          19.62996408416865,
          36.79398548404611,
          91.79949262158446,
          76.1836244527806,
          80.06692702522098,
          89.20692933033524,
          72.20502229148921,
          69.42460267674502,
          55.32300075093393,
          69.22911811830787,
          81.42075908493331,
          2.5263613822075204,
          89.6313098383416,
          36.16311009829103,
          81.59667829109002,
          28.25884490097278,
          98.27814744745228,
          17.43585216054131,
          71.50450710386345,
          81.3781477717024,
          90.20282565081372,
          2.358519378745627,
          62.495330971369256,
          65.62130184036012,
          38.528654335204706,
          94.2441475881467,
          91.02322063080976,
          5.8964560723123505,
          87.89934836557006,
          48.455520218412374,
          89.93749380600782,
          0.3596819175793131,
          29.91598906880686,
          11.559800589704261,
          74.1792267106178,
          78.769591881658,
          58.25094085413637,
          51.647343768645946,
          84.74506385218609,
          43.181601415712855,
          53.85660983941091,
          85.44494358292006,
          44.546570098896744,
          96.79673866336562,
          44.29449784003824,
          62.47852611624888,
          39.198421244305194,
          40.52130606030495,
          86.28600858949349,
          96.39607410583861,
          8.93139403707286,
          90.36817282056279,
          93.33263948780015,
          25.452197577814594,
          57.99872288173889,
          90.70324171490869,
          83.31668071442904,
          72.28887090102675,
          64.500343157886,
          91.36308396723733,
          10.345921023494364,
          66.83408822469406,
          82.11248765175209,
          88.77932357771296,
          38.38936754903046,
          6.023117628659069,
          99.00492626281905,
          21.783555102614283,
          62.74852897699029,
          35.972659192849385,
          86.17804910956902
        ]
      }
    ]
  }
}

🔄 Chart.js Compatibility Mode

สำหรับ backward compatibility กับ Chart.js config ให้เพิ่ม parameter engine=chartjs ใน URL หรือ body

{
  "type": "radar",
  "data": {
    "labels": [
      "Sales",
      "Admin",
      "IT",
      "Support",
      "Dev"
    ],
    "datasets": [
      {
        "label": "2024",
        "data": [
          90,
          85,
          95,
          80,
          88
        ],
        "backgroundColor": "rgba(54, 162, 235, 0.2)",
        "borderColor": "rgb(54, 162, 235)"
      }
    ]
  },
  "options": {
    "responsive": true
  }
}

🗺️ Map Chart Tooltip Guide

คู่มือการใส่ Tooltip ให้กับ Map Chart เพื่อแสดงข้อมูลเมื่อ hover บนแต่ละจังหวัด/พื้นที่

1. Tooltip พื้นฐาน

เพิ่ม tooltip object ใน option เพื่อเปิดใช้งาน tooltip:

{
  "type": "map",
  "option": {
    "tooltip": {
      "trigger": "item",
      "show": true
    },
    "visualMap": {
      "min": 0,
      "max": 1000,
      "calculable": true,
      "inRange": {
        "color": [
          "#e0f3f8",
          "#abd9e9",
          "#74add1",
          "#4575b4",
          "#313695"
        ]
      }
    },
    "series": [
      {
        "type": "map",
        "map": "thailand",
        "data": [
          {
            "name": "กรุงเทพมหานคร",
            "value": 1000
          },
          {
            "name": "เชียงใหม่",
            "value": 800
          },
          {
            "name": "ภูเก็ต",
            "value": 600
          }
        ]
      }
    ]
  }
}

2. Custom Formatter

ใช้ formatter เพื่อ customize รูปแบบการแสดงผล:

{
  "type": "map",
  "option": {
    "tooltip": {
      "trigger": "item",
      "formatter": "{b}: {c} คน"
    },
    "series": [{
      "type": "map",
      "map": "thailand",
      "data": [
        { "name": "กรุงเทพมหานคร", "value": 5680000 },
        { "name": "เชียงใหม่", "value": 1280000 }
      ]
    }]
  }
}

// สำหรับ format ที่ซับซ้อน ใช้ function:
// formatter: function(params) {
//   return '<b>' + params.name + '</b><br/>' +
//          'ประชากร: ' + params.value.toLocaleString() + ' คน';
// }

3. ตัวอย่างแผนที่ประเทศไทย

ตัวอย่างการแสดง tooltip พร้อมข้อมูลประชากรแต่ละจังหวัด:

{
  "type": "map",
  "option": {
    "title": {
      "text": "จำนวนประชากรแต่ละจังหวัด",
      "left": "center"
    },
    "tooltip": {
      "trigger": "item",
      "formatter": "{b}<br/>ประชากร: {c} คน",
      "backgroundColor": "rgba(50, 50, 50, 0.9)",
      "borderColor": "#777",
      "borderWidth": 1,
      "textStyle": {
        "color": "#fff",
        "fontFamily": "Sarabun"
      }
    },
    "visualMap": {
      "min": 0,
      "max": 6000000,
      "text": [
        "สูง",
        "ต่ำ"
      ],
      "calculable": true,
      "inRange": {
        "color": [
          "#e0f7fa",
          "#00838f"
        ]
      }
    },
    "series": [
      {
        "type": "map",
        "map": "thailand",
        "roam": true,
        "emphasis": {
          "label": {
            "show": true
          },
          "itemStyle": {
            "areaColor": "#ffd54f"
          }
        },
        "data": [
          {
            "name": "กรุงเทพมหานคร",
            "value": 5680000
          },
          {
            "name": "นนทบุรี",
            "value": 1280000
          },
          {
            "name": "ปทุมธานี",
            "value": 1150000
          },
          {
            "name": "เชียงใหม่",
            "value": 1780000
          },
          {
            "name": "ชลบุรี",
            "value": 1560000
          },
          {
            "name": "ภูเก็ต",
            "value": 420000
          },
          {
            "name": "สงขลา",
            "value": 1450000
          },
          {
            "name": "นครราชสีมา",
            "value": 2650000
          }
        ]
      }
    ]
  }
}

4. Styling Tooltip

ปรับแต่งสี font และ style ของ tooltip:

{
  "type": "map",
  "option": {
    "tooltip": {
      "trigger": "item",
      "formatter": "{b}: {c}",
      "backgroundColor": "#1a1a2e",
      "borderColor": "#4a69bd",
      "borderWidth": 2,
      "borderRadius": 8,
      "padding": [
        10,
        15
      ],
      "textStyle": {
        "color": "#ffffff",
        "fontSize": 14,
        "fontWeight": "bold",
        "fontFamily": "Sarabun"
      },
      "extraCssText": "box-shadow: 0 4px 12px rgba(0,0,0,0.3);"
    },
    "series": [
      {
        "type": "map",
        "map": "thailand",
        "data": [
          {
            "name": "กรุงเทพมหานคร",
            "value": 1000
          }
        ]
      }
    ]
  }
}

🎨 ECharts Configuration Format

สำหรับรายละเอียด ECharts configuration format ไปที่ Apache ECharts Documentation

📞 Support

• Email: hello@wetechconsulting.co
• Website: https://wetechconsulting.co
• Company: WE Tech Consulting Co.,Ltd