HTML Charts & Gauges Without JavaScript

Almost all HTML chart creation tools require knowing non-trivial amounts of JavaScript. What if you could create a chart that looked like the one below directly in your HTML without knowing JavaScript?

Now, with tlx-chart, creating charts is easy. All you need to know is HTML (although you will have to load a JavaScript library at the top of your page).

You can even include an Edit button to let users experiment with different views of the data. Try the button above! (Note: May not work well in this embedded mode on small screens, try this instead).

Here is the HTML for the above chart:

<html lang="en">
<head>
<script src="https://unpkg.com/tlx/browser/tlx.js"></script>
<script src="https://unpkg.com/tlx-chart/browser/tlx-chart.js"></script>
</head>
<body>
<tlx-chart chart-type="PieChart"
chart-editable
chart-columns="${['Element','Percentage']}"
chart-data="${[
['Nitrogen',0.78],
['Oxygen',0.21],
['Other',0.01]]}"
</tlx-chart>
</body>
</html>

Of course, you could include more than one chart if you wished.

You can also support in-line end-user editing of the data for the chart with the element tlx-chart-editor. Try changing some of the values for the chart below. (Note: They must total to 1, i.e. 100% for chart to update).

What kinds of charts does tlx-chart support? Just about anything supported by Google Charts, since that is what is under the hood. Below are a few more examples. Give us a clap if you like tlx-chart!

<html lang="en">
<head>
<script src="https://unpkg.com/tlx/browser/tlx.js"></script>
<script src="https://unpkg.com/tlx-chart/browser/tlx-chart.js"></script>
</head>
<body>
<tlx-chart chart-type="Gauge"
chart-columns="${['Element','Percentage']}"
chart-data="${[
['Nitrogen',0.78],
['Oxygen',0.21],
['Other',0.01]]}">
</tlx-chart>
</body>
</html>
<html lang="en">
<head>
<script src="https://unpkg.com/tlx/browser/tlx.js"></script>
<script src="https://unpkg.com/tlx-chart/browser/tlx-chart.js"></script>
</head>
<body>
<tlx-chart chart-type="OrgChart"
chart-columns="${['Name', 'Manager', 'ToolTip']}"
chart-data="${[
['Mike', '', 'The President'],
['Jim', 'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']]}">
</tlx-chart>
</body>
</html>

You can find tlx and tlx-chart on GitHub.