Table of Contents

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

Pau Sanchez Updated by Pau Sanchez

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

In Landbot 3 (only for embedded bots - do not test in preview mode)

This is 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>

In Landbot 2 (legacy)

This is 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>setTimeout(function(){loadChart('data1_label','data2_label','data3_label','data4_label','data5_label',data1,data2,data3,data4,data5)},1000)</script>

It's is very important that the parameters (like data1_label ) are selected from the Variables selector:

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

Code:

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
    
    var ctx; 
    var myChart; 
    function loadChart(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 = 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'],
                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>

Template

You can check the template linked below to see how the bot is set up. This template allows for more than 1 chart to be created. That is why you will see a slight difference in the code implementation.

Just click here for the template

How did we do?

Contact