Table of Contents

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

Ana Updated by Ana

These scripts and how to's are not native functionalities. Landbot won't be able to support, help or guarantee these scripts and how to's. These Workarounds and How to's are for developers, as a learning and example material on how to extend or modify some of the platform limitations.Β  Due to platform updates, some scripts might stop working in the future.Please, note that in case of Scripts and Workaround the Custom Success Team do not offer support.

Here is a workaround to display a Chart based on the inputs of the users, you can see a working demo here: DEMO

We used the Chart JS library, for more option please check their documentation

https://www.chartjs.org/docs/latest/charts/radar.html

Only for embedded bots - do not test in preview mode

This is the main view of the flow:

  1. After the Welcome Message, we will create the "labels" of the Chart, chaining Set Variable blocks one after the other:

Each one with it's specific name and value:Β 

  1. Once we have the "labels", we will move on, to set up the questions (Numbers), to get the values from the visitors. In this case we are asking visitors for a numbers between 0 to 10 with Question Number blocks. And we will use the "labels" created early on to use them in the Questions texts.

Each one of the questions like that:

  1. To display the Chart, we will use a Message block, where we will add the HTML to display the Chart and at the same time we will trigger the JS that will build the Chart.

The code is the following:

<div><canvas id="myChart" width="400" height="400"></canvas></div><script>this.loadChart('@data1_label','@data2_label','@data3_label','@data4_label','@data5_label',@data1,@data2,@data3,@data4,@data5)</script>

  1. To display the Chart, we will add the following code in the Design / Advanced / Add JS:

Code:

<script>
    var scriptChart = document.createElement('script');
    scriptChart.setAttribute('src', 'https://cdn.jsdelivr.net/npm/chart.js@2.8.0');
    document.getElementsByTagName("head")[0].appendChild(scriptChart);
    
    var ctx; 
    var myChart; 
    this.loadChart = function (data1_label, data2_label, data3_label, data4_label, data5_label, data1,data2,data3,data4,data5){
    
        console.log(data1,data2,data3,data4,data5)
        console.log(data1_label, data2_label, data3_label, data4_label, data5_label)  
        ctx = this.document.getElementById('myChart').getContext('2d');
        this.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'],
                labels: [data1_label, data2_label, data3_label, data4_label, data5_label],
                datasets: [{
                    label: '',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [data1,data2,data3,data4,data5]
                }]
            },

            // Configuration options go here
            options: {
                tooltips : {
                    enabled: false
                },
                legend : {
                    display: false
                },
                elements:{
                    line:{
                        tension:0,
                        borderWidth:3
                        }
                },
                scale: {
                    ticks: {
                        max: 10,
                        min: 0,
                        stepSize: 2
                    }
                }
            }
    })
    }
</script>

How did we do?

Create Dynamic Shopping Cart with JS and CSS

Different ways to format numbers with JS (WhatsApp)

Contact