Skip to content
This repository has been archived by the owner on Jul 19, 2019. It is now read-only.

Commit

Permalink
all chart types update with new data passed in
Browse files Browse the repository at this point in the history
  • Loading branch information
jefffriesen committed Feb 16, 2015
1 parent c4593a4 commit 91a3a4f
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 3 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ var MyComponent = React.createClass({
* ```data``` represents the chart data (see [chart.js](http://www.chartjs.org/) for details)
* ```options``` represents the chart options (see [chart.js](http://www.chartjs.org/) for details)
* all other parameters will be passed through to the ```canvas``` element

* if data passed into the component changes, points will animate between values using chart.js' ```.update()```. If you want the chart destroyed and redrawn on every change, pass in ```redraw``` as a prop. For example ```<LineChart data={this.state.chartData} redraw />```

### Other React projects that may interest you

Expand Down
36 changes: 34 additions & 2 deletions lib/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,13 @@ module.exports = {

classData.componentWillReceiveProps = function(nextProps) {
var chart = this.state.chart;
chart.destroy();
this.initializeChart(nextProps);
if (this.props.redraw) {
chart.destroy();
this.initializeChart(nextProps);
} else {
updatePoints(nextProps, chart);
chart.update();
}
};

classData.initializeChart = function(nextProps) {
Expand All @@ -58,3 +63,30 @@ module.exports = {
return React.createClass(classData);
}
};

var dataKeys = {
'Line': 'points',
'Radar': 'points',
'Bar': 'bars'
};

var updatePoints = function(nextProps, chart) {
var name = chart.name;

if (name === 'PolarArea' || name === 'Pie') {
nextProps.data.forEach(function(segment, segmentIndex) {
chart.segments[segmentIndex].value = segment.value;

This comment has been minimized.

Copy link
@mrsln

mrsln May 26, 2015

It needs to be checked whether segmentIndex exists in segments.

});
} else {
var dataKey = dataKeys[name];
nextProps.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
chart.datasets[setIndex][dataKey][pointIndex].value = val;
});
});
}
};




0 comments on commit 91a3a4f

Please sign in to comment.