How do I change chart.js data with Corvid?

Ask the community
,
1

I am trying to make a nice infographic which shows different numbers per month. Since I thought it’d be the easiest way of doing it I picked chart.js, and created with it this short code:

    <canvas id="myChart"></canvas>

    <script src="https:// cdn.jsdelivr .net/npm/chart.js@2.8.0"></script>
    <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, 5]
                }]
            },

            // Configuration options go here
            options: {}
        });

    </script>

I pasted it into an HTML Iframe and it works, but only static. I’m trying to get the ‘Data’ to be changed through Corvid.

How can I do this?

Thanks.

2

Everything that you want to dynamically change you show replace by a vriable.
For eaxmple, let say you want to change the data, then instead of:

//STATIC DATA
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, 5]
                }]
            }

You should write:

//SDYNAMIC DATA
data: event.data

Then you should post the data from the parent page (by Corvid) to the iframe.
See:

An you should use the window.onmessage event handler to bind the posted data.

3

P.S. I think Yisrael posted an example of Chart.JS in an iframe. You should search for it.