Creating your first ApexChart

creating-your-first-apexchart.markdown

Creating your first ApexChart

A Pen by ApexCharts on CodePen.

License.

index.html

<div id="chart">
</div>

script.js

var arr = new Array();
var data = [];
arr.push({x:5,y:10});
arr.push({x:10,y:20});
arr.push({x:15,y:20});
arr.push({x:25,y:20});
function getCoordinates()
{
  var i= 0;
  for (var i = 0; i < arr.length; i+=1) {
    var x = arr[i];
    var y = arr[i+1];
    console.log(arr[i]);
} 
  data.push({     x, y
                });
}

var options = {
            chart: {
                height: 350,
                type: 'line',
                animations: {
                    enabled: true,
                    easing: 'linear',
                    
                },
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: false
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            series: [{
                data: data
            }],
            title: {
                text: 'Dynamic Updating Chart',
                align: 'left'
            },
            markers: {
                size: 2
            },
            xaxis: {
                min:0,
                max: 100,
            },
            yaxis: {
              min:0,
                max: 100
            },
            legend: {
                show: false
            },
        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();
window.setInterval(function () {
            getCoordinates()
            chart.updateSeries([{
                data: data
            }])
        }, 60000)

scripts

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

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
  font-family: Roboto, sans-serif;
}

#chart {
  max-width: 650px;
  margin: 35px auto;
}