Add a Chart (with Chart JS library) in your bot

What if you want to embed some charts in your bot?

It’s possible with just a few steps!

You can see a working demo here: DEMO

We make use of the Chart JS library, for more options, please check their documentation.

Step 1. Enable developer mode

Step 2. Create a chat text of type HTML, and add such code:

<canvas id="myChart" width="100%"></canvas>
<script>
function loadChart()
{
    var ctx;
    var myChart;
        //console.log(data1,data2,data3,data4,data5)
        //console.log(data1_label, data2_label, data3_label, data4_label, data5_label)
        ctx = document.getElementById('myChart').getContext('2d');
        chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'radar',

            // The data for our dataset
            data: {
                labels: ['Aspecto 1', 'Aspecto 2', 'Aspecto 3', 'Aspecto 4', 'Aspecto 5'],
                datasets: [{
                    label: '',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [3,3,3,3,3]
                }]
            }
    })
}
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0" onload="loadChart()"></script>

Where the loadChart functionprepares the data and initializes the chart.

If you want to give the user more time for working with the chart, you can use the button step type to pause the chat.

You can also just increase the message delay for the chart text.

This is it! Enjoy the power of the Chart JS!.

Edit this page