-
Notifications
You must be signed in to change notification settings - Fork 63
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
Question: HighStock + Highcharts Modules #34
Comments
This should help you with the exporting module: Highstocks is unfortunately not available yet. |
I will release Highstocks and Highmaps support with the release of angular 4. |
thanks! |
When will Highstocks be available for ang 4.0.x? |
By when can we expect the support for Highstocks and Highmaps? |
Hi all, im very busy atm, but i will inform you here when its done. What you can do for now is, to extend the Highcharts module: https://github.com/cebor/angular-highcharts#using-highcharts-modules import { Highcharts } from 'angular-highcharts';
require('highcharts/highstock')(Highcharts); |
How to use Exporting in Anuglar4 |
import { Highcharts } from 'angular-highcharts';
require('highcharts/modules/exporting')(Highcharts); |
I seen that But Can I use it like this in Component.. Where I can add this in AngularCLI version |
main.ts should work. |
Trying the same here.
be somewhere in app.module.ts? An example would be great where and how exactly to put those values and how to use them in the component |
Yes app.module.ts is a great place to put these lines. But Highstocks is not fully supported jet. |
I'm doing it that way to use highchart, i've tried Highstocks, work for me! Before it is available for ang 4.0.x, hope that'll be help. |
@Hulva Good Catch, i will do some tests, an update the readme accordingly. |
Seems that |
Using the src files directly should work without typings or declarations: Example: import { Highcharts } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
exporting(Highcharts) |
Just out of curiosity, is the Hightstocks availability is planned in the near future? I am anxious to play with it :). |
Initial Highstock & Highmaps support landed in https://github.com/cebor/angular-highcharts#highstock--highmaps-support |
I currently get an error while trying to use highstock. The module is as follows:
The console says:
|
import highstock from 'highcharts/modules/stock.src' this should work. |
@cebor Somehow it cant find the stock.src file. I instal;led highcharts trough npm. |
highcharts version ? |
@cebor nvm, I was stupid. Forgot the .src.js. Thanks man for your hard work! The library is easy enough to understand :D |
@cebor somehow its still not working. The call new StockChart({}) initializes an object with only options in it. chart.ref returns undefined. Copying and pasting the single line demo fro m the website gives me an error about 'cannot call normalize from undefined'. This means that the chart object is somehow not properly initialized when new StockChat is called. If I add the series attribute, it gets undefined somehow. before that, everything gets shown (white panel with greyed out options) |
This is the module right now. import { NgModule } from '@angular/core';
import { UiModule } from '../ui.module';
import { SingleSensorChartHComponent } from './single-sensor-chart-H.component';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src'
import highstock from 'highcharts/modules/stock.src'
@NgModule({
imports: [
UiModule,
ChartModule,
],
declarations: [
SingleSensorChartHComponent
],
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: highchartsModules
},
],
exports: [
SingleSensorChartHComponent,
ChartModule
]
})
export class MeteoChartsModule {
}
export function highchartsModules() {
return [ exporting, highstock ];
} |
@Moepkid In which livecycle do you access Cause its only available after |
@cebor I Think i found it. Maybe it is worth noting that the factory function and provider needs to be in the app.module and not a submodule. I now put that in app.module and the rest in the MeteoModule and it works! Also, Sorry if i screw up the formatting of the comments and code. Somehow the comment box can't translate my code to github code. |
Is there a working example with Highstock? Somehow I am getting similar issues than here, I must be missing something. |
@epot Just follow the instructions in the readme, but notice the following:
importing 'exporting' and the other modules is done by
Then lastly, you have to import ChartModule in the module where you want to use the charts (and selected modules). my app.module.ts: import { HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
import highstock from 'highcharts/modules/stock.src.js';
...
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: highchartsModules
},
],
...
<beneath module declaration>
export function highchartsModules() {
return [exporting, highstock];
} |
Oh I did not see the .js in the readme, that must be the problem! And I was putting the highchartsModule before the module declaration. Thanks! Unfortunately, it still does not work. Here's my app-module.ts:
And I am getting this:
|
@epot which versions are you using for angular and the other librarieS? |
Angular 5.0.2, types/highcharts 5.0.12 and angular-highcharts 5.1.1. |
@epot I think this is something specific for your project. Can you perhaps make a new empty project with only these libraries? |
Working Example: https://stackblitz.com/edit/angular-uzdc1r |
Excellent, thank you both for your help! |
It seems to be related to webpack. I tried the following:
Tune the my-app/package.json to update angular 5 and add highcharts 6.0.2 and angular-highchart 5.1.1.
|
@epot angular-cli also uses webpack, an this works fine for me. |
@epot i think i got it. I accidently used Can you try version |
It looks like I got a different error now:
Is element a nodejs keyword as well? I suggest switching to "gnagna" ;-). |
nope it isn't |
Weird, any idea why it is still failing then? I can put a small repro on github if that helps. |
@epot In this case Maybe the import is incorrect or the angular starter you are using is incompatible with this library. |
I am really not sure what is wrong, but I tested both with my complex project and a start project (https://github.com/preboot/angular-webpack.git) and I am getting the same error unfortunately :-/. |
Hello,
is it possible to use HighStock and Highcharts Modules like Exporting?
thanks
The text was updated successfully, but these errors were encountered: