angularshowcase / angular2-seed-ng2-highcharts Goto Github PK

Is it possible create one graph like this:
http://www.highcharts.com/demo/gauge-solid ?
And combinations of graphs?
http://www.highcharts.com/demo/combo
Thanks

The seed has evolved a lot... we could update this repo applying the seed improvements to be a better learning place.

Hi,
I am trying to handle click events in Ng2HighCharts. HighChart allows me to specify a callback function. However, execution context of this function is different and I can no longer access properties of Angular2 component in the callback function.

I am starting to use ng2-highcharts.
I have been able to use the component within my TestApp but I am not able to get any chart type different from the default one.
For instance, if I change the type of chart to 'column' in the home.ts component of yours, I still get the same chart.
What am I doing wrong?

Thanks in advance
Enrico

Hi,

Did a clean checkout and npm install and npm start got this error:

src\client\app+charts\components\charts.component.ts(3,57): error TS2307: Cannot find module 'ng2-highcharts/ng2-highcharts'.

Browser just displayed Loading ....

Did I miss something in the install, it installed without errors.

Windows, Node Version v4.4.7

IMPORTANT: This repository's issues are reserved for feature requests and bug reports. Do not submit support requests here.
I copied the source into my install and when i run it i get an error.

Steps to reproduce and a minimal demo of the problem
Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ng2-highcharts' since it isn't a known property of 'div'. ("


<div [ERROR ->][ng2-highcharts]="chartOptions" class="graph">


"): ng:///PlcgraphModule/PlcgraphComponent.html@16:8
Can't bind to 'ng2-highcharts' since it isn't a known property of 'div'. ("


<div [ERROR ->][ng2-highcharts]="chartBar" class="graph">


"): ng:///PlcgraphModule/PlcgraphComponent.html@19:8
Can't bind to 'ng2-highstocks' since it isn't a known property of 'div'. ("


<div [ERROR ->][ng2-highstocks]="chartStock" class="graph">


"): ng:///PlcgraphModule/PlcgraphComponent.html@24:8
Can't bind to 'ng2-highmaps' since it isn't a known property of 'div'. ("


<div [ERROR ->][ng2-highmaps]="chartMap" class="graph">


"): ng:///PlcgraphModule/PlcgraphComponent.html@27:8
Error: Template parse errors:
Can't bind to 'ng2-highcharts' since it isn't a known property of 'div'. ("


<div [ERROR ->][ng2-highcharts]="chartOptions" class="graph">


"): ng:///PlcgraphModule/PlcgraphComponent.html@16:8
Can't bind to 'ng2-highcharts' since it isn't a known property of 'div'. ("


<div [ERROR ->][ng2-highcharts]="chartBar" class="graph">


"): ng:///PlcgraphModule/PlcgraphComponent.html@19:8
Can't bind to 'ng2-highstocks' since it isn't a known property of 'div'. ("


<div [ERROR ->][ng2-highstocks]="chartStock" class="graph">


"): ng:///PlcgraphModule/PlcgraphComponent.html@24:8
Can't bind to 'ng2-highmaps' since it isn't a known property of 'div'. ("


<div [ERROR ->][ng2-highmaps]="chartMap" class="graph">


"): ng:///PlcgraphModule/PlcgraphComponent.html@27:8
at syntaxError (compiler.es5.js:1540)
at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12031)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:25782)
at compiler.es5.js:25706
at Set.forEach ()
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:25706)
at createResult (compiler.es5.js:25591)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:141)
at zone.js:817
at syntaxError (compiler.es5.js:1540)
at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12031)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:25782)
at compiler.es5.js:25706
at Set.forEach ()
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:25706)
at createResult (compiler.es5.js:25591)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:141)
at zone.js:817
at resolvePromise (zone.js:769)
at resolvePromise (zone.js:740)
at zone.js:817
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
at
api.onUnhandledError @ zone.js:644
handleUnhandledRejection @ zone.js:666
_loop_1 @ zone.js:657
api.microtaskDrainDone @ zone.js:661
drainMicroTaskQueue @ zone.js:592
Promise resolved (async)
scheduleMicroTask @ zone.js:567
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:815
ZoneAwarePromise.then @ zone.js:904
ZoneAwarePromise.all @ zone.js:884
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules @ compiler.es5.js:25638
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndComponents @ compiler.es5.js:25589
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:25551
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef.bootstrapModuleWithZone @ core.es5.js:4811
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef.bootstrapModule @ core.es5.js:4797
../../../../../src/main.ts @ main.ts:12
webpack_require @ bootstrap 7ddea8ec2ad85c442cf3:54
0 @ main.bundle.js:6843
webpack_require @ bootstrap 7ddea8ec2ad85c442cf3:54
webpackJsonpCallback @ bootstrap 7ddea8ec2ad85c442cf3:25
(anonymous) @ main.bundle.js:1
What steps should we try in your demo to see the problem?

Current behavior

Expected/desired behavior

Other information
@angular/cli: 1.4.7
node: 6.11.2
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.4.7
@angular/compiler-cli: 4.1.3
typescript: 2.3.3

How to update bar series data in highcharts?
I know you can replace the entire config option but that causes an entire re-render.
I am interested in updating just several bars...

In the original API you do

series.setData(value)
but of course with ng2 there is no reference to the template element so I am wondering what's the proper method...

tx

Sean.

I'm trying to get the highchart js object the same as we do in js

var chart = $('#container').highcharts();

And set the xAxis extremes

        chart.xAxis[0].setExtremes(
                startTime * 1000,
                endTime * 1000
        );

I wanna deploy to a VPS like Digital ocean,.

Could there be examples of showing multiple charts on a page? There maybe cases where charts need to be dynamically generated based on some conditions, along with the number of charts to be rendered.

Steps to reproduce and a minimal demo of the problem
run - npm run build.prod
What steps should we try in your demo to see the problem?
npm install
npm run build.prod
Current behavior
Working fine in dev mode but not working for prod mode.

Expected/desired behavior
It should have created complete dist. But fails while creating index.html in dist.

Other information
I am using typings 1.3.1 as 2.0 is not supported.

This issue is only coming up in my company's Windows System Environment.
Working fine in my personal MacBook.