Multiple solid gauge charts on page with different chart options about ember-highcharts

[gregjopa]

You can use this addon to render several chart gauges on the same page. I think the .on('init') method is over complicating things. Instead, you just need to define separate chartOptions and content for each chart gauge. For example, in your controller/component your setup would something look like this:

export default Ember.Controller.extend({

  chartOptions1: {
    chart: {
      type: 'solidgauge'
    },
    // add content
  },

  chartData1: [
    // add content
  ],


  chartOptions2: {
    chart: {
      type: 'solidgauge'
    },
    // add content
  },

  chartData2: [
    // add content
  ],


  chartOptions2: {
    chart: {
      type: 'solidgauge'
    },
    // add content
  },

  chartData2: [
    // add content
  ],

  // add chartOptions3, chartOptions4, etc

});

{{chart-solid-gauge content=chartData1 chartOptions=chartOptions1}}
{{chart-solid-gauge content=chartData2 chartOptions=chartOptions2}}
{{chart-solid-gauge content=chartData3 chartOptions=chartOptions3}}

First try and get things working with this approach. Then after that, you can dry things up. For example. if your chartOptions are very similar for all 8 chart gauges than they can all share the same chartOptions and you can make certain attributes of those configurable. You can do this by making chartOptions a computed property:

export default Ember.Component.extend({

  chartOptions: Ember.computed(function () {

    return {
      chart: {
        type: 'solidgauge'
      },
      title: {
        text: this.get('title')
      },
      ...
    }

  })

  ...

});

{{chart-solid-gauge content=chartData1 chartOptions=chartOptions title="custom title 1"}}

[zion]

Thanks @gregjopa!

I was getting frustrated with getting this to work. I really like the approach of the computed properties, thats essentially exactly what I wanted to do! I got it working now!

[gregjopa]

Happy to help!

[zion]

I'm noticing that when the value for the gauge changes, the gauge resets to 0 then goes back up to the newly changed value. Is there a way to adjust the gauge at its current value and animate it to the new value, rather than going back to 0 first?

[gregjopa]

We currently call redraw when updating chart data: https://github.com/ahmadsoe/ember-highcharts/blob/master/addon/components/high-charts.js#L96. This is probably causing the gauge to redraw from 0 everytime. The tricky thing with updating chart data with highcharts is every chart type has different updating logic. This addon currently does not support every use case.

You can extend this component and override the didReceiveAttrs() method to have custom updating logic. I think you will need to call point.update(num) similar to this demo: http://www.highcharts.com/demo/gauge-solid

[zion]

Its not the end of the world, would just be nice, I'll give that approach a try. Thanks again!