Chart added using Chart.JS appears and disappears (HTML5 Canvas)

New Here ,
Oct 06, 2020 Oct 06, 2020

Copy link to clipboard

Copied

Hi all, I've tried to add a chart using Chart.JS in my HTML5 Canvas project. The chart does appear for 1-2 seconds but then disappears again. It becomes visible again when you hover the mouse over the area where the chart should be as you can see in the below picture. 

adobeanimate-charts.gif

The chart.js library was loaded via a CDN link under global include and the code that I used for creating the chart on the frame is:

var _this = this;
this.stop();

MyContainer = new createjs.Container(); 
stage.addChild(MyContainer);

const chartCanvas = document.getElementById("canvas");
const canvasContext = chartCanvas.getContext("2d");
const chartBitmap = new createjs.Bitmap(chartCanvas);

var myChart = new Chart(canvasContext, {
  type: 'bar',
  data: {
    labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"],
    datasets: [{
      label: '# of Tomatoes',
      data: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1],
      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)',
        '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)',
        '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: {
    responsive: false,
    scales: {
      xAxes: [{
        ticks: {
          maxRotation: 90,
          minRotation: 80
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

MyContainer.addChild(chartBitmap);
MyContainer.update();

Any idea what could cause this and how to resolve this issue? Any suggestions or help would be great ly appreciated!

Thanks!

TOPICS
Code , How to

Views

1.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Oct 06, 2020 Oct 06, 2020
Any attempt to use a third-party canvas library with Animate is going to be an advanced technical challenge, because CreateJS takes absolute control over the canvas. Off the top of my head, you might try creating a placeholder movieclip, set it to cache as bitmap, retrieve the cached canvas, then use that canvas as the charting library's render target. That could work.

Likes

Translate

Translate
Adobe Community Professional ,
Oct 06, 2020 Oct 06, 2020

Copy link to clipboard

Copied

Any attempt to use a third-party canvas library with Animate is going to be an advanced technical challenge, because CreateJS takes absolute control over the canvas.

 

Off the top of my head, you might try creating a placeholder movieclip, set it to cache as bitmap, retrieve the cached canvas, then use that canvas as the charting library's render target. That could work.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 10, 2020 Oct 10, 2020

Copy link to clipboard

Copied

Thanks ClayUID, appreciate the answer and insight!

My expereince with HTML5 Canvas and CreateJS is still a bit limited so I will have to take some time to see if I can make that work!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 03, 2021 Sep 03, 2021

Copy link to clipboard

Copied

LATEST

Hi Frans van Eck,

I'm encoutering the same issue with chartjs and Animate, would you share the solution you found to solve the problem?

Thank you in advance

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

@ClayUUIDI did as you said, the cached canvas render the chart just fine. But when I hover the chart, the tooltip and some effect of chartjs didn't show up.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines