jQWidgets Forums
jQuery UI Widgets › Forums › Angular › jqxChart pie legend not showing text
Tagged: jqxChart angular
This topic contains 2 replies, has 1 voice, and was last updated by alexkor 6 years, 3 months ago.
-
Author
-
Hi
i have weird issue.
in my local project the text of the legend is not showing.
https://ibb.co/BTxQj3hwhile 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?
the issue fixed, the post can be deleted
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'; } } ] } ]; }
-
AuthorPosts
You must be logged in to reply to this topic.