CODEWITHSUNDEEP
javascripthtmlajaxbootstrap-4chartist.js
Shivam Mishra
Shivam Mishra

Reputation: 15

Getting problem in displaying chartist graph in html in button is clicked

I am trying to display the chartist graph if the user clicks the button. But when I was doing this I was facing the problem that, if I display the graph normally then it will show properly but if I put the ajax show() the all the graph is getting shrink as given in the image below.

Without button clicked Without button clicked

On button clicked display of graph on button clicked display of graph

Demo.html

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSSPage/StyleSheet.css') }}">
    <script type="application/javascript" src="{{ url_for('static', filename='JSPage/JavaScript.js') }}"></script>

    <title>Demo</title>
</head>
<body class="d-flex h-100 text-center text-white user-select-none bg-white">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <main style="padding-top: 130px;">

            <button class="btn btn-warning btn-sm" id="Demo">Graph</button><br><br>

            <div class="ct-chart ct-perfect-fourth mx-auto my-auto w-75 h-50 border" id="DGraph" style="display: none"></div>

            <script>
                var data = {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                    series: [
                        [5, 2, 4, 2, 0]
                    ]
                };
                new Chartist.Bar('.ct-chart', data);

                $(document).ready(function () {
                    $('#Demo').on('click', function () {
                        $('#DGraph').show()
                    })
                })
            </script>
        </main>
    </div>
</body>
</html>

what is worng with my code please help me.

Upvotes: 0

Views: 99

Answers (1)

Ravikumar
Ravikumar

Reputation: 2205

Just move chart initialization to inside click

$(document).ready(function() {
  $('#Demo').on('click', function() {
    $('#DGraph').show()
    new Chartist.Bar('.ct-chart', data);
  })
})

Upvotes: 1

Related Questions