0

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>
6
  • Can you please be a bit more specific? I think you want to interact with your smart contract from frontend?
    – Yahya
    Nov 13 '19 at 22:59
  • no i dont want to interact with the smart contract i just want to make a price chart of the contract balance
    – bitconnect
    Nov 13 '19 at 23:02
  • how you are getting the last token price in your frontend code? please provide more details why do you want to add contract address if you don't want to interact with it.
    – Yahya
    Nov 14 '19 at 8:36
  • through web3 and javascript- i do nothing with the contract address i just show the balance on the UI as Info. I dont know how to get contract balance inside a chart.
    – bitconnect
    Nov 14 '19 at 8:41
  • if you just want to get the balance of an account, use balanceOf function from the smart contract and pass an address to get the token balance for that account.
    – Yahya
    Nov 14 '19 at 8:47
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.