Click here to Skip to main content
15,393,863 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am tring to using ApexChart, but i couldnt update series on chart. How can i update series data?
Thanks

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dashed Line Chart</title>

    <link href="Content/assets/styles.css" rel="stylesheet" />

    <style>
      
        #chart {
      max-width: 650px;
      margin: 35px auto;
    }
      
    </style>

    <script>
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
            )
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
            )
        window.Promise ||
            document.write(
                '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
            )
    </script> 
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> 
    <script>
        // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
        // Based on https://gist.github.com/blixt/f17b47c62508be59987b
        var _seed = 42;
        Math.random = function () {
            _seed = _seed * 16807 % 2147483647;
            return (_seed - 1) / 2147483646;
        };
    </script>
     </head>  
  <body>
     <div id="chart"></div>

    <script>
     
        var options = {
            series: [{
                name: "Area1",
                data:   [37, 47, 54, 69, 75, 78, 12, 7, 82, 26, 45, 97]
            },
            {
                name: "Area2",
                data: [17, 17, 57, 14, 99, 75, 38, 62, 47, 12, 56, 45, 47] 
            }
            , 
            {
                name: 'Area3',
                data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
            }
            ],
            chart: {
     
                id: "chart1",
                height: 350,
                type: 'line',
                zoom: {
                    enabled: false
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: [5, 7, 5],
                curve: 'straight',
                dashArray: [0, 8, 5]
            },
            title: {
                text: 'Page Statistics',
                align: 'left'
            },
            legend: {
                tooltipHoverFormatter: function (val, opts) {
                    return val + ' - <strong>' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '</strong>'
                }
            },
            markers: {
                size: 0,
                hover: {
                    sizeOffset: 6
                }
            },
            xaxis: {
                categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
                    '10 Jan', '11 Jan', '12 Jan'
                ],
            },
           
            grid: {
                borderColor: '#f1f1f1',
            }
        };
 
       var chart = new ApexCharts(document.querySelector("#chart"), options);  
        chart.render(); 

        </script>
  
</html> 


What I have tried:

chart.updateSeries([{ 
            name: 'Area1',
            data: [7, 47, 4, 69, 75, 78, 92, 7, 52, 26, 45, 47]
        } 
        ]); 
        chart.updateSeries([{
            name: 'Area2',
            data: [17, 27, 54, 60, 75, 8, 92, 7, 52, 86, 5, 27]
        }
        ]); 
        chart.updateSeries([{
            name: 'Area3',
            data: [28, 27, 54, 10, 36, 8, 52, 7, 52, 14, 5, 55]
        }
        ]);
Posted
Comments
Gerry Schmitz 26-Feb-21 12:59pm
   
https://github.com/apexcharts/apexcharts.js/issues/123
gacar 28-Feb-21 4:22am
   
Many thanks.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900