Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Graph no longer animates the curve. #12

Open
ljordan51 opened this issue Jun 22, 2020 · 3 comments
Open

Graph no longer animates the curve. #12

ljordan51 opened this issue Jun 22, 2020 · 3 comments
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@ljordan51
Copy link
Contributor

No description provided.

@anushadatar anushadatar added bug Something isn't working good first issue Good for newcomers labels Feb 4, 2021
@anushadatar
Copy link
Contributor

@ljordan51 Can you elaborate more here?

@ljordan51
Copy link
Contributor Author

ljordan51 commented Feb 28, 2021 •
edited
Loading

Ya, something about some update we made to the web app logic stops the curve on the graph from animating (basically the points show up from left to right and there's an animation of the curve being drawn). You can see the old behavior in this fiddle: https://jsfiddle.net/3L1j0w9t/#&togetherjs=3wdMUmQpFB. Not sure if this behavior should be "desired" or not. I think it looks cool and adds a fun interactive aspect.

The relevant code to start looking at is here: https://github.com/airpartners/aq-web-client/blob/master/src/PollutantsComponent.js#L59. This is where we set the chart options I believe and it says animationEnabled: true but in practice that doesn't appear to be the case. Not sure how CanvasJS decides when to animate again? Maybe it's something about the way we update the data series that causes it not to animate each time. I don't really know.

fiddle code in case the link breaks:

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {

      animationEnabled: true,  //change to false
	  	title:{
      text: "Earthquakes - per month"
      },
       data: [
      {
        type: "line",

        dataPoints: [
        { x: new Date(2012, 00, 1), y: 450 },
        { x: new Date(2012, 01, 1), y: 414 },
        { x: new Date(2012, 02, 1), y: 520 },
        { x: new Date(2012, 03, 1), y: 460 },
        { x: new Date(2012, 04, 1), y: 450 },
        { x: new Date(2012, 05, 1), y: 500 },
        { x: new Date(2012, 06, 1), y: 480 },
        { x: new Date(2012, 07, 1), y: 480 },
        { x: new Date(2012, 08, 1), y: 410 },
        { x: new Date(2012, 09, 1), y: 500 },
        { x: new Date(2012, 10, 1), y: 480 },
        { x: new Date(2012, 11, 1), y: 510 }
        ]
      }
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

@Inkering
Copy link
Contributor

piling on on more documentation after digging around:

Looks like it could be something about the react component lifecycle perhaps?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Inkering @anushadatar @ljordan51