CODEWITHSUNDEEP
javascriptchart.jsscatter-plot
cyber_coo
cyber_coo

Reputation: 13

creating a chart.js scatter graph with variables for data

I am writing a program that will eventually generate a graph based on user input. so I've created a proof of concept that should click a button and make a chart.js scatter graph my issue is that the data is not included for some reason not sure why.

<html>

<head>
<title>Test1</title>

<script src="Chart.min.js"></script>
</head>
<body>

<button onmousedown="addData()"></button>

<script>
function addData(){
    ABC=[[1,2,1],[2,2,2],[3,3,3]];
    chart(ABC);
}



function chart(array)
{
    for (counter = 0; counter < array.length; counter++) 
    {
        var entery = {x: array[counter][0], y: array[counter][3]};
        storage.push(entery);
    }

    document.write('<canvas id="lineChart" height="200" width="450"></canvas>');    


    const chart=document.getElementById("lineChart");
    console.log(chart)
    var myChart = new Chart(chart, {
        type: 'scatter',
        data: {
            datasets: [{
                "fill":false,
                pointRadius: 10,
                label: 'Scatter Dataset',
                data: storage        
                }]

        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                }]
            }
        }
    });

}
</script>



</body>
</html>

I cannot work out why the data is not included any help would be appreciated

Upvotes: 1

Views: 863

Answers (1)

EhsanT
EhsanT

Reputation: 2085

You have some issues with setting up your code:

  1. You have not defined storage array
  2. console.log(chart) throws an error, you have to comment that line out or remove it
  3. The elements in your ABC array does not have 4 elements(arrays are 0 indexed and your last index will be 2 not 3) So this line var entery = {x: array[counter][0], y: array[counter][3]}; should be changed to var entery = {x: array[counter][0], y: array[counter][2]};

So, your code should look like this:

<html>

<head>
    <title>Test1</title>
    <script src="Chart.min.js"></script>
</head>
<body>
    <button onclick="addData();">Test</button>

    <script type="text/javascript">
        function addData(){
            ABC=[[1,2,1],[2,2,2],[3,3,3]];
            chart(ABC);
        }


        function chart(array)
        {
            var storage = [];
            for (counter = 0; counter < array.length; counter++) 
            {
                var entery = {x: array[counter][0], y: array[counter][2]};
                storage.push(entery);
            }

            document.write('<canvas id="lineChart" height="200" width="450"></canvas>');    

            const chart = document.getElementById("lineChart");
            //console.log(chart)
            var myChart = new Chart(chart, {
                type: 'scatter',
                data: {
                    datasets: [{
                        "fill":false,
                        pointRadius: 10,
                        label: 'Scatter Dataset',
                        data: storage        
                        }]
                },
                options: {
                    scales: {
                        xAxes: [{
                            type: 'linear',
                        }]
                    }
                }
            });
        }
    </script>
</body>
</html>

Also here you can find a working copy of the chart.

Upvotes: 1

Related Questions