User Rating 0.0 ★★★★★

Total Usage 0 times

Category Dev Generators

HTML Table Input

Data Preview (Canvas) No Data

Highcharts Configuration

// Output will appear here...

Copied to clipboard!

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

This tool acts as a bridge between static HTML markup and dynamic data visualization. It parses standard HTMLTableElement structures, extracting row data, column headers, and specific data-attributes to generate a production-ready Highcharts configuration object.

By utilizing the browser's native DOMParser, the tool ensures accurate interpretation of table semantics, including thead for categories and tbody for series data. It creates an immediate visual verification using a custom HTML5 Canvas engine, ensuring your data is structured correctly before you implement the external library.

Formulas

The converter maps the table matrix T to a Series Object S. For a table with i rows and j columns:

Series_i = {

name: getCell(i, 0)data: n∪j=1 parseFloat(T_ij)

Reference Data

Attribute	Type	Description
data-chart-type	string	Defines chart type (column, line, pie, bar).
data-categories	boolean	Marks the row containing X-Axis categories.
data-series	boolean	Marks a row as a data series.
data-series-name	string	Sets the name of the series (overrides first cell).
data-ignore	boolean	Skips a specific cell or row during parsing.

Frequently Asked Questions

The parser attempts to sanitize input using a regex float parser. If a cell contains "1,200.50", it is converted to the number 1200.5. Cells that cannot be parsed as numbers are treated as null or 0 depending on the strictness setting.

Yes. The output is a valid JavaScript object. You can copy/paste it directly into your Highcharts.chart() initialization function.

No. While the original "pe-charts" library inspired this logic and used jQuery, this tool generates vanilla JS configuration objects compatible with modern frameworks (React, Vue) or vanilla JS.

The preview is rendered using a custom lightweight HTML5 Canvas engine built specifically for this tool to avoid external dependencies. It confirms data integrity, but the final Highcharts styling will depend on your project's theme.