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

Commit

Permalink
Allow custom chart types.
Browse files Browse the repository at this point in the history 
This changeset exposes the `createClass` method in `lib/core`, and adds a third argument to it so that you can pass the `dataKey` value that was previously fixed in the `dataKeys` variable.

E. g. if you want to use https://github.com/Regaddi/Chart.StackedBar.js, you would do something like `var StackedBarChart = require('react-chartjs').createClass('StackedBar', ['getBarsAtEvent'], 'bars');` (provided you previously registered `StackedBar` with Chart.js, of course).
  • Loading branch information
@tcard
tcard committed Mar 20, 2015
1 parent 24bfcd4 commit eb2c1f0
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 5 deletions.
3 changes: 2 additions & 1 deletion index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ module.exports = {
Line: require('./lib/line'),
Pie: require('./lib/pie'),
PolarArea: require('./lib/polar-area'),
Radar: require('./lib/radar')
Radar: require('./lib/radar'),
createClass: require('./lib/core').createClass
};
8 changes: 4 additions & 4 deletions lib/core.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
createClass: function(chartType, methodNames) {
createClass: function(chartType, methodNames, dataKey) {
var classData = {
displayName: chartType + 'Chart',
getInitialState: function() { return {}; },
Expand Down Expand Up @@ -40,7 +40,8 @@ module.exports = {
chart.destroy();
this.initializeChart(nextProps);
} else {
updatePoints(nextProps, chart);
dataKey = dataKey || dataKeys[chart.name];
updatePoints(nextProps, chart, dataKey);
chart.update();
}
};
Expand Down Expand Up @@ -82,15 +83,14 @@ var dataKeys = {
'Bar': 'bars'
};

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

if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
nextProps.data.forEach(function(segment, segmentIndex) {
chart.segments[segmentIndex].value = segment.value;
});
} 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;
Expand Down

5 comments on commit eb2c1f0

@ryasmi
Copy link

@ryasmi ryasmi commented on eb2c1f0 Aug 28, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do you register StackedBar with Chart.js? @tcard

@ryasmi
Copy link

@ryasmi ryasmi commented on eb2c1f0 Aug 28, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

classData.initializeChart requires Chart.js, as far as I can see you can't register anything.

@tcard
Copy link
Contributor Author

@tcard tcard commented on eb2c1f0 Aug 31, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ryansmith94 Sorry for the late response, I wasn't around a keyboard.

tl;dr: Just by including it.

I can see that now StackedBar registers itself as soon as you require or <script> it.

This didn't work like this when I wrote this commit. Back then, it required a Chart in the global scope. In fact, I had to manually edit the code for Chart.StackedBar.js to be able to use this with CommonJS modules (for Node.js and Browserify), something like this:

module.exports = function(Chart){
  "use strict";

  var root = this,
    helpers = Chart.helpers;

  var defaultConfig = {
  // ...

And then do this:

require('../../components/Chart.StackedBar')(require('chart.js'));

And that's what I meant by "registering", I guess.

(I may have gotten something wrong in this history. I've pretty much forgot everything about this project in those months.)

@ryasmi
Copy link

@ryasmi ryasmi commented on eb2c1f0 Sep 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @tcard. No worries. Ok thanks, I'll give that a try when I get a spare minute. Thanks for the history too 👍

@ryasmi
Copy link

@ryasmi ryasmi commented on eb2c1f0 Sep 1, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andrewhickey @daniel-abbey might be useful for you to know this if I don't get time to try this.

Please sign in to comment.