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": [
          [
            96.80297674304279,
            41.55182592964953
          ],
          [
            19.636536951325688,
            57.4686512511626
          ],
          [
            23.647583065795395,
            28.153738252444672
          ],
          [
            6.257389047231432,
            41.68749860589186
          ],
          [
            43.84495204053218,
            17.6630762718598
          ],
          [
            76.73111902718621,
            88.13971312401586
          ],
          [
            9.053388387932282,
            23.132929442168702
          ],
          [
            40.387060687802425,
            13.013423393031632
          ],
          [
            2.3892160129427853,
            75.5437790620347
          ],
          [
            76.20857498196699,
            50.44446890588002
          ],
          [
            10.803187054725516,
            35.01252914870035
          ],
          [
            19.62807483650504,
            54.06207332602345
          ],
          [
            9.250554871219684,
            95.97548805213475
          ],
          [
            90.32511899474315,
            41.20286708992681
          ],
          [
            35.45376723940481,
            88.24956218962053
          ],
          [
            57.897259827160354,
            62.43930161271064
          ],
          [
            12.57069197127515,
            74.7630384852413
          ],
          [
            55.35265916765856,
            46.98342055389837
          ],
          [
            37.76702219738307,
            93.02237165551618
          ],
          [
            99.78563654069151,
            95.71710036560508
          ],
          [
            9.329257945517732,
            48.6022207581135
          ],
          [
            50.5461894782333,
            23.5869675323376
          ],
          [
            51.8563271235585,
            2.9470529241105936
          ],
          [
            50.09058816973246,
            75.41928135193923
          ],
          [
            16.78611635899374,
            27.879365122755594
          ],
          [
            61.02343950444792,
            67.25298514440384
          ],
          [
            15.924785651397311,
            21.628131754836954
          ],
          [
            27.60923483334642,
            37.34453061487986
          ],
          [
            57.74313985616028,
            4.918959779548215
          ],
          [
            96.2956964679106,
            65.17772314157989
          ],
          [
            18.442498570017708,
            33.48382384274412
          ],
          [
            11.47192243482882,
            0.741119999624329
          ],
          [
            30.440012995444597,
            19.27091331223938
          ],
          [
            66.77133469825232,
            34.725887369688024
          ],
          [
            34.07051817999465,
            67.77064319470911
          ],
          [
            99.4459465088841,
            72.39847163053017
          ],
          [
            60.500725556457645,
            86.4741400758642
          ],
          [
            5.760727191567716,
            56.05364022345274
          ],
          [
            80.98252001881747,
            11.635610516182048
          ],
          [
            44.43285243987493,
            58.31101681546629
          ],
          [
            95.72053175784815,
            72.89558601832687
          ],
          [
            8.190853334011539,
            17.381935108424194
          ],
          [
            60.76342905807106,
            78.84169430459079
          ],
          [
            80.20601927444119,
            43.943818482229005
          ],
          [
            21.697558613437973,
            48.14301613668245
          ],
          [
            90.0271651979138,
            32.82457900883087
          ],
          [
            41.37823367714538,
            80.8790498939244
          ],
          [
            94.96340169472957,
            71.55675212851291
          ],
          [
            24.632473795823863,
            58.93525743351526
          ],
          [
            4.375607505229473,
            69.3853694185694
          ]
        ]
      }
    ]
  }
}

{
  "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,
            71
          ],
          [
            1,
            0,
            91
          ],
          [
            2,
            0,
            29
          ],
          [
            3,
            0,
            3
          ],
          [
            4,
            0,
            53
          ],
          [
            5,
            0,
            53
          ],
          [
            0,
            1,
            35
          ],
          [
            1,
            1,
            8
          ],
          [
            2,
            1,
            53
          ],
          [
            3,
            1,
            84
          ],
          [
            4,
            1,
            85
          ],
          [
            5,
            1,
            47
          ],
          [
            0,
            2,
            87
          ],
          [
            1,
            2,
            27
          ],
          [
            2,
            2,
            65
          ],
          [
            3,
            2,
            54
          ],
          [
            4,
            2,
            16
          ],
          [
            5,
            2,
            44
          ],
          [
            0,
            3,
            54
          ],
          [
            1,
            3,
            25
          ],
          [
            2,
            3,
            29
          ],
          [
            3,
            3,
            82
          ],
          [
            4,
            3,
            47
          ],
          [
            5,
            3,
            79
          ],
          [
            0,
            4,
            89
          ],
          [
            1,
            4,
            40
          ],
          [
            2,
            4,
            47
          ],
          [
            3,
            4,
            9
          ],
          [
            4,
            4,
            66
          ],
          [
            5,
            4,
            54
          ],
          [
            0,
            5,
            66
          ],
          [
            1,
            5,
            59
          ],
          [
            2,
            5,
            38
          ],
          [
            3,
            5,
            57
          ],
          [
            4,
            5,
            51
          ],
          [
            5,
            5,
            19
          ],
          [
            0,
            6,
            89
          ],
          [
            1,
            6,
            39
          ],
          [
            2,
            6,
            65
          ],
          [
            3,
            6,
            77
          ],
          [
            4,
            6,
            51
          ],
          [
            5,
            6,
            57
          ]
        ]
      }
    ]
  }
}

{
  "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": [
          84.38838697064061,
          50.20456640288361,
          70.11734196770293,
          45.674168016328785,
          69.71665482155022,
          21.50190809225997,
          39.203034984227145,
          45.504800880583595,
          25.908481876856015,
          92.13297916810247,
          64.75996032577393,
          21.86524514095234,
          79.54541517528092,
          27.991131599788687,
          54.64561003060563,
          99.30916610360454,
          42.987523481820524,
          65.86216498609205,
          7.841665642951623,
          32.9193316770521,
          40.957087970475726,
          14.595546812438698,
          18.01832079157607,
          31.298768711724755,
          46.03684305582932,
          9.995083734311628,
          84.44422685772446,
          4.472311510552396,
          35.42576653655299,
          36.56650294499717,
          7.273553184788007,
          24.350564040905187,
          85.73911756750618,
          82.10794821699433,
          37.84237136423375,
          41.212939257393344,
          22.48681270715266,
          88.95256121295134,
          31.420096103509398,
          13.357469049387172,
          10.845513056115664,
          19.596267603555017,
          91.33717851691337,
          53.53912574720212,
          48.40501258323457,
          56.27342268587006,
          32.11374329365717,
          59.486391820432374,
          29.713010235910343,
          4.163857831525664,
          82.12429740617982,
          55.470735585658915,
          46.08054394443346,
          46.90625701475181,
          18.742017858127547,
          81.51522576437344,
          34.19237459807697,
          27.708371250523523,
          20.99976814079938,
          83.04456732575647,
          85.04138555451969,
          23.72336961678777,
          87.33787609254105,
          15.2870723589289,
          33.99304113393661,
          35.4566127259504,
          4.464074002924489,
          43.401447972156284,
          9.737232869123558,
          24.912178935956884,
          85.24622080529176,
          63.07300079649272,
          48.464095160415845,
          9.500734071043237,
          45.72187365625731,
          14.092787977830968,
          93.30373164632412,
          56.31204509963491,
          45.86384533149658,
          17.826970383757878,
          4.151630700902786,
          27.764131752499864,
          26.513387474400606,
          31.11640386109228,
          90.37726892123499,
          69.66889197273134,
          47.881873288062835,
          52.57236701735481,
          32.315637645745014,
          63.118228876223355,
          40.83545421189548,
          47.98988811700785,
          0.3165571921747157,
          92.94741191084675,
          69.94967774899193,
          73.92287336255772,
          30.335562383833093,
          63.3334036496339,
          68.09729844203396,
          1.1855064031695117
        ]
      }
    ]
  }
}

🔄 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