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": [
          [
            41.56571131435959,
            14.152637848232786
          ],
          [
            74.78772412906424,
            74.41747620335593
          ],
          [
            56.924842965163236,
            79.92681084935434
          ],
          [
            48.523838297484055,
            93.47170293936935
          ],
          [
            34.49709537612574,
            97.80927416317077
          ],
          [
            19.88847763591418,
            11.586435262934335
          ],
          [
            17.893334701963347,
            64.50068536389968
          ],
          [
            50.181162862641514,
            67.24257698597046
          ],
          [
            21.463595852246065,
            1.9389325612434227
          ],
          [
            79.23435071379727,
            62.59167331224796
          ],
          [
            6.7479045899417,
            48.57833325847152
          ],
          [
            66.14070843137746,
            83.79689648579473
          ],
          [
            77.43354230341698,
            4.089819860905064
          ],
          [
            78.07897959932892,
            92.85198822377461
          ],
          [
            85.84148223336958,
            70.80220316064268
          ],
          [
            30.0269893900747,
            13.398294457796457
          ],
          [
            69.59606575476958,
            16.641861646056512
          ],
          [
            37.364057017252996,
            82.4122355226919
          ],
          [
            40.48439141756302,
            53.843915237446225
          ],
          [
            28.86195294836632,
            26.817875499987466
          ],
          [
            10.945180303122836,
            33.29207311570377
          ],
          [
            33.52309638363179,
            23.690334152556293
          ],
          [
            96.69545813032141,
            33.546550339840564
          ],
          [
            54.064183493147354,
            91.22148021127038
          ],
          [
            69.33825917834479,
            21.274988987083443
          ],
          [
            77.11506185539533,
            2.1113817737578144
          ],
          [
            47.3397825402378,
            49.156701846778525
          ],
          [
            40.221329134645536,
            2.5716410238272758
          ],
          [
            41.5107706005677,
            52.420066414344845
          ],
          [
            27.81340869073121,
            25.692421899975805
          ],
          [
            91.67180136208194,
            21.82241142347314
          ],
          [
            66.26439860331091,
            9.116148096084808
          ],
          [
            98.80500902023095,
            63.04538133785683
          ],
          [
            67.42769442814289,
            74.97880697517729
          ],
          [
            83.02191192403492,
            28.62500938295097
          ],
          [
            54.99423260732886,
            44.45228787863472
          ],
          [
            0.07258526517623931,
            52.000427654566586
          ],
          [
            65.29369213544608,
            33.265121798708904
          ],
          [
            47.50587691571659,
            85.86807506471989
          ],
          [
            42.74462439214651,
            38.484469844499344
          ],
          [
            75.84447791185386,
            32.47571082385543
          ],
          [
            38.28493723271824,
            82.26113600195822
          ],
          [
            9.420868310879616,
            98.49766607512866
          ],
          [
            90.10820373005355,
            88.95403110311338
          ],
          [
            86.69165219823336,
            79.59879574092015
          ],
          [
            20.38820730850166,
            94.8672636151899
          ],
          [
            91.72091168084238,
            91.60321883620679
          ],
          [
            93.32226439351889,
            74.23266510640406
          ],
          [
            0.052706292034343516,
            79.80354380747605
          ],
          [
            79.66771162000857,
            66.89142716695409
          ]
        ]
      }
    ]
  }
}

