Overriding Chart Redrawing: Beginner question about ember-highcharts

[ahmadsoe]

That's strange, it should work fine.

In a "parent" component template I put:
{{dynamic-high-charts content=radialChartData chartOptions=radialChartOptions}}

What do you mean by "parent" component template?

[SirZach]

I'm not entirely sure, just guessing here, but maybe you need to call this._super.apply(this, arguments) in your contentDidChange to ensure whatever it was doing still happens. If that doesn't do it we'll probably need to see more code.

[20v100]

With using this._super.apply(this, arguments) , I was able to have a successful initial rendering of the chart on some occasions with no errors (not sure why) but the chart always crashed when it was updated with new content after the initial rendering. The code in the dynamic-high-charts component look like this:

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

    export default EmberHighChartsComponent.extend({

      contentDidChange: Ember.observer('[email protected]', function() {
        // add redraw logic here. ex:
        var chart = this._super.apply(this,  this.get('chart')); //Now with _super
        var seriesName = this.get('content')[0].name;
        chart.series[0].update({ name: seriesName, data: this.get('content')[0].data }, false);
        chart.setTitle(null, { text: seriesName }, false);
        chart.redraw();
      })
   });

The below code is run each time the activeDate is changed:

  [....]
  radialChartData: null,

  //Select the data range to be distplayed into to the widget
  radialChartDataUpdate: function() {
    var _this = this;
    var value = 1;
    var target = 2;

    //Get all the statistics  
    if (!_this.get("statVal.target")) { //If no data create one entry for the chart
      value = 1; 
      target = 0; 
    } else {
      if ( _this.get("statVal.target") > _this.get("statVal.value") ) {
        value = _this.get("statVal.value"); //Set the value of the radial chart
        target = _this.get("statVal.target") - _this.get("statVal.value");
      } else {
        value = _this.get("statVal.value"); //Set the value of the radial chart
        target = 0;
      }
    }
   //Set the array used as the content for the dynamic-high-chart
    _this.set("radialChartData", [{
        type: 'pie',
        name: 'Radial',
        data: [
          ["un", value],
          ["deux", target]
        ]
      }]
    );
  }.on('didInsertElement').observes('activeDate,stat'),

In the above code, the radialChartData property is used to provide the date to the dynamic-high-charts component like this (this component "radial-chart" is what is was alluding to when saying parent component):

<!-- This component display a widget for input statVal value and target -->
<div class="v-radial-container p-t-30">
  <div class="v-radial-chart full-width full-height">
    {{dynamic-high-charts content=radialChartData chartOptions=radialChartOptions}} <!-- Radial chart aound the input area that show the statVal value and target -->
  </div>
</div>

The value and target variables are not null when the code is run. To test, I did replace value and target with number "1" and "2" and I still get the same error when changing the activeDate value. Here is the "test" code:

   radialChartDataUpdate: function() {
    var _this = this;
    var _radialStatVals = []; //Array used to display the radial chart
    var value = 1;
    var target = 2;

    //Get all the statistics  
    if (!_this.get("statVal.target")) { //If no data create one entry for the chart
      value = 1; 
      target = 0; 
    } else {
      if ( _this.get("statVal.target") > _this.get("statVal.value") ) {
        value = _this.get("statVal.value"); //Set the value of the radial chart
        target = _this.get("statVal.target") - _this.get("statVal.value");
      } else {
        value = _this.get("statVal.value"); //Set the value of the radial chart
        target = 0;
      }
    }
    _this.set("radialStatVals", _radialStatVals);
    _this.set("radialChartData", [{
        type: 'pie',
        name: 'Radial',
        data: [
          ["un", 1], //REPLACED THE VARIABLE BY NUMBERS
          ["deux", 2] //REPLACED THE VARIABLE BY NUMBERS
        ]
      }]
    );
  }.on('didInsertElement').observes('activeDate,stat'),

The error that I get is: Uncaught TypeError: Cannot read property 'series' of undefined

If I replace the component {{dynamic-high-charts... }} by {{high-charts... }} then it work fine (but I cannot dynamically update the chart...). Let me know if you need more code or info.

This is the options for the chart:

//Set the options to create the radial Highcharts
radialChartOptions: {
  chart: {
    type: 'pie',
    backgroundColor: 'transparent',
  },
  title: {
    text:''
  },

  plotOptions: {
    pie: {
      shadow: false,
      center: ['50%', '50%'],
      size: "100%",  
      innerSize: "90%",
      dataLabels: {
        enabled: false
      },
      showInLegend: false,
      colors: ['#60b3f4','#daeffd'],
      borderColor: '#f1f3f3'
    },
    tooltip: {
      enable: false
    },sd
  },  
},
});

Also, when I pause the debugger inside the dynamic-high-charts component, I can see the content is there and accessible. the expression this.get("content")[0].name return: array[2]

[ahmadsoe]

@20v100 have you tried to check null value of chart or content property on contentDidChange ?
see https://github.com/ahmadsoe/ember-highcharts/blob/master/addon/components/high-charts.js#L37-L39

[20v100]

@ahmadsoe Your suggestion worked. Here is my code:

export default EmberHighChartsComponent.extend({

  contentDidChange: Ember.observer('[email protected]', function() {
    // add redraw logic here. ex:
    if (!(this.get('content') && this.get('chart'))) {
      return;
    }
    var chart = this.get("chart");
    if (!chart.series[0]) {
      return;
    }
    var seriesName0 = this.get('content')[0].name;
    chart.series[0].update({ name: seriesName0, data: this.get('content')[0].data }, false);
    chart.setTitle(null, { text: seriesName0 }, false);
    chart.redraw();
  })
});

Thank you for your help!