0

I am writing SPA Web App in Angular2 & TypeScript. Significant part of the screen is occupied by Highcharts graph area, where there might be several completely different graphs (with different scales, legends, etc. thus, different Options). So originally I specify Options1 (OptionsDflt) there, but then user can interact with app, and it should show Options2 or Options3... So is there a way to change Options (so far it did not work for me, I tried setOptions(), update(), draw() - no luck).

Or does it make sense to put each graph on the panel and operate like a stack of cards?

Here is a snippet of my code, maybe that will help.

So in Angular2.0 page template I define HighCharts graph as:

<chart id="linechart" (load)="saveChart($event.context)" [options]="optionsDflt" ></chart>

then in Constructor I define optionsDflt and options1.

optionsDflt : Object; 
options1 : Object; 
chart1 : any; 

saveChart(chart) {
this.chart1 = chart; 
}

onUserClick() { // that is where it should switch to graph defined by options1
// populate options1 series with data from JSON retrieved from DB
// populate xAxis categories 
this.chart1.xAxis[0].setCategories(this.options1.xAxis.categories, true);

// here I try to set options1 in chart1 - but all 3 lines give me that it "is not a function"
this.chart1.update(this.options1);
this.chart1.setOptions(this.options1);
this.chart1.redraw(this.options1);

this.saveChart(this.options1); // tried that also - did not work
}

Any idea how to set graph to options1 ?

Anything I am doing wrong here?

I am pretty new to Highcharts, and fairly new to Angular2 as well.

Another problem I hit while upgrading that app from Angular 2.0.0 to 2.4.x - it is using TypeScript 2.x, which is much more strict than 1.8, so now I am getting lots of errors like:
Property 'data' does not exist on type 'Object'. //that is from RxJS subscribes
or Property 'series' (or xAxis) does not exist on type 'Object' - well, there is no class Options or Chart, I had to define it as Object. How to resolve those errors? Wait for Ang2-Highcharts to implement it?

Please advise.

TIA, Oleg.

olegkon
  • 65
  • 1
  • 9
  • did you log `this.chart1` inside `saveChart` function? Do you see all those methods? when is your `onUserClick` function called? – Madhu Ranjan Apr 17 '17 at 19:58
  • I can log this.chart1 inside saveChart function. Yes, I do see these methods. onUserClick() called when user clicks one of the buttons on the screen to see different kind of graph. Any idea how to resolve my second problem? (it is more urgent at the moment, since I can't compile that code without errors in 2.4) – olegkon Apr 17 '17 at 22:10
  • I was able to resolve all errors, including Property 'series' (or xAxis) does not exist on type 'Object' by making it "any" instead of Object. I also upgraded to 0.5.5 (as recommended for CLI), and in NgModule imports have ChartModule.forRoot(require('highcharts')) instead of ChartModule. However, it still doesn't show the Graphs themselves. The rest is working fine. Any idea what might be wrong? – olegkon Apr 20 '17 at 20:56

0 Answers0