Blank chart after selecting a chart data source #151

albosmart-ro · 2021-05-19T07:49:59Z

I get the following console error after i add a data source to the chart widget

core.js:1673 ERROR TypeError: Cannot read property 'scale' of undefined
    at new wr (uPlot.iife.min.js:2)
    at NgxUplotComponent../app/gui-helpers/ngx-uplot/ngx-uplot.component.ts.NgxUplotComponent.init (ngx-uplot.component.ts:204)
    at ChartUplotComponent../app/gauges/controls/html-chart/chart-uplot/chart-uplot.component.ts.ChartUplotComponent.init (chart-uplot.component.ts:129)
    at ChartUplotComponent../app/gauges/controls/html-chart/chart-uplot/chart-uplot.component.ts.ChartUplotComponent.setOptions (chart-uplot.component.ts:144)
    at GaugesManager../app/gauges/gauges.component.ts.GaugesManager.setChartPropety (gauges.component.ts:692)
    at GaugesManager../app/gauges/gauges.component.ts.GaugesManager.initInEditor (gauges.component.ts:177)
    at SafeSubscriber._next (editor.component.ts:1131)
    at SafeSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:253)
    at SafeSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:191)
    at Subscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:129)
defaultErrorLogger @ core.js:1673
push.../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719
next @ core.js:4311
schedulerFn @ core.js:3551
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push.../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push.../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535
(anonymous) @ core.js:3842
../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push.../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779
onHandleError @ core.js:3842
../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:198
../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
setTimeout (async)
scheduleTask @ zone.js:2302
../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.<computed> @ zone.js:1569
hostReportError @ hostReportError.js:8
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:261
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push.../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
(anonymous) @ dialog.es5.js:404
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push.../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push.../node_modules/@angular/cdk/esm5/overlay.es5.js.OverlayRef.dispose @ overlay.es5.js:1085
(anonymous) @ dialog.es5.js:399
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push.../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next @ take.js:78
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push.../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next @ filter.js:85
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
schedulerFn @ core.js:3551
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push.../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push.../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535
push.../node_modules/@angular/material/esm5/dialog.es5.js.MatDialogContainer._onAnimationDone @ dialog.es5.js:279
eval @ MatDialogContainer_Host.ngfactory.js? [sm]:1
handleEvent @ core.js:10251
callWithDebugContext @ core.js:11344
debugHandleEvent @ core.js:11047
dispatchEvent @ core.js:7710
(anonymous) @ core.js:8154
(anonymous) @ animations.js:158
../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:3820
../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push.../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3734
push.../node_modules/@angular/platform-browser/fesm5/animations.js.AnimationRendererFactory.scheduleListenerCallback @ animations.js:158
(anonymous) @ animations.js:298
(anonymous) @ browser.js:76
(anonymous) @ browser.js:76
(anonymous) @ browser.js:4285
push.../node_modules/@angular/animations/fesm5/browser.js.WebAnimationsPlayer._onFinish @ browser.js:4285
(anonymous) @ browser.js:4302
../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
Show 53 more frames

The text was updated successfully, but these errors were encountered:

unocelli · 2021-05-20T19:18:21Z

Hi,
Which browser are you using? happens with other controls too?

albosmart-ro · 2021-05-24T06:15:03Z

Hi, sorry for the late reply, this happens on all browsers, the other controls are not affected because the error originates in the uPlot library that the chart is using

unocelli · 2021-05-24T08:02:52Z

happens only when you bind data source? if you add only the chart control without source? please, can you send me a project file?

albosmart-ro · 2021-05-24T12:07:01Z

Without the data source the chart is displayed, no errors in the js console, here is a save file

