How can i make a simple chartjs chart with ethereum contract address

Question

i would like to have a chart on my site that prints the last price of a certain erc20 token

i have seen a widget from ethplorer but i rather build my own chart but i cant find any documentation for that.

so far i have this html code(the chart is a sample from chartjs) but i cant figure out on how to add the erc20 contract address

<div class="container">
    <div class="col-md-12 shadow p-2 mb-4 rounded bg-dark">
        <div class="chartjs-size-monitor"
            style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
            <div class="chartjs-size-monitor-expand"
                style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
            </div>
            <div class="chartjs-size-monitor-shrink"
                style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
            </div>
        </div>
        <h6 class="card-text" id="priceChart"> MONTHLY HISTORICAL PRICE +39.31%</h6>
        <canvas id="myChart" height="251" width="944" style="display: block; width: 944px; height: 251px;"></canvas>
    </div>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45]
            }]
        },

        // Configuration options go here
        options: {}
    });
</script>

Answer 1

You can use getBalance method to get the balance of an address:

web3.eth.getBalance(address [, defaultBlock] [, callback])
// Example
web3.eth.getBalance("0x407d73d8a49eeb85d32cf465507dd71d507100c1")
.then(console.log);

Once you have balance, use it in data to plot the line graph as shown here and here.

Hope it will help.