Your search did not match any results.
Charts

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.

www.worldweatheronline.com
Backend API
Copy to CodeSandBox
Apply
Reset
<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" [(value)]="argumentAxisSettings.aggregationInterval" > </dx-select-box> </div> <div class="option"> <span>Method:</span> <dx-select-box [dataSource]="functions" displayExpr="displayName" valueExpr="func" [(value)]="pointsAggregationSettings.method" > </dx-select-box> </div> </div> </div>
import { NgModule, Component, ViewChild, enableProdMode, } from '@angular/core'; import { BrowserModule } 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, 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.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@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.13', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.13', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.13', '@angular/forms': 'npm:@angular/forms@12.2.13', '@angular/common/http': 'npm:@angular/common@12.2.13/bundles/common-http.umd.js', '@angular/common': 'npm:@angular/common@12.2.13', '@angular/compiler': 'npm:@angular/compiler@12.2.13', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.2.3/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@21.2.3/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.37', 'devexpress-gantt': 'npm:devexpress-gantt@3.1.24', 'devextreme-angular': 'npm:devextreme-angular@21.2.3', '@devextreme/vdom': 'npm:@devextreme/vdom@2.2.3', '@devextreme/runtime': 'npm:@devextreme/runtime@2.3.8', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, '@devextreme/vdom': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@2.3.8/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common/*/package.json', 'npm:rxjs@6.4.0/package.json', 'npm:rxjs@6.4.0/operators/package.json', 'npm:devextreme-angular/*/package.json', 'npm:devextreme-angular@21.2.3/ui/*/package.json', 'npm:devextreme-angular@21.2.3/package.json', 'npm:devexpress-diagram@2.1.37/package.json', 'npm:devexpress-gantt@3.1.24/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/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.11.4/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/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>