import chart data from existing table element
- This section introduces about import chart data from table element feature.
If you want to import chart data from existing table element, you should get table element's reference or table should be attatched to HTML document and it has id property to find.
// ...
var tableElement = document.getElementById('chart-data-table');
// ...<html>
<head>
...
</head>
<body>
<table id='table-for-bar-chart-data'>
...
</table>
</body>
</html>Imported chart data from table following basic data type.
Table rows are parsed to series and columns are parsed to categories.
(Table's [0, 0] cell is ignored.)
| PowerUsage (%) | cooling | heating |
|---|---|---|
| Spring | 34 | 66 |
| Summer | 92 | 8 |
| Fall | 26 | 74 |
| December | 5 | 95 |
<table id='data-table'>
<thead>
<tr>
<th>PowerUsage (%)</th>
<th>cooling</th>
<th>heating</th>
</tr>
</thead>
<tbody>
<tr>
<td>Spring</td>
<td>34</td>
<td>66</td>
</tr>
<tr>
<td>Summer</td>
<td>92</td>
<td>8</td>
</tr>
<tr>
<td>Fall</td>
<td>26</td>
<td>74</td>
</tr>
<tr>
<td>December</td>
<td>5</td>
<td>95</td>
</tr>
</tbody>
</table>Basically, chart data parameter has categories and series property.
Like this.
var data = {
categories: ['Jan', 'Feb', 'Mar','Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
{
name: 'Seoul',
data: [[-8.3, 0.3], [-5.8, 3.1], [-0.6, 9.1], [5.8, 16.9], [11.5, 22.6], [16.6, 26.6], [21.2, 28.8], [21.8, 30.0], [15.8, 25.6], [8.3, 19.6], [1.4, 11.1], [-5.2, 3.2]]
}
]
};In this case, you need to import chart data from table. There is no need to define categories and series property to create chart. Only table property required.
And here is table data importing example of data object.
// ...
var table = document.getElementById('data-table-id');
var data = {
table: {
elementId: 'data-table-id' // table element's id
// or
// element: table
}
};
tui.chart.barChart(container, data);- Bar chart
- Line chart
