Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67497

How to button click changing the graph dunamically?

$
0
0

Hello, dear friends Changing the graph based on button please share your reference?

here My code is Code

<div class="btn-group">
            <button onclick="myFunction1()"> Hoursly </button>
            <button onclick="myFunction2()"> Days </button>
            <button onclick="myFunction3()"> Weakly </button>         
            <button onclick="myFunction4()"> Months </button>
        </div>

    <script src="public/chartjs/Chart.js"></script>

    <div class="container" id="getText" style="display: none;">
        <canvas id="myChart"></canvas>
    </div>



 <script>

function myFunction() {

based on button click function how to change am not sure about these things.

    var div = document.createElement('canvas');
    div.innerHTML = document.getElementById('myChart').innerHTML;
    document.body.appendChild(div);

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
                data: [1,2,3,4,5,6,7,8,9,10,11,12],
                backgroundColor: "rgba(255, 99, 132, 0.2)",
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}
    </script>

please share your references.


Viewing all articles
Browse latest Browse all 67497

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>