Skip to content

Solidgauge chart #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
aislingvasey opened this issue Mar 19, 2018 · 5 comments
Closed

Solidgauge chart #21

aislingvasey opened this issue Mar 19, 2018 · 5 comments

Comments

@aislingvasey
Copy link

Hi there

I have heat maps and scatter charts working fine using highcharts-angular but i can't get a solidgauge example working.

Error:
RiskWidgetComponent.html:10 ERROR TypeError: c.init is not a function at a.Chart.initSeries (highcharts.js:237) at highcharts.js:261 at Array.forEach (<anonymous>) at a.each (highcharts.js:27) at a.Chart.firstRender (highcharts.js:261) at a.Chart.init (highcharts.js:237) at a.Chart.getArgs (highcharts.js:236) at new a.Chart (highcharts.js:235) at Object.a.chart (highcharts.js:235) at HighchartsChartComponent.updateOrCreateChart (highcharts-chart.component.ts:33)

I have include HighchartsChartComponent directly in my source code to avoid other issues.

I have a custom helper class with this code:
`import * as Highcharts from 'highcharts';

import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

import * as HC_solidgauge from 'highcharts/modules/solid-gauge';
HC_solidgauge(Highcharts);
...

export class HighchartsGaugeComponent {
theChart : any;

Highcharts = Highcharts;
chartConstructor = 'chart';
chartOptions = {

  chart: {
      type: 'solidgauge'
  },

  title: null,

  pane: {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
          backgroundColor: '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
      }
  },

  tooltip: {
      enabled: false
  },

  credits: {
      enabled: false
  },

  plotOptions: {
      solidgauge: {
          dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true
          }
      }
  },

  yAxis: {
      min: 0,
      max: 200,
      title: {
          text: 'Speed'
      }
  },

  series: [{
      name: 'Speed',
      data: [80],
      dataLabels: {
          format: '{y}'
      },
      tooltip: {
          valueSuffix: ' km/h'
      }
  }]

};
// Callback function after the chart is create
chartCallback = (chart) => {
if (this.theChart == null) {
this.theChart = chart;
console.log('Set chart: '+this.theChart);
}
};
// Used to indicate when the chart UI should be updated
updateFlag = false;

...
`
Could you please point out what is incorrect with my code?

Thanks very much.

@KacperMadej
Copy link
Contributor

Hi @aislingvasey

The solid-gauge needs highcharts-more loaded before it. Like in HTML part of this pure JS demo: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-solid/

@aislingvasey
Copy link
Author

How do you do that in Angular using your library?
I thought this loaded it:

@aislingvasey
Copy link
Author

import * as Highcharts from 'highcharts';

@KacperMadej
Copy link
Contributor

The code you posted loads only Highcharts. For solid gauge highcharts-more is required. You could load it before the solid-gauge module like:

import * as HC_more from 'highcharts/highcharts-more';
HC_more(Highcharts);

import * as HC_solidgauge from 'highcharts/modules/solid-gauge';
HC_solidgauge(Highcharts);

@aislingvasey
Copy link
Author

Thanks - will try that out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants