Example with Highmaps about angular2-highcharts

[SteveRuben]

@sunny9240 , yep I got it.

[SteveRuben]

@pradipkachhadiya I'll create a gist soon

[vmohir]

I couldn't use this example! It gives me the error Map is unknown chart type. So I solved it with this link

[gevgeny]

Sure http://plnkr.co/edit/AmDfKwhRhshFn3CPprkk?p=preview

[marcgr]

Thanks!

[marcgr]

I can duplicate your example and get it to work on a simple site, however I am trying to integrate into a site that I have forked off of angular2-seed.

I can't get it to integrate without throwing a "Highcharts is not defined" error when loading the highmaps module. I have tried a lot of different system config options pointed at both local npm locations and at your example locations and still get the same error when trying to load the highmaps module that Highcharts is undefined even though I can set static settings for the Highcharts like in your examples...

Any ideas?

Regards,

Marc

[marcgr]

FWIW, I realized that including the highstock mapping was needed in the system config section. (Why not just highcharts.js?)

'highcharts/highstock.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js',

This cleared up the "Highcharts is not defined" error, but it still won't let me initialize the Highchmap

Highchmap(Highcharts);

If I include that, the application errors out without a useful error message. I can see that it has imported the highcharts/modules/map.js file, but for some reason won't let it connect extend Highcharts.

Marc

[marcgr]

Finally got it working. I had to import the map module like this:

import * as Highchmap from 'highcharts/modules/map';

[gevgeny]

I see. It really looks very unclear and I think the reason is how Highcharts modules are organised. It was not created to be used as ES2015 modules. BTW what bundler do you use with angular2-seed ?

[marcgr]

Angular2-seed uses systemjs builder.

[marcgr]

Another question, how do you load a highcharts plugin? I have a highcharts zoom out plugin I would like to incorporate but i think that since it is not in a module format I can't load the same as the highcharts modules. Here is the link the plugin.

[http://www.highcharts.com/plugin-registry/single/26/Zoom%20Out%20Selection]

[gevgeny]

I think it depends on how the plugin is implemented. Looks like this one (and most of other ones) is just a global script and not a module. AFAIK webpack allows to inject such scripts to bundle but i don't know how to manage it with systemjs.

[marcgr]

Thanks for the response. It seems like others using angular2-highcharts may end up wanting to extend highcharts with plugins, so worth thinking about.

I ended up pasting the plugin javascript at the bottom of my component file that is using highcharts and that seems to work. Not the most elegant solution, but is working. When I tried other routes, the load order became problematic since highcharts has to have been called before the plugin and the highcharts module is only loaded when the component is needed so a global include of the plugin wasn't working for me.

[gevgeny]

I see. Do you have any ideas how it can be simplified in angular2-highcharts ?

[kogen00]

Hello,
has there been any new enlightment on this problem? I don't get it to work whenever I try something like this:

const Highcharts = require('highcharts/highcharts.src'); import 'highcharts/adapters/standalone-framework.src'; import * as Highchmap from 'highcharts/modules/map';

in my module while having it defined like that

'angular2-highcharts': 'https://cdn.rawgit.com/gevgeny/angular2-highcharts/v0.3.0/dist', 'highcharts/highstock.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js', 'highcharts/adapters/standalone-framework.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/adapters/standalone-framework.src.js', 'highcharts/modules/map': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/modules/map.js', 'highcharts': 'node_modules/highcharts',

as a "map" specification in my system.config.js file I finally get a bunch of errors:

3:18 Error: (SystemJS) Highchmap is not defined
ReferenceError: Highchmap is not defined

I'm confused.

[khraibani]

@gevgeny can you please provide an example using webpack instead of systemjs.

[gevgeny]

@khraibani there is one in the readme

[SteveRuben]

Hi @gevgeny , how can we use highchart and highmap in the same module ?

[sunny9240]

@Tryptich , Have you got any solution to use highchart and highmap in the same module ?

[pradipkachhadiya]

Hi @gevgeny , how can we highchart and highmap both in my angular 2 web app?

[pradipkachhadiya]

Have you got any solution to use highchart and highmap in the same module ?'
@Tryptich can you please provide an example or solution ?

[Prashanth-Thomas]

@pradipkachhadiya I seem to be dealing with the similar issue in Angular2. i require highstocks and highmaps within a single module.

But from what i have read, people suggest we place them in separate modules.