Cannot read property high-charts of undefined about ember-highcharts

[gregjopa]

The "Overriding Chart Redrawing" code in the README doesn't work anymore (it worked before this commit: adba001). Instead, try overriding the didReceiveAttrs method. Let me know if that works for you.

[mikejerome]

With the following code I get "cannot read property 'redraw' of null":

export default EmberHighChartsComponent.extend({
 
    didReceiveAttrs() {
        this._super(...arguments);
        let chart = this.get('chart');
        chart.redraw();
    }
 
});

What I need to do is redraw the chart when the model changes, because the categories along the x-axis change in chartOptions.

[gregjopa]

I think there is a use case where chart is null with didReceiveAttrs() so we have this check in place (perhaps on initial render): https://github.com/ahmadsoe/ember-highcharts/blob/master/addon/components/high-charts.js#L53.

Also, have you seen the examples in the dummy app? Check out the interactive charts in the dummy app (https://ahmadsoe.github.io/ember-highcharts/). Does the "Update Series Data" button code help solve your use case? https://github.com/ahmadsoe/ember-highcharts/blob/master/tests/dummy/app/components/chart-line-interactive.js#L32. This code does not override anything. Just want to make sure you've seen this example before continuing down the override redraw path.

[mikejerome]

I don't think the example helps me. I'll try to explain my use case:

Template:

{{high-charts chartOptions=chartOptions content=chartData}}

Controller:

    chartData: Ember.computed('model', function() {
        return this.get('model.series');   
    }),

    chartOptions: Ember.computed('model', function() {
         return {
         <snip>
         xAxis: {
             categories: this.get('model.categories')
         }
         <snip>
    }),

The categories in this case are months: [jan, feb, mar, etc]. The user can click a dropdown to select a number of months of data to view, which sets a queryparam ?months=3 or ?months=6 etc which refreshes the model.

If months starts at 3, categories is [jan, feb, mar]. if 6 categories is [jan, feb, mar, apr, may, jun] etc.

The problem is if the chart starts with 3 months, and then the user selects 6 months, the data in the chart updates correctly, but the x-axis now looks like
jan | feb | mar | 3 | 4 | 5
instead of
jan | feb | mar | apr | may | jun
because the new categories in chartOptions aren't being included.

Any idea how I could fix this?

[gregjopa]

I recommend managing your categories in chartData, not chartOptions. Highcharts is flexible and allows you to setup the category data either way. Here's an example:

Categories in chartOptions:

chartOptions: {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Fruit Consumption'
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    allowDecimals: false,
    title: {
      text: 'Fruit eaten'
    }
  }
},

chartData: [
  {
    name: 'Jane',
    data: [5, 0, 20]
  },
  {
    name: 'John',
    data: [25, 30, 15]
  }
]

Categories in chartData:

chartOptions: {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Fruit Consumption'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    allowDecimals: false,
    title: {
      text: 'Fruit eaten'
    }
  }
},

chartData: [
  {
    name: 'Jane',
    data: [
      ['Apples', 5],
      ['Bananas', 0],
      ['Oranges', 20]
    ]
  },
  {
    name: 'John',
    data: [
      ['Apples', 25],
      ['Bananas', 30],
      ['Oranges', 15]
    ]
  }
]

ChartData updates are dynamic so try moving your categories there. Hope this helps.

[mikejerome]

Nice, I think that's exactly what I need. I won't be able to try it until next week but it looks like it will work. Thanks so much for taking the time to help me.

[mikejerome]

That worked perfectly, thank you!

[progand]

@gregjopa Looks like we should use content property specifically for chart series. Could you emphasize this point in docs? I think many people miss it although I've mentioned it:

The content argument matches up with the series option in the Highcharts/Highstock/Highmaps API. Use this option to set the series data for your chart.

It would be great if you show 2 different configs in docs: first one is original highcharts config and second one is properties for ember-highcharts This would be much more clear