Skip to content
This repository has been archived by the owner on Nov 26, 2022. It is now read-only.

Dynamic update of graph #6

Closed
PunkSage opened this issue Sep 18, 2014 · 12 comments
Closed

Dynamic update of graph #6

PunkSage opened this issue Sep 18, 2014 · 12 comments

Comments

@PunkSage
Copy link

Is it possible to update the data dynamically without re-rendering the whole graph from scratch?

@carlcraig
Copy link
Owner

This is something we could potentially do, but it is a little complicated. Currently the directive will destroy/create the chart whenever the scope changes.

Chart.js takes the inital data, and creates new objects on the chart object, so they loose some of the structure that we have in $scope.data

Example:

  $scope.data = {
      labels: [1, 2, 3, 4, 5, 6, 7],
      datasets: [
          {
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              data: [65, 59, 80, 81, 56, 55, 40]
          }
      ]
   }

// Chart.js is using this data we provide, and creating new objects 
// on the chart object for these points.
// e.g. the first point on a line chart could be accessed
myLineChart.datasets[0].points[0].value; // should be 65
// to change we could do:
myLineChart.datasets[0].points[0].value = 10;
myLineChart.update(); // would update without destroying/recreating the chart.

There is no way for us to reload the $scope.data into the chart, without either:

  • looping through the whole dataset and updating each point/segment on the chart.js object (like in example above
  • destroying the chart, and re-creating it.

Chart.js allows us to add/remove/update data (one point at a time, i have not seen any way to bulk update).

It could be interesting to concept a "live update" style feature.
Potentially we could analyze the difference between $scope.data and try to add/remove/update accordingly?

Currently you can retrieve the Chart.js object from the directive like this:

$scope.chart = null;
<canvas tc-chartjs chart-type="line" chart-data="data" chart-options="options" chart="chart">
</canvas>

The chart="variable" will force the app to update that variable with the chart.js object when it is created.

You would want to run some watch on chart variable to know when it is created:

$scope.$watch("chart", function( new, old ) {
   // do something
}

@carlcraig
Copy link
Owner

I think, this would be a nice thing for us to solve.

Potentially we should look at a way of analyzing the differences in oldValue and newValue when the $scope.data is updated, so that we can add/remove/update points without destroying the original chart.

@albertpak
Copy link

+1 for this feature

@mainakae
Copy link

+1 for this feature!

@krgauthi
Copy link

krgauthi commented Dec 1, 2014

+1 I'm playing with this now if I come up with something Ill make a gist or PR.

@nvurgaft
Copy link

Also +1

@mattjpenman
Copy link

Have to add my +1 - pretty keen for this

@albertpak
Copy link

🎱

@carlcraig
Copy link
Owner

I will take a look at some solution for this when i have time. If anyone else has some ideas on how to solve this, feel free to put together a PR, or some examples.

@dmackerman
Copy link

This is pretty crucial. Destroying the chart and re-creating almost seems more expensive than updating data points under the hood, especially in a UI where interaction and graphs are very frequent.

@cupofjoakim
Copy link

Another +1 from me. It feels very odd not to have this feature as it kind of goes against the angular-mentality.

@carlcraig
Copy link
Owner

Closing, as opened new issue for implementing this #43 can move any further discussion to that issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants