| Name | Type | Default |
|---|
|
animationDuration
|
Number
|
null
|
Sets or gets the animationDuration property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [animationDuration]="500"
> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
barSize
|
Size
|
50%
|
Sets or gets the barSize property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [barSize]="40%"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
description
|
String
|
'Description'
|
Sets or gets the description property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [description]="'Description'"
> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [disabled]="true"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
height
|
Size
|
100
|
Sets or gets the height property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
labelsFormat
|
enum:BulletChartLabelsFormat
|
null
|
enum BulletChartLabelsFormat { null, d, f, n, c, p } Sets or gets the labelsFormat property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [labelsFormat]="'c'"
> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
labelsFormatFunction
|
(value?: Number, position?:String ) => Any
|
null
|
Sets or gets the labelsFormatFunction property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [labelsFormatFunction]="labelsFormatFunction"
> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
orientation
|
enum:BulletChartOrientation
|
"horizontal"
|
enum BulletChartOrientation { horizontal, vertical } Sets or gets the orientation property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [orientation]="'horizontal'"
> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
pointer
|
BulletChartPointer
|
{ value: 65, label: "Value", size: "25%", color: "" }
|
interface BulletChartPointer { value?: Number; label?: String; size?: Size; color?: String; } Sets or gets the pointer property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [rtl]="true"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
ranges
|
Array<BulletChartRanges>
|
[{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]
|
interface BulletChartRanges { startValue: Number; endValue: Number; opacity?: Number; color?: String; } Sets or gets the ranges property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
showTooltip
|
Boolean
|
true
|
Sets or gets the showTooltip property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [showTooltip]="false"
> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
target
|
BulletChartPointer
|
{ value: 85, label: "Target", size: 4, color: "" };
|
interface BulletChartPointer { value?: Number; label?: String; size?: Size; color?: String; } Sets or gets the target property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
ticks
|
BulletChartTicks
|
{ position: "far", interval: 20, size: 10 }
|
interface BulletChartTicks { position?: BulletChartTicksPosition; interval?: Number; size?: Number | String; } Sets or gets the ticks property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
title
|
String
|
'Title'
|
Sets or gets the title property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [title]="'Title'"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
tooltipFormatFunction
|
(pointerValue:Number , targetValue:Number) => String
|
null
|
Sets or gets the tooltipFormatFunction property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [tooltipFormatFunction]="tooltipFormatFunction"
> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
width
|
Size
|
500
|
Sets or gets the width property.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
|
|
change
|
Event
|
|
This event is triggered when the value is changed.
Code examples
Bind to the change event of jqxBulletChart.
import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart (onChange)="Change($event)" [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent { Change(event: any): void { // Do Something } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
|
| Name | Return Type | Arguments |
|---|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent implements AfterViewInit { @ViewChild( 'myBulletChart') myBulletChart: jqxBulletChartComponent; ngAfterViewInit(): void { this.myBulletChart.destroy(); } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
render
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent implements AfterViewInit { @ViewChild( 'myBulletChart') myBulletChart: jqxBulletChartComponent; ngAfterViewInit(): void { this.myBulletChart.render(); } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
refresh
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent implements AfterViewInit { @ViewChild( 'myBulletChart') myBulletChart: jqxBulletChartComponent; ngAfterViewInit(): void { this.myBulletChart.refresh(); } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
|
val
|
Number
|
value: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> `}) export class AppComponent implements AfterViewInit { @ViewChild( 'myBulletChart') myBulletChart: jqxBulletChartComponent; ngAfterViewInit(): void { let value = this.myBulletChart.val(50); } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 };
|
