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": [
          [
            86.35067891446012,
            51.818620934776625
          ],
          [
            66.20028832258872,
            15.865172301312446
          ],
          [
            81.34220965171478,
            4.182179624562532
          ],
          [
            14.772255429048197,
            38.52143208648856
          ],
          [
            88.67820997373204,
            31.02732205646488
          ],
          [
            87.05918073076916,
            88.91124756620073
          ],
          [
            37.18996094340782,
            50.51181592883868
          ],
          [
            10.455136322552294,
            89.28584620237626
          ],
          [
            17.515519377283418,
            90.26119505752708
          ],
          [
            48.329443391399906,
            91.01967967960154
          ],
          [
            85.65905260938355,
            9.331761274591354
          ],
          [
            34.685598305762156,
            12.489740242885272
          ],
          [
            15.444901360752416,
            86.41375475740976
          ],
          [
            97.02527890452399,
            0.14048047611110448
          ],
          [
            71.43958670089712,
            9.680506243808262
          ],
          [
            54.97289522014579,
            80.01071477744688
          ],
          [
            6.216906634089403,
            4.131937859246482
          ],
          [
            21.974032700622526,
            23.360321916903214
          ],
          [
            45.57071634141835,
            58.796298778684594
          ],
          [
            37.54556606754961,
            76.44379642387868
          ],
          [
            74.77865672839819,
            56.38684749015626
          ],
          [
            43.9374347726469,
            52.968886109758316
          ],
          [
            85.4355559050711,
            10.487937125449776
          ],
          [
            13.184344044785423,
            8.05567991450915
          ],
          [
            87.95507750656587,
            14.722989925667951
          ],
          [
            20.893284581211724,
            8.860319973322394
          ],
          [
            7.485515098643636,
            49.63603476632873
          ],
          [
            89.32773409187483,
            21.669643897282608
          ],
          [
            44.15928398063744,
            73.49252212734297
          ],
          [
            53.223874500461555,
            26.728611446294327
          ],
          [
            4.075914618191345,
            21.33316356821058
          ],
          [
            67.19684096458556,
            93.21762557475252
          ],
          [
            83.66227572653135,
            85.03154354963122
          ],
          [
            11.85777926445768,
            19.939440261099726
          ],
          [
            45.246988700224875,
            74.21498197319126
          ],
          [
            77.58288996546328,
            59.82673650198993
          ],
          [
            33.770608603867345,
            14.356904916982426
          ],
          [
            65.11598095713327,
            83.79843344704035
          ],
          [
            54.13533768861607,
            85.73948198198089
          ],
          [
            1.6619974531937198,
            5.202438951954003
          ],
          [
            48.20201662600766,
            25.192611392708553
          ],
          [
            3.9261940560120223,
            13.756068592707704
          ],
          [
            12.793817525487395,
            56.70826361331231
          ],
          [
            13.26366930843309,
            62.660296369870004
          ],
          [
            26.480256604514608,
            53.61974808803932
          ],
          [
            41.75077998481959,
            35.8632962824986
          ],
          [
            36.75491722936462,
            35.58804047252472
          ],
          [
            81.19103559716503,
            61.946418040466625
          ],
          [
            38.23891281033715,
            85.20196220383136
          ],
          [
            97.05719281415786,
            50.12119750098487
          ]
        ]
      }
    ]
  }
}

{
  "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,
            8
          ],
          [
            1,
            0,
            87
          ],
          [
            2,
            0,
            0
          ],
          [
            3,
            0,
            58
          ],
          [
            4,
            0,
            2
          ],
          [
            5,
            0,
            62
          ],
          [
            0,
            1,
            91
          ],
          [
            1,
            1,
            0
          ],
          [
            2,
            1,
            75
          ],
          [
            3,
            1,
            1
          ],
          [
            4,
            1,
            59
          ],
          [
            5,
            1,
            68
          ],
          [
            0,
            2,
            50
          ],
          [
            1,
            2,
            55
          ],
          [
            2,
            2,
            64
          ],
          [
            3,
            2,
            26
          ],
          [
            4,
            2,
            33
          ],
          [
            5,
            2,
            44
          ],
          [
            0,
            3,
            74
          ],
          [
            1,
            3,
            76
          ],
          [
            2,
            3,
            41
          ],
          [
            3,
            3,
            46
          ],
          [
            4,
            3,
            52
          ],
          [
            5,
            3,
            42
          ],
          [
            0,
            4,
            55
          ],
          [
            1,
            4,
            6
          ],
          [
            2,
            4,
            79
          ],
          [
            3,
            4,
            69
          ],
          [
            4,
            4,
            17
          ],
          [
            5,
            4,
            8
          ],
          [
            0,
            5,
            88
          ],
          [
            1,
            5,
            66
          ],
          [
            2,
            5,
            53
          ],
          [
            3,
            5,
            86
          ],
          [
            4,
            5,
            38
          ],
          [
            5,
            5,
            85
          ],
          [
            0,
            6,
            69
          ],
          [
            1,
            6,
            57
          ],
          [
            2,
            6,
            89
          ],
          [
            3,
            6,
            72
          ],
          [
            4,
            6,
            99
          ],
          [
            5,
            6,
            96
          ]
        ]
      }
    ]
  }
}

{
  "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": [
          33.16853802967594,
          4.191982622467294,
          91.51883548939895,
          86.82671920346905,
          58.23615047275502,
          67.11739021394855,
          21.331959040340244,
          5.754323790510152,
          26.69733384057712,
          39.1014283174644,
          32.24847495310935,
          37.19080121606096,
          15.618840195973792,
          32.0579618166732,
          36.88850634368502,
          29.76360166780546,
          62.301175898176474,
          20.088222053752236,
          99.23500675430614,
          58.74726224274607,
          93.3321043724621,
          80.41082802980328,
          49.69588325687509,
          53.22929363320256,
          13.415792860223629,
          32.293790744624516,
          94.11537322334472,
          12.724351350031782,
          47.621857783618914,
          29.98826776601643,
          91.6299990342888,
          37.48365156971223,
          77.85577892617931,
          99.79285967722134,
          11.2336527945064,
          29.823020474055117,
          34.33317851728115,
          32.64300965219766,
          83.65988041066436,
          64.10061852846984,
          66.47654520625066,
          62.66445861902981,
          18.832383097430228,
          28.65368841056959,
          39.27604802764826,
          50.13256434854612,
          40.92346482796356,
          73.87636380666886,
          22.94287576879451,
          93.00583539360959,
          89.80792102934579,
          95.74852835608681,
          57.195590192401625,
          88.65872166055473,
          68.69177083008012,
          18.19289435235486,
          62.844414177379505,
          86.32558223063455,
          67.95696236331949,
          58.80671148182953,
          59.761440423298396,
          49.78248751761769,
          92.79611505570837,
          73.09679152661799,
          10.459559701676458,
          14.423916575840734,
          63.23376100035385,
          93.29513058995119,
          63.07003877124879,
          92.4869583960535,
          11.206921623870114,
          51.64641779904876,
          61.75401100540937,
          31.608286011311893,
          66.8079578050182,
          66.64579732860311,
          80.1557702814257,
          81.7809154317143,
          49.561403607193334,
          26.45463273527433,
          87.17020265745946,
          17.010214421978464,
          82.96494250470742,
          98.45504699633679,
          32.037582298703235,
          27.870424932026893,
          27.44252901397858,
          75.33982081297071,
          28.798659241663405,
          70.68869440201058,
          77.02711348529363,
          50.56774081165841,
          8.74596680281331,
          71.71586309463588,
          69.58126964443068,
          85.7000711781681,
          17.30392868650573,
          28.039474982210667,
          86.12473050197707,
          84.52817587956926
        ]
      }
    ]
  }
}

🔄 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