Hi,
I have a chart with multiple lines with numerical values. I also have a navigator themed selection pane, which works fine by now.
I would like to have Dates in various formats (depending on the zoom in level of the navigation) on the x axis.
I chose a line chart as suggested (because of the date / time x axis) instead of a scatterLineChart.
Until now I store testing data in an array of Series like so:
series: Series[] = [
{
name: 'Series 1',
type: 'line',
data: [
3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.89, 8.238, 9.552, 6.855,
],
color: '#058dc7',
},
{
type: 'line',
name: 'Series 3',
data: [
4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3,
],
markers: { type: 'square' },
color: '#50b432',
},
{
name: 'Series 3',
type: 'line',
data: [
5.743, 8.295, 8.175, 7.376, 9.153, 9.535, 6.247, 1.832, 5.3, 5.3,
],
markers: { type: 'roundedRect', visible: false },
color: '#ed561b',
},
{
name: 'Series 4',
type: 'line',
data: [
0.01, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.69, 2.995,
],
markers: { visible: false },
color: '#dddf00',
},
{
name: 'Custom',
type: 'line',
data: [2, 1.2, 4, 2, 5, 6, -4, -6, -4, -6],
markers: { visible: false },
legendItem: {
type: 'area',
area: {
opacity: 0.5,
},
highlight: {
visible: false,
},
},
color: '#24cbe5',
},
];
I am not sure how to pinpoint timestamps to the specific values, by now I can only find suitable examples within scatterline charts where the timestamps are given within the data array separately like the following structure as example:
onst data = (): WeatherData[] =>
[
{
Timestamp: '2018-01-01T00:00:00.000',
TMax: 3.3,
TMin: -12,
Wind: 5.5,
Rain: 0
},
{
Timestamp: '2018-01-02T00:00:00.000',
TMax: 5.2,
TMin: -10,
Wind: 8.1,
Rain: 0
},
...
];
What would be the correct way to define data in a series consisting of value and timestamp tumples?
Seems simple, but I can't figure it out.
Best Regards,
FirestormHell
Hi,
I am trying to evaluate the possibilities to have horizontal lines for thresholds, maximums, minimums etc.
On the net I found a somewhat old post regarding stripLines, but this does not seem to be supported anymore. I can't find something in the docs / API.
So what I found next are plotbands, but manly these seem to be more suitable for areas, not really for lines.
This leaves me with custom plotbands using the drawing API (see: https://www.telerik.com/kendo-angular-ui/components/charts/elements/plot-bands/#toc-custom-plot-bands).
But this seems a bit overkill for a simple horizontal line which from my perspective only needs very basic things like value, title and let's say some styling like color, opacity, line thickness and the likes...
So my question: Is there a simple way for horizontal lines that I am missing or is the custom plotband the way to go in this matter?
Best Regards,
FirestormHell
I'm updating our angular app from angular v14 to v15 (and then 16 and 17...) and saw that I have to update also Kendo.
I've luckily learned that finally all kendo-ui packages now share the same version number for a release (which is a very good move) just to find out that this is true for the most packages but not all packages.
So @progress/kendo-drawing and @progress/kendo-licensing still uses the old individual versioning and all @progress/kendo-angular-XXX packages of v11.6.0 references @progress/kendo-drawing v^1.17.2 and @progress/kendo-licensing v^1.0.2
I understand that @progress/kendo-drawing and @progress/kendo-licensing are independent from angular but why is there still an inconsistent individual versioning outside the @progress/kendo-angular-XXX namespace and not also a consistent versioning in @progress/kendo-XXX?
How can scroll to active tab position dynamically, it becomes the first tab display of selected active tab from backend then it should be display in first position.
Example: if i have dates tabStrip then current date tab should be display in first position.
Hi there,
I am new to Kendo UI Charts. Am I getting this right? The navigator is only for stock charts?
I don't get why, this would also be very helpfull for line charts. I could only find a very old question regarding this, with not a really good answer.
Is it still the case that there is no way to display a line chart with a navigator? Or is it possible to display a line in the stockchart kind of similar to a line chart instead of candlesticks?
Best Regards,
FirestormHell
Hello, for months I've noticed that your Angular component demonstrations have style issues as shown in the capture below. Honestly, if there's one place where one expects to judge the quality of components, it's on the vendor's demo page. I don't understand how you can let things stay like this.
Jonathan.
Hi.
I'm trying to clear data in a control if the user has entered an incomplete date. My ControlValueAccessor, which wraps a DateTimePicker, implements the following logic.
If the control contains a {incompleteDate: true} error and the input field loses focus, patchValue(null) is executed. However, the control still contains the error {incompleteDate: true}
I think not correct check in this line (libs/dateinputs/src/dateinput/dateinput.component.ts)
this.isDateIncomplete = this.kendoDateObject.hasValue() && this.value === null;
full method
private updateIncompleteValidationStatus(): void {
const previousValue = this.isDateIncomplete;
this.isDateIncomplete = this.kendoDateObject.hasValue() && this.value === null; // Not correct check
if (previousValue === this.isDateIncomplete || !this.incompleteDateValidation) { return; }
if (isPresent(this.ngControl) && !isPresent(this.pickerService)) {
this.cdr.markForCheck();
this.ngZone.run(() => this.onValidatorChange());
} else if (isPresent(this.pickerService)) {
this.pickerService.dateCompletenessChange.emit();
}
}
Installed packages
"@progress/kendo-angular-dateinputs": "15.4.0",
"@angular/core": "^16.2.12",
Live demo
Thanks for help.