jQWidgets Forums
jQuery UI Widgets › Forums › Angular › how to use jqxChart with json data?
Tagged: jqxChart angular
This topic contains 2 replies, has 2 voices, and was last updated by alexkor 6 years, 4 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
i have changed the exmple and put local json but it not works for me, the chart in not shown
<jqxChart #myChart (onClick)="onChartClick($event)" [height]="500" [width]="500" [showLegend]="false" [enableAnimations]="true" [source]="dataAdapter" [showBorderLine]="false" [seriesGroups]="seriesGroups" [colorScheme]="'scheme02'"> </jqxChart>
import { Component, OnInit, Output } from '@angular/core'; import { EventEmitter } from '@angular/core'; @Component({ selector: 'app-pie-chart', templateUrl: './pie-chart.component.html', styleUrls: ['./pie-chart.component.css'] }) export class PieChartComponent implements OnInit { @Output() ChartClick = new EventEmitter(); data: any; constructor() { // tslint:disable-next-line:max-line-length this.data = [{ "cliente": "Valkim", "total": "37000.00" }, { "cliente": "Rocell", "total": "224999.98" }, { "cliente": "MTF", "total": "400212.64" }, { "cliente": "Recris", "total": "409999.81" }]; } source: any = { datatype: 'json', datafields: [ { name: 'cliente', type: 'string' }, { name: 'total', type: 'number' } ], localdata: this.data //url: '../assets/desktop_browsers_share_dec2011.txt' }; // tslint:disable-next-line:member-ordering dataAdapter: any = new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr: any, status: any, error: any) => { alert('Error loading "' + this.source.url + '" : ' + error); } }); // tslint:disable-next-line:member-ordering seriesGroups: any[] = [ { type: 'pie', showLabels: true, series: [ { dataField: 'total', displayText: 'cliente', labelRadius: 120, initialAngle: 15, radius: 150, centerOffset: 0, formatSettings: { sufix: '%', decimalPlaces: 1 } } ] } ]; onChartClick(e) { this.ChartClick.emit(e); } ngOnInit() { } }
what is wrong?
Hello alexkor,
This happens because the source and data adapter are created before the json is set to
data
, so when using it in the source its value is ‘undefined’.
You can move the source and dataAdapter in the constructor, this will fix it.Here is an Example.
Best Regards,
MartinjQWidgets Team
http://www.jqwidgets.com/thanks
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.