javascript - how do I refresh new data in ApexCharts? - Stack Overflow

admin管理员组

文章数量:1426197

anyone can help me to solve my case, well I have an ApexCharts for show the data that can be refreshed whenever user want to and the data should be change to the updatest datas. but I dont have idea how to reload the data ini ApexCharts this my script

var options = {
            series: [{
            name: 'Stock Value',
            type: 'column',
            data: val_data_1
        }, {
            name: 'Actual Value',
            type: 'column',
            data: val_data_2
        }, {
            name: 'difference',
            type: 'line',
            data: val_data_3
        }],
            chart: {
            height: 350,
            type: 'line',
            stacked: false
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            width: [1, 1, 4]
        },
        title: {
            text: 'XYZ - Stock Opname',
            align: 'left',
            offsetX: 110
        },
        xaxis: {
            categories: categories,
        },
        yaxis: [
            {
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#008FFB'
            },
            labels: {
                style: {
                colors: '#008FFB',
                }
            },
            title: {
                text: "Stock Value",
                style: {
                color: '#008FFB',
                }
            },
            tooltip: {
                enabled: true
            }
            },
            {
            seriesName: 'Ine',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#00E396'
            },
            labels: {
                style: {
                colors: '#00E396',
                }
            },
            title: {
                text: "Actual Value",
                style: {
                color: '#00E396',
                }
            },
            },
            {
            seriesName: 'Revenue',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#FEB019'
            },
            labels: {
                style: {
                colors: '#FEB019',
                },
            },
            title: {
                text: "Differences",
                style: {
                color: '#FEB019',
                }
            }
            },
        ],
        tooltip: {
            fixed: {
            enabled: true,
            position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
            offsetY: 30,
            offsetX: 60
            },
        },
        legend: {
            horizontalAlign: 'left',
            offsetX: 40
        }
        };
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

i've have to hear for use the chart.UpdateSeries() but in my case I dnt know how to use it

anyone can help me to solve my case, well I have an ApexCharts for show the data that can be refreshed whenever user want to and the data should be change to the updatest datas. but I dont have idea how to reload the data ini ApexCharts this my script

var options = {
            series: [{
            name: 'Stock Value',
            type: 'column',
            data: val_data_1
        }, {
            name: 'Actual Value',
            type: 'column',
            data: val_data_2
        }, {
            name: 'difference',
            type: 'line',
            data: val_data_3
        }],
            chart: {
            height: 350,
            type: 'line',
            stacked: false
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            width: [1, 1, 4]
        },
        title: {
            text: 'XYZ - Stock Opname',
            align: 'left',
            offsetX: 110
        },
        xaxis: {
            categories: categories,
        },
        yaxis: [
            {
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#008FFB'
            },
            labels: {
                style: {
                colors: '#008FFB',
                }
            },
            title: {
                text: "Stock Value",
                style: {
                color: '#008FFB',
                }
            },
            tooltip: {
                enabled: true
            }
            },
            {
            seriesName: 'Ine',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#00E396'
            },
            labels: {
                style: {
                colors: '#00E396',
                }
            },
            title: {
                text: "Actual Value",
                style: {
                color: '#00E396',
                }
            },
            },
            {
            seriesName: 'Revenue',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#FEB019'
            },
            labels: {
                style: {
                colors: '#FEB019',
                },
            },
            title: {
                text: "Differences",
                style: {
                color: '#FEB019',
                }
            }
            },
        ],
        tooltip: {
            fixed: {
            enabled: true,
            position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
            offsetY: 30,
            offsetX: 60
            },
        },
        legend: {
            horizontalAlign: 'left',
            offsetX: 40
        }
        };
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

i've have to hear for use the chart.UpdateSeries() but in my case I dnt know how to use it

• javascript
• jquery
• apexcharts

Share Improve this question Follow asked Nov 4, 2022 at 8:20 Indra suandiIndra suandi 16122 gold badges66 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Indeed, you have to use the updateSeries() method. It is documented here: Methods – ApexCharts.js

To help you, I give you an example with updateSeries() using a simple button. When you click on it, random integers are generated in the data array. The series is then updated accordingly.

let options = {
  series: [{
    name: 'Series',
    data: [1, 7, 3]
  }],
  chart: {
    type: 'line',
    height: 350
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['Category 1', 'Category 2', 'Category 3']
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

function getRandomNumber() {
  return Math.floor(Math.random() * 10);
}

document.querySelector('button').addEventListener('click', () => {
  chart.updateSeries([{
    data: [getRandomNumber(), getRandomNumber(), getRandomNumber()]
  }])
});

button {
  padding: 10px;
  color: white;
  background-color: #0d6efd;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  color: black;
  background-color: #0dcaf0;
}

<script src="https://cdn.jsdelivr/npm/apexcharts"></script>

<div id="chart"></div>
<button type="button">Update series</button>

本文标签： javascripthow do I refresh new data in ApexChartsStack Overflow