CODEWITHSUNDEEP
javascriptchartschart.js
Lslschr
Lslschr

Reputation: 25

Chart.js Chart does not start at

I want to that the Chart start at 0. But it takes always the lower value to start. I already tried a few things but nothing works. It never takes the settings done in de options Part of de javascript part. So i dont know what the issue is. It never starts at 0. But this is what i want to. Please help. Thank you very much :) Looks currently like this: https://school.luis-luescher.com/m242/moin/index.php

<!DOCTYPE html>
<html>

<head>
    <title>Database</title>
    <style type="text/css">
    BODY {
        width: 550PX;
    }

    #chart-container {
        width: 100%;
        height: auto;
    }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

</head>

<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <script>
    $(document).ready(function() {
        showGraph();
    });


    function showGraph() {
        {
            $.post("https://school.luis-luescher.com/m242/moin/data.php",
                function(data) {
                    console.log(data);
                    var trytime = [];
                    var count = [];

                    for (var i in data) {
                        trytime.push(data[i].trytime);
                        count.push(data[i].count);
                    }

                    var chartdata = {
                        labels: trytime,
                        datasets: [{
                            label: 'Erfolgreiche Authentifizerungen',
                            backgroundColor: '#8846f1',
                            borderColor: '#a446f1',
                            hoverBackgroundColor: '#CCCCCC',
                            hoverBorderColor: '#666666',
                            borderWidth: 1,
                            data: count,
                        }],
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    }


                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
        }
    }
    </script>

</body>

</html>

Upvotes: 0

Views: 97

Answers (1)

Gabriel R.C
Gabriel R.C

Reputation: 36

Your Options object must be outside chartData.

var barGraph = new Chart(graphTarget, {
                    type: 'bar',
                    data: chartdata,
                    options: options
                });

Upvotes: 2

Related Questions