jQWidgets Forums

jQuery UI Widgets Forums Angular how to use jqxChart with json data?

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
  • how to use jqxChart with json data? #104206

    alexkor
    Participant

    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?

    how to use jqxChart with json data? #104219

    Martin
    Participant

    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,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    how to use jqxChart with json data? #104225

    alexkor
    Participant

    thanks 🙂

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.