{"devices":{"opcua":{"id":"f051989e-d10e4e84","property":{"address":"opc.tcp://DESKTOP-A9F6MDN:53530/OPCUA/SimulationServer","port":null,"slot":null,"rack":null,"baudrate":9600,"databits":8,"stopbits":1,"parity":"None"},"enabled":true,"tags":{"ns=3;s=Counter":{"id":"ns=3;s=Counter","name":"ns=3;s=Counter","type":"Int32","address":"ns=3;s=Counter"}},"name":"opcua","type":"OPCUA","polling":1000}},"hmi":{"views":[{"id":"v_69324a86-111211","name":"MainView","profile":{"width":640,"height":480,"bkcolor":""},"items":{"HXC_df59e629-6ac94ceb":{"id":"HXC_df59e629-6ac94ceb","type":"svg-ext-html_chart","name":"test","property":{"id":"10101312411b9-ab511","type":"realtime1","options":{"title":"Title","fontFamily":"Roboto-Regular","legendFontSize":12,"colorBackground":"rgba(0,0,0,0)","legendBackground":"rgba(0,0,0,0)","titleHeight":18,"axisLabelFontSize":12,"labelsDivWidth":0,"axisLineColor":"rgba(0,0,0,1)","axisLabelColor":"rgba(0,0,0,1)","legendMode":"always","series":[],"width":360,"height":200,"decimalsPrecision":2,"realtime":60,"dateFormat":"MM_DD_YYYY","timeFormat":"hh_mm_ss_AA"}},"label":"HtmlChart"}},"variables":{},"svgcontent":"<svg width=\"640\" height=\"480\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:html=\"http://www.w3.org/1999/xhtml\">\n <filter id=\"blur-filter\" x=\"-3\" y=\"-3\" width=\"200\" height=\"200\">\n <feGaussianBlur stdDeviation=\"3\"/>\n </filter>\n <g>\n <title>Layer 1</title>\n <g xml:space=\"preserve\" text-anchor=\"right\" font-family=\"sans-serif\" font-size=\"14\" stroke=\"#000000\" fill=\"#FFFFFF\" type=\"svg-ext-html_chart\" id=\"HXC_df59e629-6ac94ceb\">\n <rect id=\"svg_b9710589-15794c59\" height=\"240\" width=\"380\" y=\"-14\" x=\"114\" stroke-width=\"0\"/>\n <foreignObject id=\"H-HXC_66cd3449-b8d14839\" width=\"380\" height=\"240\" y=\"-14\" x=\"114\">\n <DIV style=\"width:100%;height:100%;\" id=\"D-HXC_66cd3449-b8d14839\">\n <CHART-UPLOT class=\"ng-star-inserted\">\n <DIV class=\"mychart-panel\">\n \n <NGX-UPLOT style=\"background: rgba(0, 0, 0, 0);\" class=\"mychart-graph\">\n <DIV></DIV>\n </NGX-UPLOT>\n </DIV>\n </CHART-UPLOT>\n </DIV>\n </foreignObject>\n </g>\n </g>\n</svg>"}],"layout":{"start":"","navigation":{"mode":"over","type":"block"},"header":{},"showdev":true}},"version":"1.00","charts":[{"id":"10101312411b9-ab511","name":"test","lines":[{"id":"ns=3;s=Counter","name":"ns=3;s=Counter","device":"opcua","color":"#4484ef","label":"ns=3;s=Counter","yaxis":1}]}],"plugin":[],"server":{"name":"FUXA Server","id":"0","type":"FuxaServer","property":{}}}

unocelli · 2021-05-24T13:05:12Z

Thanks, I'm try to reproduce the issue...witch version of fuxa are you try? v1.0.11 installed from npm or v1.0.12-beta (self compiled)?

albosmart-ro · 2021-05-24T14:14:19Z

i just cloned you project, goth the latest pull requests, so i am at v1.0.12-beta

albosmart-ro · 2021-05-24T14:26:18Z

I have found a similar issue in the uPlot archive

#leeoniya/uPlot#252

unocelli · 2021-05-24T14:32:53Z

Ok, I can reproduce it and i have to investigate.
you have to install [email protected]
in 'client' folder:

npm uninstall uplot --save
npm install [email protected] --save
npm start

albosmart-ro · 2021-05-24T14:38:39Z

I works now, i had v1.6.9 installed, thank you:)

leeoniya · 2021-05-24T19:27:22Z

i'm guessing this will unbreak things: leeoniya/uPlot#519

is the situation here that the chart is initialized without series and then relies on .addSeries() after init?

unocelli · 2021-05-25T15:47:05Z

@leeoniya yes, the chart is initialized only with time series (x) series: [{ value: f, label: 'Time' }] and then I use the .addSeries, i presumed that is to add series dynamically.

unocelli · 2021-06-08T20:25:20Z

@albosmart-ro I Think is fixed. Let me know if something doesn't work as expected…
@leeoniya Thanks

unocelli · 2021-10-12T19:10:33Z

going to close this as resolved. let me know if you have any issues.

unocelli added a commit that referenced this issue Jun 8, 2021

Update uPlot version #151 and chart background color

f118289

unocelli closed this as completed Oct 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blank chart after selecting a chart data source #151

Blank chart after selecting a chart data source #151

albosmart-ro commented May 19, 2021

unocelli commented May 20, 2021

albosmart-ro commented May 24, 2021

unocelli commented May 24, 2021

albosmart-ro commented May 24, 2021

unocelli commented May 24, 2021

albosmart-ro commented May 24, 2021

albosmart-ro commented May 24, 2021

unocelli commented May 24, 2021

albosmart-ro commented May 24, 2021

leeoniya commented May 24, 2021

unocelli commented May 25, 2021

unocelli commented Jun 8, 2021

unocelli commented Oct 12, 2021

Blank chart after selecting a chart data source #151

Blank chart after selecting a chart data source #151

Comments

albosmart-ro commented May 19, 2021

unocelli commented May 20, 2021

albosmart-ro commented May 24, 2021

unocelli commented May 24, 2021

albosmart-ro commented May 24, 2021

unocelli commented May 24, 2021

albosmart-ro commented May 24, 2021

albosmart-ro commented May 24, 2021

unocelli commented May 24, 2021

albosmart-ro commented May 24, 2021

leeoniya commented May 24, 2021

unocelli commented May 25, 2021

unocelli commented Jun 8, 2021

unocelli commented Oct 12, 2021