Create a scatter chart using numbers from the database

App Development
1

I want to create a scatter chart using numbers from the database, but simply linking the database field values in the code doesn’t work properly. If there’s someone experienced in development, could you help me figure out how to fix this?

data: [
{ x: {{field_1812}}, y: {{field_1816}}, z: ‘A’ },
{ x: {{field_1813}}, y: {{field_1817}}, z: ‘B’ },
{ x: {{field_1814}}, y: {{field_1818}}, z: ‘C’ },
{ x: {{field_1815}}, y: {{field_1819}}, z: ‘D’ }
]

Below is the code im working on

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Scatter Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart"></div>
<script>
        var options = {
            chart: {
                type: 'scatter',
                height: 350
            },
            series: [{
                name: 'Points',
                data: [
                    { x: {{field_1812}}, y: {{field_1816}}, z: 'A' },
                    { x: {{field_1813}}, y: {{field_1817}}, z: 'B' },
                    { x: {{field_1814}}, y: {{field_1818}}, z: 'C' },
                    { x: {{field_1815}}, y: {{field_1819}}, z: 'D' }
                ]
            }],
            xaxis: {
                min: 1,
                max: 10,
                title: {
                    text: 'X-axis'
                }
            },
            yaxis: {
                min: 1,
                max: 10,
                title: {
                    text: 'Y-axis'
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                    return val.z;
                }
            }
        }

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>
</body>
</html>
2

Found a thread about charts from a couple of years ago - have a look:

1 Like
3

Yeah it really helped me Thanks a lot!!

1 Like