| Name | Type | Default |
|---|---|---|
| title | String | Chart title |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [title]="'My Title'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| description | String | Description |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [description]="'My Description'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| source | Any | [] |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| showBorderLine | Boolean | true |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [showBorderLine]="false">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| borderLineColor | String | #888888 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [borderLineColor]="'#111888'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| borderLineWidth | Number | 1 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [borderLineWidth]="3">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| backgroundColor | String | #FFFFFF |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [backgroundColor]="'#FFFFFF'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| backgroundImage | String | '' |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [backgroundImage]="'../images/chart_background.jpg'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| showLegend | Boolean | true |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [showLegend]="true">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| legendLayout | ChartLegendLayout | {} |
|
interface ChartLegendLayout {
left: Number; top: Number; width: Size; height: Size; flow: ChartLegendFlow; } enum ChartLegendFlow { vertical, horizontal } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [legendLayout]="legendLayout">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| categoryAxis | Any | {} |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [categoryAxis]="categoryAxis">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| padding | ChartPadding | {left: 5, top: 5, right: 5, bottom: 5} |
|
interface ChartPadding {
left: Number; right: Number; top: Number; bottom: Number; } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| titlePadding | ChartPadding | {left: 2, top: 2, right: 2, bottom: 2} |
|
interface ChartPadding {
left: Number; right: Number; top: Number; bottom: Number; } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| colorScheme | String | scheme01 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [colorScheme]="'scheme03'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| greyScale | Boolean | false |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [greyScale]="true">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| showToolTips | Boolean | true |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [showToolTips]="false">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| toolTipShowDelay | Number | 500 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [toolTipShowDelay]="300">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| toolTipHideDelay | Number | 4000 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [toolTipHideDelay]="300">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| toolTipMoveDuration | Number | 300 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [toolTipMoveDuration]="200">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| drawBefore | (renderer: Any, rect: Any) => { } | null |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [drawBefore]="drawBefore">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| draw | (renderer: Any, rect: Any) => { } | null |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [draw]="draw">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| rtl | Boolean | false |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [rtl]="true">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| enableCrosshairs | Boolean | false |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [enableCrosshairs]="false">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| crosshairsColor | String | #888888 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [crosshairsColor]="'#111888'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| crosshairsDashStyle | String | 2,2 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [crosshairsDashStyle]="'1,1'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| crosshairsLineWidth | Number | 1 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [crosshairsDashStyle]="true" [crosshairsLineWidth]="2">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| columnSeriesOverlap | Boolean | false |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [columnSeriesOverlap]="true">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| enabled | Boolean | true |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [enabled]="false">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| enableAnimations | Boolean | true |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [enableAnimations]="false">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| animationDuration | Number | 500 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [animationDuration]="1500">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| enableAxisTextAnimation | Boolean | false |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [enableAxisTextAnimation]="true">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| renderEngine | enum:ChartRenderEngine | auto |
|
enum ChartRenderEngine {
auto, SVG, HTML5, VML } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [renderEngine]="'HTML5'">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| xAxis | ChartXAxis | null |
|
interface ChartXAxis {
visible?: Boolean; unitInterval?: Number; dataField?: String; type?: ChartAxisType; baseUnit?: ChartDateAxisBaseUnit; valuesOnTicks?: Boolean; dateFormat?: String; axisSize?: String | Number; customDraw?: Boolean; flip?: Boolean; position?: ChartAxisPosition; padding?: ChartPadding; title?: ChartAxisTitle; tickMarks?: ChartTickMarks; gridLines?: ChartGridLines; line?: ChartAxisLine; labels?: ChartAxisLabels; logarithmicScale?: Boolean; logarithmicScaleBase?: Number; minValue?: Any; maxValue?: Any; bands?: Array<ChartColorBand>; alternatingBackgroundColor?: String; alternatingBackgroundColor2?: String; alternatingBackgroundOpacity?: Number; formatSettings?: Any; formatFunction?: Any; toolTipFormatSettings?: ChartFormatSettings; toolTipFormatFunction?: Any; rangeSelector?: Any; } interface ChartPadding { left: Number; right: Number; top: Number; bottom: Number; } enum ChartAxisType { default, date, basic } interface ChartAxisTitle { visible?: Boolean; text?: String; class?: String; horizontalAlignment?: ChartHorizontalTextAlignment; verticalAlignment?: ChartVerticalTextAlignment; angle?: Number; rotationPoint?: ChartTextRotationPoint; offset?: ChartOffset; } interface ChartOffset { x: Number; y: Number; } enum ChartHorizontalTextAlignment { left, center, right } enum ChartDateAxisBaseUnit { year, month, day, hour, minute, second, millisecond } interface ChartTickMarks { visible?: Any; color?: String; step?: Number; dashStyle?: String; lineWidth?: Number; size?: Number | String; interval?: Any; custom?: Array<ChartCustomOffset>; } interface ChartCustomOffset { value?: Any; offset?: Number; } enum ChartAxisPosition { left, top, right, bottom } interface ChartGridLines { visible?: Any; color?: String; step?: Number; dashStyle?: String; lineWidth?: Number; interval?: Any; custom?: Array<ChartCustomOffset>; } interface ChartAxisLine { visible?: Any; color?: String; dashStyle?: String; lineWidth?: Number; } interface ChartAxisLabels { visible?: Any; class?: String; step?: Number; angle?: Number; rotationPoint?: ChartTextRotationPoint; horizontalAlignment?: ChartHorizontalTextAlignment; verticalAlignment?: ChartVerticalTextAlignment; offset?: ChartOffset; custom?: Array<ChartCustomOffset>; formatSettings?: ChartFormatSettings; formatFunction?: (value: Any, itemIndex?: Number, serieIndex?: Number, groupIndex?: Number, xAxisValue?: Any, xAxis?: ChartXAxis) => String; autoRotate?: Boolean; } interface ChartColorBand { minValue?: Number; maxValue?: Number; fillColor?: String; opacity?: String; lineColor?: String; lineWidth?: Number; dashStyle?: String; } interface ChartFormatSettings { prefix?: String; sufix?: String; decimalSeparator?: String; thousandsSeparator?: String; decimalPlaces?: Number; negativeWithBrackets?: Boolean; dateFormat?: String; } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| valueAxis | ChartValueAxis | null |
|
interface ChartValueAxis {
visible?: Boolean; flip?: Boolean; position?: ChartAxisPosition; axisSize?: Number; minValue?: Number; maxValue?: Number; baselineValue?: Number; logarithmicScale?: Boolean; logarithmicScaleBase?: Number; valuesOnTicks?: Boolean; unitInterval?: Number; title?: ChartAxisTitle; labels?: ChartAxisLabels; gridLines?: ChartGridLines; tickMarks?: ChartTickMarks; padding?: ChartPadding; bands?: Array<ChartColorBand>; alternatingBackgroundColor?: String; alternatingBackgroundColor2?: String; alternatingBackgroundOpacity?: Number; toolTipFormatSettings?: ChartFormatSettings; } interface ChartAxisTitle { visible?: Boolean; text?: String; class?: String; horizontalAlignment?: ChartHorizontalTextAlignment; verticalAlignment?: ChartVerticalTextAlignment; angle?: Number; rotationPoint?: ChartTextRotationPoint; offset?: ChartOffset; } interface ChartOffset { x: Number; y: Number; } enum ChartHorizontalTextAlignment { left, center, right } enum ChartAxisPosition { left, top, right, bottom } interface ChartAxisLabels { visible?: Any; class?: String; step?: Number; angle?: Number; rotationPoint?: ChartTextRotationPoint; horizontalAlignment?: ChartHorizontalTextAlignment; verticalAlignment?: ChartVerticalTextAlignment; offset?: ChartOffset; custom?: Array<ChartCustomOffset>; formatSettings?: ChartFormatSettings; formatFunction?: (value: Any, itemIndex?: Number, serieIndex?: Number, groupIndex?: Number, xAxisValue?: Any, xAxis?: ChartXAxis) => String; autoRotate?: Boolean; } interface ChartCustomOffset { value?: Any; offset?: Number; } interface ChartGridLines { visible?: Any; color?: String; step?: Number; dashStyle?: String; lineWidth?: Number; interval?: Any; custom?: Array<ChartCustomOffset>; } interface ChartTickMarks { visible?: Any; color?: String; step?: Number; dashStyle?: String; lineWidth?: Number; size?: Number | String; interval?: Any; custom?: Array<ChartCustomOffset>; } interface ChartPadding { left: Number; right: Number; top: Number; bottom: Number; } interface ChartColorBand { minValue?: Number; maxValue?: Number; fillColor?: String; opacity?: String; lineColor?: String; lineWidth?: Number; dashStyle?: String; } interface ChartFormatSettings { prefix?: String; sufix?: String; decimalSeparator?: String; thousandsSeparator?: String; decimalPlaces?: Number; negativeWithBrackets?: Boolean; dateFormat?: String; } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
| seriesGroups | Array<ChartSeriesGroup> | null |
|
interface ChartSeriesGroup {
type: ChartSerieTypes; orientation?: ChartSerieGroupOrientations; valueAxis?: ChartValueAxis; series: Array<ChartSerie>; formatSettings?: ChartFormatSettings; columnsGapPercent?: Number; seriesGapPercent?: Number; columnsMinWidth?: Number; columnsMaxWidth?: Number; columnsTopWidthPercent?: Number; columnsBottomWidthPercent?: Number; skipOverlappingPoints?: Boolean; polar?: Boolean; spider?: Boolean; radius?: Any; startAngle?: Number; endAngle?: Number; offsetX?: Number; offsetY?: Number; source?: Any; xAxis?: ChartXAxis; colorScheme?: String; showLabels?: Boolean; } interface ChartValueAxis { visible?: Boolean; flip?: Boolean; position?: ChartAxisPosition; axisSize?: Number; minValue?: Number; maxValue?: Number; baselineValue?: Number; logarithmicScale?: Boolean; logarithmicScaleBase?: Number; valuesOnTicks?: Boolean; unitInterval?: Number; title?: ChartAxisTitle; labels?: ChartAxisLabels; gridLines?: ChartGridLines; tickMarks?: ChartTickMarks; padding?: ChartPadding; bands?: Array<ChartColorBand>; alternatingBackgroundColor?: String; alternatingBackgroundColor2?: String; alternatingBackgroundOpacity?: Number; toolTipFormatSettings?: ChartFormatSettings; } interface ChartAxisTitle { visible?: Boolean; text?: String; class?: String; horizontalAlignment?: ChartHorizontalTextAlignment; verticalAlignment?: ChartVerticalTextAlignment; angle?: Number; rotationPoint?: ChartTextRotationPoint; offset?: ChartOffset; } interface ChartOffset { x: Number; y: Number; } enum ChartHorizontalTextAlignment { left, center, right } enum ChartAxisPosition { left, top, right, bottom } interface ChartAxisLabels { visible?: Any; class?: String; step?: Number; angle?: Number; rotationPoint?: ChartTextRotationPoint; horizontalAlignment?: ChartHorizontalTextAlignment; verticalAlignment?: ChartVerticalTextAlignment; offset?: ChartOffset; custom?: Array<ChartCustomOffset>; formatSettings?: ChartFormatSettings; formatFunction?: (value: Any, itemIndex?: Number, serieIndex?: Number, groupIndex?: Number, xAxisValue?: Any, xAxis?: ChartXAxis) => String; autoRotate?: Boolean; } interface ChartCustomOffset { value?: Any; offset?: Number; } interface ChartGridLines { visible?: Any; color?: String; step?: Number; dashStyle?: String; lineWidth?: Number; interval?: Any; custom?: Array<ChartCustomOffset>; } interface ChartTickMarks { visible?: Any; color?: String; step?: Number; dashStyle?: String; lineWidth?: Number; size?: Number | String; interval?: Any; custom?: Array<ChartCustomOffset>; } interface ChartPadding { left: Number; right: Number; top: Number; bottom: Number; } interface ChartColorBand { minValue?: Number; maxValue?: Number; fillColor?: String; opacity?: String; lineColor?: String; lineWidth?: Number; dashStyle?: String; } enum ChartSerieTypes { line, stackedline, stackedline100, spline, stackedspline, stackedspline100, stepline, stackedstepline, stackedstepline100, area, stackedarea, stackedarea100, splinearea, stackedsplinearea, stackedsplinearea100, steparea, stackedsteparea, stackedsteparea100, rangearea, splinerangearea, steprangearea, column, stackedcolumn, stackedcolumn100, rangecolumn, scatter, stackedscatter, stackedscatter100, bubble, stackedbubble, stackedbubble100, pie, donut, candlestick, ohlc, waterfall, stackedwaterfall } interface ChartSerie { dataField: String; displayText: String; dataFieldFrom: String; displayTextFrom: String; dataFieldTo: String; displayTextTo: String; dataFieldOpen: String; displayTextOpen: String; dataFieldLow: String; displayTextLow: String; dataFieldHigh: String; displayTextHigh: String; dataFieldClose: String; displayTextClose: String; lineWidth?: Number; dashStyle?: String; symbolType?: ChartSeriesSymbolType; symbolSize?: Number; symbolSizeSelected?: Number; emptyPointsDisplay?: ChartEmptyPointsDisplay; linesUnselectMode?: ChartLinesUnselectMode; opacity?: Number; useGradientColors?: Boolean; greyScale?: Boolean; lineColor?: String; lineColorSelected?: String; fillColor?: String; fillColorSelected?: String; lineColorSymbol?: String; lineColorSymbolSelected?: String; fillColorSymbol?: String; fillColorSymbolSelected?: String; fillColorAlt?: String; fillColorAltSelected?: String; colorFunction?: (dataValue: Any, itemIndex?: Number, serie?: Any, group?: Any) => Any; labels?: ChartSeriesLabels; formatSettings?: ChartFormatSettings; formatFunction?: (value: Any, itemIndex?: Number, serieIndex?: Number, groupIndex?: Number, xAxisValue?: Any, xAxis?: ChartXAxis) => String; legendFormatSettings?: ChartFormatSettings; legendFormatFunction?: (value: Any, itemIndex?: Number, serieIndex?: Number, groupIndex?: Number, xAxisValue?: Any, xAxis?: ChartXAxis) => String; legendLineColor?: String; legnedFillColor?: String; toolTipFormatSettings?: ChartFormatSettings; toolTipFormatFunction?: (value: Any, itemIndex?: Number, serieIndex?: Number, groupIndex?: Number, xAxisValue?: Any, xAxis?: ChartXAxis) => String; toolTipLineColor?: String; toolTipBackground?: String; toolTipClass?: String; radius?: Any; innerRadius?: Any; startAngle?: Number; endAngle?: Number; offsetX?: Number; offsetY?: Number; hiddenPointsDisplay?: Boolean; enableSeriesToggle?: Boolean; enableSelection?: Boolean; radiusDataField: String; minRadius: Any; maxRadius: Any; summary: String; labelRadius: Any; initialAngle: Number; centerOffset: Number; } interface ChartSeriesLabels { visible?: Boolean; class?: String; angle?: Number; horizontalAlignment?: ChartHorizontalTextAlignment; verticalAlignment?: ChartVerticalTextAlignment; offset?: ChartOffset; backgroundColor?: String; backgroundOpacity?: Number; borderColor?: String; borderOpacity?: Number; padding?: ChartPadding; linesEnabled?: Boolean; linesAngles?: Boolean; autoRotate?: Boolean; radius?: Any; } enum ChartSeriesSymbolType { none, circle, square, diamond, triangle_up, triangle_down, triangle_left, triangle_right } enum ChartSerieGroupOrientations { vertical, horizontal } interface ChartFormatSettings { prefix?: String; sufix?: String; decimalSeparator?: String; thousandsSeparator?: String; decimalPlaces?: Number; negativeWithBrackets?: Boolean; dateFormat?: String; } interface ChartXAxis { visible?: Boolean; unitInterval?: Number; dataField?: String; type?: ChartAxisType; baseUnit?: ChartDateAxisBaseUnit; valuesOnTicks?: Boolean; dateFormat?: String; axisSize?: String | Number; customDraw?: Boolean; flip?: Boolean; position?: ChartAxisPosition; padding?: ChartPadding; title?: ChartAxisTitle; tickMarks?: ChartTickMarks; gridLines?: ChartGridLines; line?: ChartAxisLine; labels?: ChartAxisLabels; logarithmicScale?: Boolean; logarithmicScaleBase?: Number; minValue?: Any; maxValue?: Any; bands?: Array<ChartColorBand>; alternatingBackgroundColor?: String; alternatingBackgroundColor2?: String; alternatingBackgroundOpacity?: Number; formatSettings?: Any; formatFunction?: Any; toolTipFormatSettings?: ChartFormatSettings; toolTipFormatFunction?: Any; rangeSelector?: Any; } interface ChartAxisLine { visible?: Any; color?: String; dashStyle?: String; lineWidth?: Number; } enum ChartAxisType { default, date, basic } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
sampleData: any[] = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#CACACA'
},
gridLines: {
visible: false,
interval: 1,
color: '#CACACA'
}
};
valueAxis: any =
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: { text: 'Time in minutes' },
tickMarks: { color: '#CACACA' },
gridLines: { color: '#CACACA' }
};
seriesGroups: any[] =
[
{
type: 'splinearea',
series: [
{ greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ greyScale: true, dataField: 'Running', displayText: 'Running' },
{ greyScale: true, dataField: 'Swimming', displayText: 'Swimming' },
{ greyScale: false, dataField: 'Cycling', displayText: 'Cycling' }
]
}
];
}
|
||
Events |
||
| toggle | Event | |
|
Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart (onToggle)="Toggle($event)"
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
Toggle(event: any): void
{
// Do Something
}
|
||
| click | Event | |
|
Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart (onClick)="Click($event)"
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
Click(event: any): void
{
// Do Something
}
|
||
| mouseOver | Event | |
|
Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart (onMouseOver)="MouseOver($event)"
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
MouseOver(event: any): void
{
// Do Something
}
|
||
| mouseOut | Event | |
|
Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart (onMouseOut)="MouseOut($event)"
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
MouseOut(event: any): void
{
// Do Something
}
|
||
| refreshBegin | Event | |
|
Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart (onRefreshBegin)="RefreshBegin($event)"
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
RefreshBegin(event: any): void
{
// Do Something
}
|
||
| refreshEnd | Event | |
|
Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart (onRefreshEnd)="RefreshEnd($event)"
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
RefreshEnd(event: any): void
{
// Do Something
}
|
||
| rangeSelectionChanging | Event | |
|
Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart (onRangeSelectionChanging)="RangeSelectionChanging($event)"
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
RangeSelectionChanging(event: any): void
{
// Do Something
}
|
||
| rangeSelectionChanged | Event | |
|
Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart (onRangeSelectionChanged)="RangeSelectionChanged($event)"
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent {
RangeSelectionChanged(event: any): void
{
// Do Something
}
|
||
Methods |
||
| Name | Return Type | Arguments |
| getInstance | Any | None |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| refresh | Void | None |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| update | Void | None |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| destroy | Void | None |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| addColorScheme | Void |
schemeName: String, colors: Array<String> |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| removeColorScheme | Void | schemeName: String |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getItemsCount | Number |
groupIndex: Number, serieIndex: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getItemCoord | Any |
groupIndex: Number, serieIndex: Number, itemIndex: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getXAxisRect | ChartRect | groupIndex: Number |
|
interface ChartRect {
x: Number; y: Number; width: Number | String; height: Number | String; } import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getXAxisLabels | Array<Any> | groupIndex: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getValueAxisRect | ChartRect | groupIndex: Number |
|
interface ChartRect {
x: Number; y: Number; width: Number | String; height: Number | String; } import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getValueAxisLabels | Array<Any> | groupIndex: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getColorScheme | Array<String> | colorScheme: String |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| hideSerie | Void |
groupIndex: Number, serieIndex: Number, itemIndex?: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| showSerie | Void |
groupIndex: Number, serieIndex: Number, itemIndex?: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| hideToolTip | Void | hideDelay: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| showToolTip | Void |
groupIndex: Number, serieIndex: Number, itemIndex: Number, showDelay?: Number, hideDelay?: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| saveAsJPEG | Void |
fileName: String, exportServerUrl?: String |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| saveAsPNG | Void |
fileName: String, exportServerUrl?: String |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| saveAsPDF | Void |
fileName: String, exportServerUrl?: String |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getXAxisValue | Any |
offset: Number, groupIndex: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||
| getValueAxisValue | Any |
offset: Number, groupIndex: Number |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxChart #myChart
[width]="850" [height]="500" [source]="'sampleData'" [title]="'My Title'" [description]="'myDescription'" [padding]="padding"
[titlePadding]="titlePadding" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myChart') myChart: jqxChartComponent; |
||