{
  "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,
            49
          ],
          [
            1,
            0,
            49
          ],
          [
            2,
            0,
            81
          ],
          [
            3,
            0,
            38
          ],
          [
            4,
            0,
            18
          ],
          [
            5,
            0,
            78
          ],
          [
            0,
            1,
            39
          ],
          [
            1,
            1,
            39
          ],
          [
            2,
            1,
            21
          ],
          [
            3,
            1,
            65
          ],
          [
            4,
            1,
            8
          ],
          [
            5,
            1,
            79
          ],
          [
            0,
            2,
            50
          ],
          [
            1,
            2,
            31
          ],
          [
            2,
            2,
            75
          ],
          [
            3,
            2,
            25
          ],
          [
            4,
            2,
            43
          ],
          [
            5,
            2,
            54
          ],
          [
            0,
            3,
            34
          ],
          [
            1,
            3,
            10
          ],
          [
            2,
            3,
            77
          ],
          [
            3,
            3,
            65
          ],
          [
            4,
            3,
            86
          ],
          [
            5,
            3,
            94
          ],
          [
            0,
            4,
            43
          ],
          [
            1,
            4,
            36
          ],
          [
            2,
            4,
            94
          ],
          [
            3,
            4,
            83
          ],
          [
            4,
            4,
            53
          ],
          [
            5,
            4,
            28
          ],
          [
            0,
            5,
            68
          ],
          [
            1,
            5,
            94
          ],
          [
            2,
            5,
            40
          ],
          [
            3,
            5,
            63
          ],
          [
            4,
            5,
            53
          ],
          [
            5,
            5,
            88
          ],
          [
            0,
            6,
            1
          ],
          [
            1,
            6,
            82
          ],
          [
            2,
            6,
            28
          ],
          [
            3,
            6,
            53
          ],
          [
            4,
            6,
            30
          ],
          [
            5,
            6,
            65
          ]
        ]
      }
    ]
  }
}

{
  "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": [
          45.27372225023656,
          10.40045370348972,
          98.33466061342236,
          4.462454663030524,
          38.39101253107765,
          78.49149453022598,
          64.65555742092826,
          0.5505400335997446,
          86.20539312016167,
          87.48596922668203,
          69.86564474279052,
          51.5977345966134,
          75.75794530815773,
          37.1792956859444,
          37.77511438624579,
          96.41321661000097,
          65.75911723256189,
          20.54565607355435,
          59.03586209176596,
          18.845341576735073,
          13.588863182858613,
          38.407046340112316,
          27.563950094844014,
          41.326957816120526,
          0.021387617305812512,
          77.36600414921487,
          22.72092793533026,
          5.889271431022014,
          10.860553157353525,
          13.432457410664234,
          41.69842731606822,
          28.257465362974,
          90.90845608682152,
          88.77479718636395,
          73.24574259269025,
          25.032763236416354,
          10.286407648826035,
          25.293033267321373,
          76.23975746063208,
          19.39005028857683,
          39.01034545323164,
          94.4348305793568,
          26.40218021331665,
          16.612334971563314,
          60.65237915840278,
          93.13890327581608,
          34.15759787184884,
          59.40936594021412,
          35.06680907597999,
          44.76398317805281,
          9.197233911820945,
          78.73499292096608,
          81.06319520132699,
          91.91323488876047,
          56.83333248163274,
          41.96521368658396,
          53.3886410886943,
          46.8547547100257,
          59.320728813961985,
          4.487633166604976,
          87.17876502431263,
          14.881186625342869,
          37.86190906507525,
          65.32776866648872,
          29.386377851461663,
          89.49297989725312,
          17.607005463772097,
          77.8774440006489,
          1.1323142398467656,
          55.35027588816293,
          0.4920656657219524,
          92.20327774419927,
          42.84929656016623,
          26.039639162294026,
          68.96859544371435,
          70.10597415127195,
          89.67816412079691,
          64.30541810163191,
          22.276359703997915,
          34.247931589742166,
          73.7707683090834,
          69.9095553923179,
          42.969148238851986,
          83.2167123445647,
          26.629601456194163,
          51.979243480561976,
          53.291306619475954,
          21.895228107744646,
          84.6705931642729,
          49.658287948346,
          39.92476760929987,
          60.84986286849611,
          6.892667499073912,
          22.91612639012802,
          66.54533680153916,
          86.86285832849534,
          55.3582058156497,
          97.4109717634548,
          99.98553343767166,
          46.32667973953399
        ]
      }
    ]
  }
}

🔄 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