ChartJS canvas and VisualNeo canvas tagging

#1 · September 19, 2019, 1:21 am

Hi @luishp,

I'm exploring the ChartJS but got a problem in tagging the container/canvas. A sample script was taken directly from ChartJS documentation page, shows:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {

I tried adding statements like:

containername="Container1";
var ctx = document.getElementById(containername+"Canvas");

to replace and then use

window["Canvas"+containername].add(myChart);

at end of the script... but there was an error. How do we 'port' the html canvas to VisualNeo Web correctly, to allow the chart to be displayed...

#2 · September 19, 2019, 9:20 am

@ronnie take a look a the attached sample.
For simplicity I have added the ChartJS library from a CDN to:
Project > Properties > Advanced > Head

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

I have added just an empty Container and a Button to the project-
Note that FabricJS plugin creates its own canvas element when initialized but here we do not have one yet.
As the Container do not have any <canvas> I have created it through a simple script:

SetObjectHTML "Container1" "<canvas id='myChart' width='400' height='400'></canvas>"

Now we have a Canvas with name "myChart".
At this point you can use any ChartJS sample, like this one:

BeginJS
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
EndJS

Let me know if you have any doubt.

Uploaded files:

You need to login to have access to uploads.

#3 · September 19, 2019, 9:49 am

Also take a look at the FabricJS Plugin Source File (Attached)
I hope it will help you understand how it works.
Note that this was one of my very first plugins but it's also quite complete.

Uploaded files:

You need to login to have access to uploads.

#4 · September 19, 2019, 1:14 pm

Hi @luishp, the ChatJS sample works great!

Had a minor "server" issue with the sample demo linking ChartJS from CDN. But once I manually included the Chart-min.js file in Project > Properties > Libraries/Files area, your demo works great.

Thanks again.

ChartJS canvas and VisualNeo canvas tagging - Forum

ChartJS canvas and VisualNeo canvas tagging