2.1.2 • Published 2 years ago
gridy-chart-apexcharts v2.1.2
GridyGrid chart component ApexCharts driver
Installation
npm i gridy-grid apexcharts gridy-chart-apexcharts gridy-grid-default sk-theme-default
and plug it to your page
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
then add element to your container or setup it programmatically
<gridy-grid id="gridyGrid" base-path="/node_modules/gridy-grid/src" sort-field="$.title">
<gridy-data-source fields='[{ "title": "Price1", "path": "$.price1" },{ "title": "Price2", "path": "$.price2" }]'
datasource-type="DataSourceLocal" datapath="$.data"></gridy-data-source>
<gridy-chart dri="apex-charts" type="bar" field-price1="Price1" field-price2="Price2" width="400" height="300"></gridy-chart>
</gridy-grid>
<script type="module">
import { GridyGrid } from '/node_modules/gridy-grid/src/gridy-grid.js';
let data = [];
for (let i = 0; i < 10; i++) {
data.push({ price1: 200 * i, price2: 100 * i })
}
let grid = document.querySelector('#gridyGrid');
grid.addEventListener('bootstrap', () => {
grid.charts[0].addEventListener('skrender', (event) => {
grid.dataSource.loadData(data);
});
});
customElements.define('gridy-grid', GridyGrid);
</script>
2.1.2
2 years ago
2.0.28
2 years ago
2.0.29
2 years ago
2.0.26
2 years ago
2.1.1
2 years ago
2.0.27
2 years ago
2.1.0
2 years ago
2.0.25
2 years ago
2.0.24
2 years ago
2.0.22
2 years ago
2.0.23
2 years ago
2.0.21
2 years ago
2.0.15
2 years ago
2.0.16
2 years ago
2.0.13
2 years ago
2.0.14
2 years ago
2.0.20
2 years ago
2.0.19
2 years ago
2.0.17
2 years ago
2.0.18
2 years ago
2.0.12
2 years ago
2.0.11
3 years ago