Your search did not match any results.
Charts

Points Aggregation

Documentation

This demo illustrates the Chart widget'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
Copy to Plunker
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'] }) export class AppComponent { weatherIndicators: WeatherIndicators[]; intervals: AggregationInterval[]; functions: AggregationFunction[]; useAggregation: Boolean = true; constructor(service: Service) { this.weatherIndicators = service.getWeatherIndicators(); this.intervals = service.getAggregationIntervals(); this.functions = service.getAggregationFunctions(); } customizeTooltip(arg: any) { let aggregationInfo = arg.point.aggregationInfo, start = aggregationInfo && aggregationInfo.intervalStart, 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" }; } else if(arg.seriesName === "Temperature range") { return { text: "Interval: " + start.toDateString() + " - " + end.toDateString() + "<br/>Temperature range: " + arg.rangeValue1 + " - " + arg.rangeValue2 + " °C" }; } else 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; } let temp = aggregationInfo.data.map(function(item) { return item.temp; }), maxTemp = Math.max.apply(null, temp), minTemp = Math.min.apply(null, temp); return { date: aggregationInfo.intervalStart, maxTemp: maxTemp, minTemp: 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; } let intervals: AggregationInterval[] = [{ displayName: "One week", interval: "week" }, { displayName: "Two weeks", interval: { weeks: 2 } }, { displayName: "Month", interval: "month" }]; let functions: AggregationFunction[] = [{ displayName: "Average", func: "avg" }, { displayName: "Minimum", func: "min" }, { displayName: "Maximum", func: "max" }]; let 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://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@5.1.2/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@5.1.2/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@5.1.2/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@5.1.2/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@5.1.2/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@5.1.2/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@5.1.2/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@5.1.2/bundles/forms.umd.js', '@angular/common/http': 'npm:@angular/common@5.1.2/bundles/common-http.umd.js', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@5.3.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme': 'npm:devextreme@18.1', 'devextreme-angular': 'npm:devextreme-angular@18.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!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/18.1.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.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.6.25/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>