jqxChart thows ecxeption

[smirnovParticipant]

Whatever I try to make runnable jqxChart example with Angular I get exception

Chart.html:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘undefined’. Current value: ‘Fuel and Speed chart’. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?
at viewDebugError (core.es5.js:8507)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8485)
at checkBindingNoChanges (core.es5.js:8649)
at checkNoChangesNodeInline (core.es5.js:12502)
at checkNoChangesNode (core.es5.js:12476)
at debugCheckNoChangesNode (core.es5.js:13251)
at debugCheckDirectivesFn (core.es5.js:13153)
at Object.eval [as updateDirectives] (Chart.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13135)
at checkNoChangesView (core.es5.js:12296)

If I activate production mode I get empty tag

<jqxchart>
<div id="jqxWidgetc5f6c1fc"></div>
</jqxchart>

this one of many attempts for example

@Component({
  selector: "vg-chart",
  template: <code><jqxChart [source]=&quot;dataAdapter&quot; [title]=&quot;title&quot; [description]=&quot;description&quot; [xAxis]=&quot;xAxis&quot; [valueAxis]=&quot;valueAxis&quot; [seriesGroups]=&quot;seriesGroups&quot;></jqxChart></code>
})
export class Chart{

    source =
    {
        datatype: "json",
        datafields: [
            { name: 'Speed' },
            { name: 'Fuel' },
        ],
        url: 'api/fuel_speed_chart'
    };

    dataAdapter = new $.jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + this.source.url + '" : ' + error); } });

    title = "Fuel and Speed chart";
    description = "Chart for analytic department";
    xAxis =
    {
        dataField: 'Speed',
        type: 'int',
        unitInterval: 1,
        gridLines: {
            visible: true,
            interval: 3,
            color: '#BCBCBC'
        },
        labels: {
            angle: -45,
            rotationPoint: 'topright',
            offset: { x: 0, y: -25 }
        }
    };
    valueAxis =
    {
        visible: true,
        title: { text: 'FUEL AMOUNT<br>' },
        tickMarks: { color: '#BCBCBC' }
    };
    seriesGroups =
    [
        {
            type: 'line',
            series: [
                { dataField: 'FUEL', displayText: 'FUEL' },
               ]
        }
    ]
}

[Peter StoevKeymaster]

Hi smirnov,

Please, refer to http://www.jqwidgets.com/angular/angular-chart/index.htm, in order to learn how to correctly configure our Angular Chart. All samples include source code and use jQWidgets 4.5.4 version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[smirnovParticipant]

Really? What exactly is incorrect in my code?
This config is taken from your documentation.
Maybe you want to discuss your examles? Ok, I1m ready

[Peter StoevKeymaster]

Hi smirnov,

As I wrote, please refer to the link I sent you where you see about 100 Chart samples. The link you are pointing our is obviously deprecated as it is from an older version of that uses Angular 2 and system.config. Now we use Angular 4 and different packaing. All available links are on the page I sent you. Click on some, see the code and use it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts