Data not updating on chart

[samselikoff]

Is there a trick to getting the chart to update when the data has changed? I have a simple

{{chartist-chart type='pie' data=pieData}}

in my template, but the chart isn't updating when pieData changes.

Thanks!

[samselikoff]

I see the example that includes the update method. I think charts should respond to data changes by default, and perhaps allow users to put update=false if they're worried about perf penalty for setting up bindings if they happen to not want them.

Would you accept a PR for this?

[samselikoff]

I'm also having trouble getting the example of extending ChartistChart to work. I'm getting an error in the #update method about optionsProvider being undefined.

[tylergaw]

Thanks @samselikoff for the first thing, yep would totally accept a PR. Have been thinking the same thing. In a project I'm using this I have this todo for myself:

// TODO: This can probably be abstracted to ember-cli-chartist
  updateChart: function () {
    this.get('chart').update(this.get('data'));
  }.observes('data')

So, yeah. Updating the chart when the data updates by default makes sense, and like you said, having the option to not update would be great.

Not sure about the error you're seeing when extending. I'll have a look to see if I can replicate it.

[samselikoff]

Thanks @tylergaw. That updateChart method, is that in a subclass of ChartistChart?

[tylergaw]

It is, yeah. Here's the full class for context (minus the imports and a couple function declarations)

export default ChartistChart.extend({
  templateName: 'components/chart/base',
  error: false,
  loading: true,

  init: function () {
    var opts = {
      query: this.get('query')
    };

    getData(opts).then(function (data) {
      if (data.error) {
        this.onError(data);
      } else {
        this.set('data', data);
      }

      this.set('loading', false);

    }.bind(this));

    this._super();
  },

  onError: function (error) {
    this.set('error', error);
  },

  // TODO: This can probably be abstracted to ember-cli-chartist
  updateChart: function () {
    this.get('chart').update(this.get('data'));
  }.observes('data')
});

Should mention too that this is a base component that I then extend to create the specific chart components. In those I set the options, responsiveOptions, etc.

[samselikoff]

I'm still having trouble, it has something to do with the options.

To start simple, shouldn't this work?

import ChartistChart from './chartist-chart';

export default ChartistChart.extend({
  type: 'pie',
  data: {
    series: [1, 2, 3]
  }
});

[tylergaw]

I think it's due to the data structure. Chartist expects a pretty specific structure. Give this a try:

...
data: {
    labels: [
       ['one', 'two', 'three']
    ],
    series: [
       [1, 2, 3]
    ]
}
...

I think you have to include the labels, though it could possibly be an empty array (edit: you don't for a pie chart). Series does need to be an array of arrays.

[tylergaw]

I need to point this out in the readme better. There's a test up with the project. Here's a full example from that: https://github.com/tylergaw/ember-cli-chartist/blob/master/tests/dummy/app/components/chart-fish-over-time.js

[samselikoff]

Ah I missed that. Now I'm having trouble getting it working with pie type, any hints? I tried

function getData () {
  return {
    series: [5, 3, 4]
  };
}

according to the docs but no dice.

[tylergaw]

Ahh, right the structure for pie charts only as one series. Forgot about that. I'll have a look to see what I can find here. I haven't been using this with pie charts yet so it's certainly possible I've left something out.

[tylergaw]

I'm taking a look at this now, definitely something wrong with trying to extend ChartistChart and set the type to "pie". Creating a pie chart without extending still works {{chartist-chart type="pie"}}.

I'm going to open a separate issue for this. Thanks for finding it.

[tylergaw]

@samselikoff I did more research on the issue of extending ChartistChart to create a pie chart. I opened #11 because I was seeing errors, but it turned out to be me providing the wrong data structure. I added an example in the dummy app showing how to extend and use similar data that you are above: https://github.com/tylergaw/ember-cli-chartist/blob/master/tests/dummy/app/components/pie-i-like.js

You can also see that live. I added details in the readme on that https://github.com/tylergaw/ember-cli-chartist#live-examples

[tylergaw]

@samselikoff I'm gonna go ahead and close this. It's in 0.2.5. I've been working with it for a few beta releases. The Chartist lib had a couple bugs in it that were being worked out. The latest 0.7.1 feels pretty solid.

[samselikoff]

no prob, sorry I haven't followed up I haven't had time to come back to this. I'll let you know if I run into any problems in the future.

Thanks!