Points Aggregation
Documentation
This demo illustrates the Chart's data aggregation feature using the line, range area, and bar series. The line series shows temperature changes using average, minimum, or maximum temperature values in the selected time interval. The range area series shows the temperature range for the same time interval and uses a custom aggregate function. The bar series illustrates precipitation and is not aggregated.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<div id="chart-demo">
<dx-chart
id="chart"
title="Weather in Las Vegas, NV (2017)"
[dataSource]="weatherIndicators"
>
<dxo-common-series-settings argumentField="date">
</dxo-common-series-settings>
<dxi-series
axis="precipitation"
color="#03a9f4"
type="bar"
valueField="precip"
name="Precipitation"
>
</dxi-series>
<dxi-series
axis="temperature"
color="#ffc0bb"
type="rangeArea"
rangeValue1Field="minTemp"
rangeValue2Field="maxTemp"
name="Temperature range"
>
<dxo-aggregation
[enabled]="useAggregation"
method="custom"
[calculate]="calculateRangeArea"
>
</dxo-aggregation>
</dxi-series>
<dxi-series
axis="temperature"
color="#e91e63"
valueField="temp"
name="Average temperature"
>
<dxo-point [size]="7"></dxo-point>
<dxo-aggregation
#pointsAggregationSettings
[enabled]="useAggregation"
method="avg"
>
</dxo-aggregation>
</dxi-series>
<dxo-argument-axis
#argumentAxisSettings
argumentType="datetime"
aggregationInterval="week"
[valueMarginsEnabled]="false"
>
</dxo-argument-axis>
<dxi-value-axis name="temperature">
<dxo-title text="Temperature, °C">
<dxo-font color="#e91e63"></dxo-font>
</dxo-title>
<dxo-label>
<dxo-font color="#e91e63"></dxo-font>
</dxo-label>
</dxi-value-axis>
<dxi-value-axis name="precipitation" position="right">
<dxo-title text="Precipitation, mm">
<dxo-font color="#03a9f4"></dxo-font>
</dxo-title>
<dxo-label>
<dxo-font color="#03a9f4"></dxo-font>
</dxo-label>
</dxi-value-axis>
<dxo-legend [visible]="false"></dxo-legend>
<dxo-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
</dxo-tooltip>
</dx-chart>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<dx-check-box text="Aggregation enabled" [(value)]="useAggregation">
</dx-check-box>
</div>
<div class="option">
<span>Interval:</span>
<dx-select-box
[dataSource]="intervals"
displayExpr="displayName"
valueExpr="interval"
[inputAttr]="{ 'aria-label': 'Interval' }"
[(value)]="argumentAxisSettings.aggregationInterval"
>
</dx-select-box>
</div>
<div class="option">
<span>Method:</span>
<dx-select-box
[dataSource]="functions"
[inputAttr]="{ 'aria-label': 'Function' }"
displayExpr="displayName"
valueExpr="func"
[(value)]="pointsAggregationSettings.method"
>
</dx-select-box>
</div>
</div>
</div>
import {
NgModule, Component, ViewChild, enableProdMode,
} from '@angular/core';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule, DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
import {
Service, WeatherIndicators, AggregationInterval, AggregationFunction,
} from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
providers: [Service],
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
preserveWhitespaces: true,
})
export class AppComponent {
weatherIndicators: WeatherIndicators[];
intervals: AggregationInterval[];
functions: AggregationFunction[];
useAggregation = true;
constructor(service: Service) {
this.weatherIndicators = service.getWeatherIndicators();
this.intervals = service.getAggregationIntervals();
this.functions = service.getAggregationFunctions();
}
customizeTooltip(arg: any) {
const aggregationInfo = arg.point.aggregationInfo;
const start = aggregationInfo && aggregationInfo.intervalStart;
const end = aggregationInfo && aggregationInfo.intervalEnd;
if (arg.seriesName === 'Average temperature') {
return {
text: `${!aggregationInfo
? `Date: ${arg.argument.toDateString()}`
: `Interval: ${start.toDateString()
} - ${end.toDateString()}`
}<br/>Temperature: ${arg.value.toFixed(2)} °C`,
};
} if (arg.seriesName === 'Temperature range') {
return {
text: `Interval: ${start.toDateString()
} - ${end.toDateString()
}<br/>Temperature range: ${arg.rangeValue1
} - ${arg.rangeValue2} °C`,
};
} if (arg.seriesName === 'Precipitation') {
return {
text: `Date: ${arg.argument.toDateString()
}<br/>Precipitation: ${arg.valueText} mm`,
};
}
}
calculateRangeArea(aggregationInfo:any, series:any) {
if (!aggregationInfo.data.length) {
return;
}
const temp = aggregationInfo.data.map((item) => item.temp);
const maxTemp = Math.max.apply(null, temp);
const minTemp = Math.min.apply(null, temp);
return {
date: new Date((aggregationInfo.intervalStart.valueOf() + aggregationInfo.intervalEnd.valueOf()) / 2),
maxTemp,
minTemp,
};
}
}
@NgModule({
imports: [
BrowserModule,
BrowserTransferStateModule,
DxChartModule,
DxSelectBoxModule,
DxCheckBoxModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart-demo {
height: 700px;
width: 100%;
}
::ng-deep #chart {
height: 500px;
margin: 0 0 15px;
}
::ng-deep .options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
::ng-deep .caption {
font-size: 18px;
font-weight: 500;
}
::ng-deep .option {
margin-top: 10px;
}
::ng-deep .option > span {
width: 50px;
display: inline-block;
margin-right: 10px;
}
::ng-deep .option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
}
import { Injectable } from '@angular/core';
export class WeatherIndicators {
date: string;
temp: number;
precip: number;
}
export class AggregationInterval {
displayName: string;
interval: any;
}
export class AggregationFunction {
displayName: string;
func: string;
}
const intervals: AggregationInterval[] = [{
displayName: 'One week',
interval: 'week',
}, {
displayName: 'Two weeks',
interval: { weeks: 2 },
}, {
displayName: 'Month',
interval: 'month',
}];
const functions: AggregationFunction[] = [{
displayName: 'Average',
func: 'avg',
}, {
displayName: 'Minimum',
func: 'min',
}, {
displayName: 'Maximum',
func: 'max',
}];
const weatherIndicators: WeatherIndicators[] = [{
date: '2017-01-01',
temp: 9.5,
precip: 0.1,
},
{
date: '2017-01-02',
temp: 8,
precip: 0.4,
},
{
date: '2017-01-03',
temp: 7.5,
precip: 0.2,
},
{
date: '2017-01-04',
temp: 8.5,
precip: 0.1,
},
{
date: '2017-01-05',
temp: 10,
precip: 0.3,
},
{
date: '2017-01-06',
temp: 3,
precip: 0,
},
{
date: '2017-01-07',
temp: 5,
precip: 0.3,
},
{
date: '2017-01-08',
temp: 9.5,
precip: 0,
},
{
date: '2017-01-09',
temp: 11,
precip: 0.5,
},
{
date: '2017-01-10',
temp: 8,
precip: 0,
},
{
date: '2017-01-11',
temp: 11.5,
precip: 0.3,
},
{
date: '2017-01-12',
temp: 9.5,
precip: 2.1,
},
{
date: '2017-01-13',
temp: 11.5,
precip: 3.5,
},
{
date: '2017-01-14',
temp: 11,
precip: 0.1,
},
{
date: '2017-01-15',
temp: 10.5,
precip: 0,
},
{
date: '2017-01-16',
temp: 6.5,
precip: 0,
},
{
date: '2017-01-17',
temp: 7.5,
precip: 0,
},
{
date: '2017-01-18',
temp: 8,
precip: 0.1,
},
{
date: '2017-01-19',
temp: 8.5,
precip: 1.3,
},
{
date: '2017-01-20',
temp: 5.5,
precip: 5.3,
},
{
date: '2017-01-21',
temp: 9,
precip: 0.1,
},
{
date: '2017-01-22',
temp: 6,
precip: 16.6,
},
{
date: '2017-01-23',
temp: 8.5,
precip: 5.5,
},
{
date: '2017-01-24',
temp: 6.5,
precip: 1.3,
},
{
date: '2017-01-25',
temp: 4.5,
precip: 0,
},
{
date: '2017-01-26',
temp: 5.5,
precip: 0,
},
{
date: '2017-01-27',
temp: 3,
precip: 0,
},
{
date: '2017-01-28',
temp: 6.5,
precip: 0,
},
{
date: '2017-01-29',
temp: 8,
precip: 0,
},
{
date: '2017-01-30',
temp: 10.5,
precip: 0,
},
{
date: '2017-01-31',
temp: 13,
precip: 0,
},
{
date: '2017-02-01',
temp: 10.5,
precip: 0,
},
{
date: '2017-02-02',
temp: 12,
precip: 0,
},
{
date: '2017-02-03',
temp: 13,
precip: 0.2,
},
{
date: '2017-02-04',
temp: 10,
precip: 0,
},
{
date: '2017-02-05',
temp: 11.5,
precip: 0,
},
{
date: '2017-02-06',
temp: 11.5,
precip: 0.1,
},
{
date: '2017-02-07',
temp: 12.5,
precip: 0.5,
},
{
date: '2017-02-08',
temp: 13,
precip: 0,
},
{
date: '2017-02-09',
temp: 15.5,
precip: 0,
},
{
date: '2017-02-10',
temp: 16.5,
precip: 0.1,
},
{
date: '2017-02-11',
temp: 14.5,
precip: 0.8,
},
{
date: '2017-02-12',
temp: 13.5,
precip: 0.1,
},
{
date: '2017-02-13',
temp: 13.5,
precip: 0,
},
{
date: '2017-02-14',
temp: 12,
precip: 0,
},
{
date: '2017-02-15',
temp: 13.5,
precip: 0,
},
{
date: '2017-02-16',
temp: 14.5,
precip: 0,
},
{
date: '2017-02-17',
temp: 12.5,
precip: 4.5,
},
{
date: '2017-02-18',
temp: 10,
precip: 14.4,
},
{
date: '2017-02-19',
temp: 13.5,
precip: 0.5,
},
{
date: '2017-02-20',
temp: 14,
precip: 0.6,
},
{
date: '2017-02-21',
temp: 15,
precip: 0,
},
{
date: '2017-02-22',
temp: 11,
precip: 0,
},
{
date: '2017-02-23',
temp: 7.5,
precip: 0,
},
{
date: '2017-02-24',
temp: 6,
precip: 0,
},
{
date: '2017-02-25',
temp: 7,
precip: 0,
},
{
date: '2017-02-26',
temp: 8,
precip: 0,
},
{
date: '2017-02-27',
temp: 8.5,
precip: 0.1,
},
{
date: '2017-02-28',
temp: 10,
precip: 0,
},
{
date: '2017-03-01',
temp: 9,
precip: 0,
},
{
date: '2017-03-02',
temp: 11,
precip: 0,
},
{
date: '2017-03-03',
temp: 15,
precip: 0,
},
{
date: '2017-03-04',
temp: 14.5,
precip: 0,
},
{
date: '2017-03-05',
temp: 12.5,
precip: 0,
},
{
date: '2017-03-06',
temp: 7.5,
precip: 0,
},
{
date: '2017-03-07',
temp: 11,
precip: 0,
},
{
date: '2017-03-08',
temp: 16,
precip: 0,
},
{
date: '2017-03-09',
temp: 19.5,
precip: 0,
},
{
date: '2017-03-10',
temp: 20,
precip: 0,
},
{
date: '2017-03-11',
temp: 20.5,
precip: 0,
},
{
date: '2017-03-12',
temp: 21.5,
precip: 0,
},
{
date: '2017-03-13',
temp: 21.5,
precip: 0,
},
{
date: '2017-03-14',
temp: 23.5,
precip: 0,
},
{
date: '2017-03-15',
temp: 23,
precip: 0,
},
{
date: '2017-03-16',
temp: 23,
precip: 0,
},
{
date: '2017-03-17',
temp: 22.5,
precip: 0,
},
{
date: '2017-03-18',
temp: 23.5,
precip: 0,
},
{
date: '2017-03-19',
temp: 24,
precip: 0,
},
{
date: '2017-03-20',
temp: 23.5,
precip: 0,
},
{
date: '2017-03-21',
temp: 22,
precip: 0,
},
{
date: '2017-03-22',
temp: 18.5,
precip: 4,
},
{
date: '2017-03-23',
temp: 15,
precip: 2.4,
},
{
date: '2017-03-24',
temp: 20.5,
precip: 0,
},
{
date: '2017-03-25',
temp: 19,
precip: 0,
},
{
date: '2017-03-26',
temp: 18.5,
precip: 0,
},
{
date: '2017-03-27',
temp: 18,
precip: 0,
},
{
date: '2017-03-28',
temp: 17,
precip: 0,
},
{
date: '2017-03-29',
temp: 21,
precip: 0,
},
{
date: '2017-03-30',
temp: 19.5,
precip: 0,
},
{
date: '2017-03-31',
temp: 16.5,
precip: 0.2,
},
{
date: '2017-04-01',
temp: 19,
precip: 0,
},
{
date: '2017-04-02',
temp: 20,
precip: 0,
},
{
date: '2017-04-03',
temp: 18,
precip: 0,
},
{
date: '2017-04-04',
temp: 16.5,
precip: 0,
},
{
date: '2017-04-05',
temp: 17,
precip: 0,
},
{
date: '2017-04-06',
temp: 21.5,
precip: 0,
},
{
date: '2017-04-07',
temp: 22,
precip: 0,
},
{
date: '2017-04-08',
temp: 19,
precip: 0.2,
},
{
date: '2017-04-09',
temp: 14.5,
precip: 0,
},
{
date: '2017-04-10',
temp: 17,
precip: 0,
},
{
date: '2017-04-11',
temp: 19.5,
precip: 0,
},
{
date: '2017-04-12',
temp: 21.5,
precip: 0,
},
{
date: '2017-04-13',
temp: 21.5,
precip: 0,
},
{
date: '2017-04-14',
temp: 19,
precip: 0,
},
{
date: '2017-04-15',
temp: 21,
precip: 0,
},
{
date: '2017-04-16',
temp: 22.5,
precip: 0,
},
{
date: '2017-04-17',
temp: 21.5,
precip: 0,
},
{
date: '2017-04-18',
temp: 21.5,
precip: 0,
},
{
date: '2017-04-19',
temp: 21.5,
precip: 0,
},
{
date: '2017-04-20',
temp: 22,
precip: 0,
},
{
date: '2017-04-21',
temp: 20,
precip: 0,
},
{
date: '2017-04-22',
temp: 23,
precip: 0,
},
{
date: '2017-04-23',
temp: 26,
precip: 0,
},
{
date: '2017-04-24',
temp: 25,
precip: 0,
},
{
date: '2017-04-25',
temp: 22,
precip: 0,
},
{
date: '2017-04-26',
temp: 23.5,
precip: 0,
},
{
date: '2017-04-27',
temp: 23,
precip: 0,
},
{
date: '2017-04-28',
temp: 19,
precip: 0,
},
{
date: '2017-04-29',
temp: 19.5,
precip: 0,
},
{
date: '2017-04-30',
temp: 21.5,
precip: 0,
},
{
date: '2017-05-01',
temp: 26,
precip: 0,
},
{
date: '2017-05-02',
temp: 26,
precip: 0,
},
{
date: '2017-05-03',
temp: 25.5,
precip: 0,
},
{
date: '2017-05-04',
temp: 28,
precip: 0,
},
{
date: '2017-05-05',
temp: 28.5,
precip: 0,
},
{
date: '2017-05-06',
temp: 27,
precip: 0.4,
},
{
date: '2017-05-07',
temp: 17,
precip: 0.1,
},
{
date: '2017-05-08',
temp: 17,
precip: 0,
},
{
date: '2017-05-09',
temp: 20,
precip: 1.7,
},
{
date: '2017-05-10',
temp: 19.5,
precip: 0.3,
},
{
date: '2017-05-11',
temp: 23,
precip: 0,
},
{
date: '2017-05-12',
temp: 26,
precip: 0,
},
{
date: '2017-05-13',
temp: 22.5,
precip: 0,
},
{
date: '2017-05-14',
temp: 23,
precip: 0,
},
{
date: '2017-05-15',
temp: 19.5,
precip: 0,
},
{
date: '2017-05-16',
temp: 20,
precip: 0,
},
{
date: '2017-05-17',
temp: 18.5,
precip: 0,
},
{
date: '2017-05-18',
temp: 19.5,
precip: 0,
},
{
date: '2017-05-19',
temp: 21.5,
precip: 0,
},
{
date: '2017-05-20',
temp: 24,
precip: 0,
},
{
date: '2017-05-21',
temp: 27.5,
precip: 0,
},
{
date: '2017-05-22',
temp: 29,
precip: 0,
},
{
date: '2017-05-23',
temp: 30.5,
precip: 0,
},
{
date: '2017-05-24',
temp: 31,
precip: 0,
},
{
date: '2017-05-25',
temp: 29.5,
precip: 0,
},
{
date: '2017-05-26',
temp: 27,
precip: 0,
},
{
date: '2017-05-27',
temp: 26,
precip: 0,
},
{
date: '2017-05-28',
temp: 29,
precip: 0,
},
{
date: '2017-05-29',
temp: 30.5,
precip: 0,
},
{
date: '2017-05-30',
temp: 31.5,
precip: 0,
},
{
date: '2017-05-31',
temp: 29.5,
precip: 0,
},
{
date: '2017-06-01',
temp: 28,
precip: 0,
},
{
date: '2017-06-02',
temp: 30,
precip: 0,
},
{
date: '2017-06-03',
temp: 32.5,
precip: 0,
},
{
date: '2017-06-04',
temp: 32,
precip: 0,
},
{
date: '2017-06-05',
temp: 31.5,
precip: 0,
},
{
date: '2017-06-06',
temp: 33,
precip: 0,
},
{
date: '2017-06-07',
temp: 32.5,
precip: 0,
},
{
date: '2017-06-08',
temp: 31.5,
precip: 0,
},
{
date: '2017-06-09',
temp: 31.5,
precip: 0,
},
{
date: '2017-06-10',
temp: 29,
precip: 0,
},
{
date: '2017-06-11',
temp: 26,
precip: 0,
},
{
date: '2017-06-12',
temp: 21,
precip: 0,
},
{
date: '2017-06-13',
temp: 25,
precip: 0,
},
{
date: '2017-06-14',
temp: 30.5,
precip: 0,
},
{
date: '2017-06-15',
temp: 32,
precip: 0,
},
{
date: '2017-06-16',
temp: 34.5,
precip: 0,
},
{
date: '2017-06-17',
temp: 36,
precip: 0,
},
{
date: '2017-06-18',
temp: 36,
precip: 0,
},
{
date: '2017-06-19',
temp: 37.5,
precip: 0,
},
{
date: '2017-06-20',
temp: 39,
precip: 0,
},
{
date: '2017-06-21',
temp: 38,
precip: 0,
},
{
date: '2017-06-22',
temp: 37.5,
precip: 0,
},
{
date: '2017-06-23',
temp: 37,
precip: 0,
},
{
date: '2017-06-24',
temp: 37.5,
precip: 0,
},
{
date: '2017-06-25',
temp: 37,
precip: 0,
},
{
date: '2017-06-26',
temp: 36.5,
precip: 0,
},
{
date: '2017-06-27',
temp: 34,
precip: 0,
},
{
date: '2017-06-28',
temp: 34,
precip: 0,
},
{
date: '2017-06-29',
temp: 37.5,
precip: 0,
},
{
date: '2017-06-30',
temp: 35,
precip: 0,
},
{
date: '2017-07-01',
temp: 37.5,
precip: 0,
},
{
date: '2017-07-02',
temp: 35.5,
precip: 0,
},
{
date: '2017-07-03',
temp: 36.5,
precip: 0,
},
{
date: '2017-07-04',
temp: 37,
precip: 0,
},
{
date: '2017-07-05',
temp: 39,
precip: 0,
},
{
date: '2017-07-06',
temp: 39.5,
precip: 0,
},
{
date: '2017-07-07',
temp: 40,
precip: 0,
},
{
date: '2017-07-08',
temp: 39,
precip: 0,
},
{
date: '2017-07-09',
temp: 36.5,
precip: 0,
},
{
date: '2017-07-10',
temp: 37,
precip: 0,
},
{
date: '2017-07-11',
temp: 36.5,
precip: 0.1,
},
{
date: '2017-07-12',
temp: 36.5,
precip: 0,
},
{
date: '2017-07-13',
temp: 38,
precip: 0,
},
{
date: '2017-07-14',
temp: 39.5,
precip: 0,
},
{
date: '2017-07-15',
temp: 40,
precip: 0,
},
{
date: '2017-07-16',
temp: 38.5,
precip: 0,
},
{
date: '2017-07-17',
temp: 37,
precip: 0,
},
{
date: '2017-07-18',
temp: 37,
precip: 0,
},
{
date: '2017-07-19',
temp: 34,
precip: 0.4,
},
{
date: '2017-07-20',
temp: 34.5,
precip: 0,
},
{
date: '2017-07-21',
temp: 36.5,
precip: 0,
},
{
date: '2017-07-22',
temp: 36.5,
precip: 0,
},
{
date: '2017-07-23',
temp: 38,
precip: 0,
},
{
date: '2017-07-24',
temp: 34,
precip: 0.1,
},
{
date: '2017-07-25',
temp: 34,
precip: 0,
},
{
date: '2017-07-26',
temp: 33.5,
precip: 0.2,
},
{
date: '2017-07-27',
temp: 36,
precip: 0,
},
{
date: '2017-07-28',
temp: 38,
precip: 0,
},
{
date: '2017-07-29',
temp: 36.5,
precip: 0,
},
{
date: '2017-07-30',
temp: 37.5,
precip: 0.1,
},
{
date: '2017-07-31',
temp: 37,
precip: 0,
},
{
date: '2017-08-01',
temp: 37,
precip: 0,
},
{
date: '2017-08-02',
temp: 35.5,
precip: 0.1,
},
{
date: '2017-08-03',
temp: 33.5,
precip: 0.9,
},
{
date: '2017-08-04',
temp: 32,
precip: 0.1,
},
{
date: '2017-08-05',
temp: 33.5,
precip: 0.1,
},
{
date: '2017-08-06',
temp: 34,
precip: 0,
},
{
date: '2017-08-07',
temp: 33.5,
precip: 0,
},
{
date: '2017-08-08',
temp: 35.5,
precip: 0,
},
{
date: '2017-08-09',
temp: 36,
precip: 0,
},
{
date: '2017-08-10',
temp: 35.5,
precip: 0,
},
{
date: '2017-08-11',
temp: 35,
precip: 0,
},
{
date: '2017-08-12',
temp: 35.5,
precip: 0.1,
},
{
date: '2017-08-13',
temp: 34,
precip: 0,
},
{
date: '2017-08-14',
temp: 32.5,
precip: 0,
},
{
date: '2017-08-15',
temp: 30,
precip: 0,
},
{
date: '2017-08-16',
temp: 31,
precip: 0,
},
{
date: '2017-08-17',
temp: 33.5,
precip: 0,
},
{
date: '2017-08-18',
temp: 34.5,
precip: 0,
},
{
date: '2017-08-19',
temp: 34,
precip: 0,
},
{
date: '2017-08-20',
temp: 33,
precip: 0,
},
{
date: '2017-08-21',
temp: 32,
precip: 0,
},
{
date: '2017-08-22',
temp: 32.5,
precip: 0,
},
{
date: '2017-08-23',
temp: 33,
precip: 0,
},
{
date: '2017-08-24',
temp: 33,
precip: 0,
},
{
date: '2017-08-25',
temp: 33.5,
precip: 0,
},
{
date: '2017-08-26',
temp: 36,
precip: 0,
},
{
date: '2017-08-27',
temp: 37,
precip: 0,
},
{
date: '2017-08-28',
temp: 37,
precip: 0,
},
{
date: '2017-08-29',
temp: 36.5,
precip: 0,
},
{
date: '2017-08-30',
temp: 36,
precip: 0.3,
},
{
date: '2017-08-31',
temp: 33.5,
precip: 0.3,
},
{
date: '2017-09-01',
temp: 33.5,
precip: 0,
},
{
date: '2017-09-02',
temp: 34.5,
precip: 0,
},
{
date: '2017-09-03',
temp: 34,
precip: 0.1,
},
{
date: '2017-09-04',
temp: 29.5,
precip: 0,
},
{
date: '2017-09-05',
temp: 33,
precip: 0,
},
{
date: '2017-09-06',
temp: 32,
precip: 0,
},
{
date: '2017-09-07',
temp: 32,
precip: 0,
},
{
date: '2017-09-08',
temp: 28,
precip: 1.7,
},
{
date: '2017-09-09',
temp: 23,
precip: 7.6,
},
{
date: '2017-09-10',
temp: 29,
precip: 0,
},
{
date: '2017-09-11',
temp: 32,
precip: 0,
},
{
date: '2017-09-12',
temp: 31,
precip: 0,
},
{
date: '2017-09-13',
temp: 30.5,
precip: 0,
},
{
date: '2017-09-14',
temp: 26,
precip: 0,
},
{
date: '2017-09-15',
temp: 23.5,
precip: 0,
},
{
date: '2017-09-16',
temp: 24.5,
precip: 0,
},
{
date: '2017-09-17',
temp: 25,
precip: 0,
},
{
date: '2017-09-18',
temp: 26.5,
precip: 0,
},
{
date: '2017-09-19',
temp: 24.5,
precip: 0,
},
{
date: '2017-09-20',
temp: 24.5,
precip: 0,
},
{
date: '2017-09-21',
temp: 20,
precip: 0,
},
{
date: '2017-09-22',
temp: 17,
precip: 0,
},
{
date: '2017-09-23',
temp: 15.5,
precip: 0,
},
{
date: '2017-09-24',
temp: 17.5,
precip: 0,
},
{
date: '2017-09-25',
temp: 18,
precip: 0,
},
{
date: '2017-09-26',
temp: 18.5,
precip: 0,
},
{
date: '2017-09-27',
temp: 21.5,
precip: 0,
},
{
date: '2017-09-28',
temp: 22,
precip: 0,
},
{
date: '2017-09-29',
temp: 24,
precip: 0,
},
{
date: '2017-09-30',
temp: 25,
precip: 0,
},
{
date: '2017-10-01',
temp: 23,
precip: 0,
},
{
date: '2017-10-02',
temp: 18,
precip: 0,
},
{
date: '2017-10-03',
temp: 18.5,
precip: 0,
},
{
date: '2017-10-04',
temp: 18.5,
precip: 0,
},
{
date: '2017-10-05',
temp: 21.5,
precip: 0,
},
{
date: '2017-10-06',
temp: 19.5,
precip: 0,
},
{
date: '2017-10-07',
temp: 23,
precip: 0,
},
{
date: '2017-10-08',
temp: 24,
precip: 0,
},
{
date: '2017-10-09',
temp: 14.5,
precip: 0,
},
{
date: '2017-10-10',
temp: 18,
precip: 0,
},
{
date: '2017-10-11',
temp: 20,
precip: 0,
},
{
date: '2017-10-12',
temp: 20,
precip: 0,
},
{
date: '2017-10-13',
temp: 21,
precip: 0,
},
{
date: '2017-10-14',
temp: 17,
precip: 0,
},
{
date: '2017-10-15',
temp: 18,
precip: 0,
},
{
date: '2017-10-16',
temp: 20.5,
precip: 0,
},
{
date: '2017-10-17',
temp: 21.5,
precip: 0,
},
{
date: '2017-10-18',
temp: 21.5,
precip: 0,
},
{
date: '2017-10-19',
temp: 22.5,
precip: 0,
},
{
date: '2017-10-20',
temp: 18,
precip: 0,
},
{
date: '2017-10-21',
temp: 15,
precip: 0,
},
{
date: '2017-10-22',
temp: 19.5,
precip: 0,
},
{
date: '2017-10-23',
temp: 22,
precip: 0,
},
{
date: '2017-10-24',
temp: 20.5,
precip: 0,
},
{
date: '2017-10-25',
temp: 21,
precip: 0,
},
{
date: '2017-10-26',
temp: 22,
precip: 0,
},
{
date: '2017-10-27',
temp: 20,
precip: 0,
},
{
date: '2017-10-28',
temp: 19.5,
precip: 0,
},
{
date: '2017-10-29',
temp: 21,
precip: 0,
},
{
date: '2017-10-30',
temp: 19.5,
precip: 0,
},
{
date: '2017-10-31',
temp: 17.5,
precip: 0,
},
{
date: '2017-11-01',
temp: 18,
precip: 0,
},
{
date: '2017-11-02',
temp: 15,
precip: 0,
},
{
date: '2017-11-03',
temp: 14.5,
precip: 0,
},
{
date: '2017-11-04',
temp: 16.5,
precip: 0,
},
{
date: '2017-11-05',
temp: 12.5,
precip: 0,
},
{
date: '2017-11-06',
temp: 12,
precip: 0,
},
{
date: '2017-11-07',
temp: 14,
precip: 0,
},
{
date: '2017-11-08',
temp: 14.5,
precip: 0,
},
{
date: '2017-11-09',
temp: 16.5,
precip: 0,
},
{
date: '2017-11-10',
temp: 16,
precip: 0,
},
{
date: '2017-11-11',
temp: 14.5,
precip: 0,
},
{
date: '2017-11-12',
temp: 14.5,
precip: 0,
},
{
date: '2017-11-13',
temp: 16.5,
precip: 0,
},
{
date: '2017-11-14',
temp: 14.5,
precip: 0,
},
{
date: '2017-11-15',
temp: 16.5,
precip: 0,
},
{
date: '2017-11-16',
temp: 15,
precip: 0,
},
{
date: '2017-11-17',
temp: 17,
precip: 0,
},
{
date: '2017-11-18',
temp: 8.5,
precip: 0,
},
{
date: '2017-11-19',
temp: 11,
precip: 0,
},
{
date: '2017-11-20',
temp: 12,
precip: 0,
},
{
date: '2017-11-21',
temp: 15.5,
precip: 0,
},
{
date: '2017-11-22',
temp: 18.5,
precip: 0,
},
{
date: '2017-11-23',
temp: 18.5,
precip: 0,
},
{
date: '2017-11-24',
temp: 18,
precip: 0,
},
{
date: '2017-11-25',
temp: 18.5,
precip: 0,
},
{
date: '2017-11-26',
temp: 17.5,
precip: 0,
},
{
date: '2017-11-27',
temp: 13,
precip: 0,
},
{
date: '2017-11-28',
temp: 10,
precip: 0,
},
{
date: '2017-11-29',
temp: 12.5,
precip: 0,
},
{
date: '2017-11-30',
temp: 11.5,
precip: 0,
},
{
date: '2017-12-01',
temp: 14,
precip: 0,
},
{
date: '2017-12-02',
temp: 13.5,
precip: 0,
},
{
date: '2017-12-03',
temp: 13.5,
precip: 0,
},
{
date: '2017-12-04',
temp: 4.5,
precip: 0,
},
{
date: '2017-12-05',
temp: 5,
precip: 0,
},
{
date: '2017-12-06',
temp: 7,
precip: 0,
},
{
date: '2017-12-07',
temp: 6.5,
precip: 0,
},
{
date: '2017-12-08',
temp: 10,
precip: 0,
},
{
date: '2017-12-09',
temp: 10,
precip: 0,
},
{
date: '2017-12-10',
temp: 10,
precip: 0,
},
{
date: '2017-12-11',
temp: 10.5,
precip: 0,
},
{
date: '2017-12-12',
temp: 12,
precip: 0,
},
{
date: '2017-12-13',
temp: 12.5,
precip: 0,
},
{
date: '2017-12-14',
temp: 9,
precip: 0,
},
{
date: '2017-12-15',
temp: 10,
precip: 0,
},
{
date: '2017-12-16',
temp: 8,
precip: 0,
},
{
date: '2017-12-17',
temp: 6,
precip: 0,
},
{
date: '2017-12-18',
temp: 7.5,
precip: 0,
},
{
date: '2017-12-19',
temp: 9.5,
precip: 0,
},
{
date: '2017-12-20',
temp: 8.5,
precip: 0,
},
{
date: '2017-12-21',
temp: 3,
precip: 0,
},
{
date: '2017-12-22',
temp: 4,
precip: 0,
},
{
date: '2017-12-23',
temp: 6,
precip: 0,
},
{
date: '2017-12-24',
temp: 8,
precip: 0,
},
{
date: '2017-12-25',
temp: 10,
precip: 0,
},
{
date: '2017-12-26',
temp: 11,
precip: 0,
},
{
date: '2017-12-27',
temp: 12,
precip: 0,
},
{
date: '2017-12-28',
temp: 12,
precip: 0,
},
{
date: '2017-12-29',
temp: 13.5,
precip: 0,
},
{
date: '2017-12-30',
temp: 12,
precip: 0,
},
{
date: '2017-12-31',
temp: 11,
precip: 0,
}];
@Injectable()
export class Service {
getWeatherIndicators(): WeatherIndicators[] {
return weatherIndicators;
}
getAggregationIntervals(): AggregationInterval[] {
return intervals;
}
getAggregationFunctions(): AggregationFunction[] {
return functions;
}
}
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.17',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17',
'@angular/forms': 'npm:@angular/forms@12.2.17',
'@angular/common': 'npm:@angular/common@12.2.17',
'@angular/compiler': 'npm:@angular/compiler@12.2.17',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.6/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@23.1.6/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.2',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.49',
'devextreme-angular': 'npm:devextreme-angular@23.1.6',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.17/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@23.1.6/*/package.json',
'npm:devextreme-angular@23.1.6/ui/*/package.json',
'npm:devextreme-angular@23.1.6/package.json',
'npm:devexpress-diagram@2.2.2/package.json',
'npm:devexpress-gantt@4.1.49/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>