search

gevgeny / angular2-highcharts

:bar_chart: :chart_with_upwards_trend: Highcharts for your Angular project
MIT License
380 stars 113 forks source link

Example with Highmaps #12

Closed marcgr closed 8 years ago

marcgr commented 8 years ago

Could you provide an example of how to create a Highmap? I am not getting the plugin loading to work based off the examples provided. I am guessing I won't be the only one struggling to get this working for Highmaps

gevgeny commented 8 years ago

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

marcgr commented 8 years ago

Thanks!

marcgr commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

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

gevgeny commented 8 years ago

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 commented 8 years ago

Angular2-seed uses systemjs builder.

marcgr commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

kogen00 commented 7 years ago

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 commented 7 years ago

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

gevgeny commented 7 years ago

@khraibani there is one in the readme

SteveRuben commented 7 years ago

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

sunny9240 commented 7 years ago

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

SteveRuben commented 7 years ago

@sunny9240 , yep I got it.

pradipkachhadiya commented 7 years ago

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

pradipkachhadiya commented 7 years ago

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

SteveRuben commented 7 years ago

@pradipkachhadiya I'll create a gist soon

Prashanth-Thomas commented 7 years ago

@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.

vmohir commented 6 years ago

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