jQWidgets Forums

jQuery UI Widgets Forums Angular jqxChart pie legend not showing text

This topic contains 2 replies, has 1 voice, and was last updated by  alexkor 6 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • jqxChart pie legend not showing text #104358

    alexkor
    Participant

    Hi
    i have weird issue.
    in my local project the text of the legend is not showing.
    https://ibb.co/BTxQj3h

    while in the demo page when i edit the demo the exact same code is showing

    source: any =
        {
          datatype: 'json',
          datafields: [
            { name: 'alertType', type: 'string' },
            { name: 'total', type: 'number' }
          ],
          localdata: [
            {
              "alertType": "HighAlertCount",
              "total": "84"
            }, {
              "alertType": "LowAlertCount",
              "total": "1621"
            }, {
              "alertType": "MediumAlertCount",
              "total": "146"
            }
          ]
    
        };
      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); } });
    
      legendLayout: any = { left: 700, top: 160, width: 300, height: 200, flow: 'horizontal' };
    
      padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
    
      titlePadding: any = { left: 0, top: 0, right: 0, bottom: 10 };
    
      getWidth(): any {
        if (document.body.offsetWidth < 850) {
          return '90%';
        }
    
        return 850;
      }
    
      // tslint:disable-next-line:member-ordering
      seriesGroups: any[] =
        [{
          type: 'pie',
          showLabels: false,
          series:
            [
              {
                dataField: 'total',
                displayText: 'alertType',
                labelRadius: 120,
                initialAngle: 15,
                radius: 90,
                centerOffset: 0,
    
                toolTipFormatFunction: function (value) {
                  if (isNaN(value)) {
                    return value;
    
                  }
                  return (value / 1851 * 100).toFixed(2) + "%" + '(' + value + ')';
                },
                legendFormatFunction: function (value, itemIndex, serie, group) {
                  return 'test';
                }
            ],
        }];
    <jqxChart #myChart [width]="getWidth()" [height]="500" [title]="'Mobile browsers share'" [description]="'(source: wikipedia.org)'"
      [showLegend]="true" [enableAnimations]="true" [padding]="padding" [titlePadding]="titlePadding" [source]="dataAdapter"
      [showBorderLine]="true" [seriesGroups]="seriesGroups" [colorScheme]="'scheme03'" [legendLayout]="legendLayout">
    </jqxChart>

    what can be the issue?

    jqxChart pie legend not showing text #104359

    alexkor
    Participant

    the issue fixed, the post can be deleted

    jqxChart pie legend not showing text #104360

    alexkor
    Participant

    ok i still have the issue becouse i pass the chart configuration as input.
    when i use it in the component it works, but when i pass as input it not work.

    
    <jqxChart #myChart (onClick)="onChartClick($event)" [height]="300" [showLegend]="true" [enableAnimations]="true"
      [source]="dataAdapter" [showBorderLine]="false" [seriesGroups]="chartConfiguration">
    </jqxChart>
    import { Component, OnInit, Output, Input, AfterViewInit } from '@angular/core';
    import { EventEmitter } from '@angular/core';
    import { HealthService } from '../Health/health.service';
    
    @Component({
      selector: 'app-pie-chart',
      templateUrl: './pie-chart.component.html',
      styleUrls: ['./pie-chart.component.css']
    })
    export class PieChartComponent implements OnInit {
    
      @Output() ChartClick = new EventEmitter();
      @Input() chartConfiguration;
      @Input() chartData;
      dataAdapter;
      constructor() {
      }
    
      onChartClick(e) {
        this.ChartClick.emit(e);
      }
    
      ngOnInit(): void {
        this.dataAdapter = new jqx.dataAdapter(this.chartData, {
          async: false, autoBind: true
        });
      }
    }

    <app-pie-chart [chartConfiguration]="pieChartConfig" [chartData]="pieChartDataSource" (ChartClick)="onChartClick($event)"></app-pie-chart>

     ngOnInit(): void {
        this.pieChartDataSource = this.healthConfigService.generatePieChartDataSource();
        this.pieChartConfig = this.healthConfigService.getPieChartAlertsConfig(1851);
      }
    generatePieChartAlertDataSource() {
        return {
          datatype: 'json',
          datafields: [
            { name: 'alertType', type: 'string' },
            { name: 'total', type: 'number' }
          ],
          url: '../assets/desktop_browsers_share_dec2011.json'
        };
      }
      getPieChartAlertsConfig(total) {
        return [
          {
            type: 'pie',
            showLabels: false,
            series:
              [
                {
                  dataField: 'total',
                  displayText: 'alertType',
                  labelRadius: 120,
                  initialAngle: 15,
                  radius: 90,
                  centerOffset: 0,
    
                  toolTipFormatFunction: function (value) {
                    if (isNaN(value)) {
                      return value;
                    }
                    return (value / total * 100).toFixed(2) + "%" + '(' + value + ')';
                  },
                  legendFormatFunction: function (value, itemIndex, serie, group) {
                    debugger;
                    return 'test';
                  }
                }
              ]
          }
        ];
      }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.