Dynamic chart options about ember-highcharts

[gregjopa]

@ahmadsoe thanks for merging my PR. I think this issue can be closed since there is now a recommended approach for dynamic options documented in the readme. Also, here's an example ember app that shows how to extend this plugin: https://github.com/gregjopa/ember-reporting-example.

[ahmadsoe]

We don't need to re-draw the entire chart to change the chart options. Highcharts have internal API for dynamically modifying the chart including the options after rendering.

Maybe you could setup the itemController directly in the template and call the API depending on your need.

[martinstannard]

Not sure I understand your comment about setting up the itemController in the template? I see the API, which looks useful, but wouldn't exposing the internals of the Highcharts component go against the princple of encapsulation that components are based on?

[lolmaus]

It seems this is fairly simple to implement.

The only thing that i struggle to figure out is which Highcharts initialization options correspond to which Highcharts instance methods and their arguments.

[ahmadsoe]

@martinstannard please ignore my last comment about the itemController. Have you found the good solution for this issue? maybe you could share your experience on this with us, as i have not tried it yet.

@lolmaus if we can "observers" on those options then we can just redraw the charts.

[martinstannard]

@ahmadsoe here's my simple implementation - martinstannard@16e2d85 and martinstannard@5a76c20.

Basically I've setup a flag which I observe and call drawLater whenever it changes. The main drawback is I have to manually toggle the flag within my app, but that keeps the implementation very simple.

[lolmaus]

@martinstannard: uhm, why don't you observe chartOptions directly? Just make sure to update it via this.set, then you don't need a weird custom property whose content does not reflect state.

[poteto]

As an aside, you can redraw the chart which should avoid any potential DOM thrashing:

get(this, 'chart').redraw();

[martinstannard]

@lolmaus I could observe chartOptions but if I then only change one of values within the options, the observer will not fire. AFAIK there is no easy way within Ember to observe all the attributes of a object without up an observer for each attribute. Hence my admittedly ugly workaround.

@poteto - thanks for pointing out the redraw method. Looks like I should just call that instead of this hackery...

[lolmaus]

@martinstannard,

var newObject = Ember.copy(this.get('somePlainObject'));
newObject.foo = 'bar';
this.set('somePlainObject', newObject);

I would suggest propertyDidChange instead of cloning the object, but it doesn't work for some reason. :(

[20v100]

@martinstannard, did you settle on a solution? Did "get(this, 'chart').redraw();" worked for you? The title of my chart is "undefined" at initial rendering. I'm trying to redraw the chart after the title has been defined with no success.

[poteto]

@20v100 Sorry, I didn't mention that .redraw() (from the Highcharts API) only redraws when "changes have been done to the data or axis extremes", i.e. updating the title isn't a "redrawable" event. You will probably have to directly use get(this, 'chart').setTitle(...) instead

[20v100]

@poteto You are fantastic! Worked like a charm.

[gregjopa]

We have a similar use case where the chart subtitle and series name need to be dynamic. Is there a way to extend this component to call setTitle() when the content changes? @20v100 did you fork this repo to get setTitle() to work or were you able to extend this component?

I've tried the extending approach but it never changes the chart title. Here's my code:

import Ember from 'ember';
import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';

export default EmberHighChartsComponent.extend({

  dynamicContent: Ember.computed('content', function () {
    if (this.get('chart')) {
      var name = this.get('content')[0].name;
      this.get('chart').setTitle({ subtitle: name });
    }

    return this.get('content');
  })

});

Here's a simple demo of my use case that does not use ember: https://github.com/gregjopa/ember-reporting-example/tree/master/public/plain-js-app. My goal is to accomplish the same thing using ember-cli with this plugin.

[gregjopa]

I got this working by extending this component. Here's a working ember-cli app that dynamically updates the chart subtitle and series name with this addon: https://github.com/gregjopa/ember-reporting-example.

I took the approach of extending this component, observing changes to the model, then updating the chart titles, and redrawing the chart:

import Ember from 'ember';
import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';

export default EmberHighChartsComponent.extend({

  dynamicContent: Ember.computed('content', function () {
    var chart = this.get('chart');

    if (chart) {
      // when re-rendered update the chart subtitle and series name
      var repo = this.get('content')[0].name;
      chart.series[0].update({ name: repo }, false);
      chart.setTitle(null, { text: 'Repo: ' + repo }, false);
      chart.redraw();
    }

    return this.get('content');
  }),

  dynamicChartOptions: Ember.computed('chartOptions', function () {
    // when first rendered update the chart subtitle
    var repo = this.get('content')[0].name;
    this.get('chartOptions').subtitle.text = 'Repo: ' + repo;
    return this.get('chartOptions');
  })

});

However, there is a problem with this approach. I think chart.redraw() is getting called twice which screws up the chart animation. This addon redraws when the chart data changes using series.setData() and then my code also redraws to handle the title changes. Ideally we should only be redrawing once.

Should this addon be responsible for handling updates to titles/labels? If not, can a config option be added to this addon to disable redrawing when the chart data changes and instead the developer is responsible for redrawing? The developer can handle redrawing when the data changes by extending this component. I'm happy to send a PR for this. Just need some guidance on which design to go with.

[ahmadsoe]

@gregjopa I think option to disable redrawing the chart is good to go.
I'm also happy to accept your PR if you want implement handling updates to title and axis label manually with Highcharts API.

[gregjopa]

@ahmadsoe I've been thinking more about this and I don't think a disable redrawing method is necessary. Instead, the contentDidChange method can be overridden by extending this addon. I sent PR #24 that adds documentation to the readme about how to use this approach.

Regarding adding logic to handle updates, I think there are quite a few use cases to handle series, axis, and title label changes. It may be best to keep this addon's codebase small and make the user override it to add custom redraw logic.

[ahmadsoe]

@gregjopa well, it seems best approach for now. I'm fine with this, as I rarely updates title or chart label on my apps :)

[ahmadsoe]

@gregjopa sure, thanks.

@martinstannard I'll close this issue for now, you could try @gregjopa 's approach for your problem.