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 { enableProdMode, Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule, DxCheckBoxModule, DxSelectBoxModule } 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({
valueText,
point: { aggregationInfo },
seriesName,
value,
argument,
rangeValue1,
rangeValue2,
}) {
const start = aggregationInfo?.intervalStart;
const end = aggregationInfo?.intervalEnd;
if (seriesName === 'Average temperature') {
return {
text: `${!aggregationInfo
? `Date: ${argument.toDateString()}`
: `Interval: ${start.toDateString()
} - ${end.toDateString()}`
}<br/>Temperature: ${value.toFixed(2)} °C`,
};
} if (seriesName === 'Temperature range') {
return {
text: `Interval: ${start.toDateString()
} - ${end.toDateString()
}<br/>Temperature range: ${rangeValue1
} - ${rangeValue2} °C`,
};
} if (seriesName === 'Precipitation') {
return {
text: `Date: ${argument.toDateString()
}<br/>Precipitation: ${valueText} mm`,
};
}
}
calculateRangeArea(aggregationInfo: Record<string, 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;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.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: string | Record<string, number>;
}
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/
const componentNames = [
'accordion',
'action-sheet',
'autocomplete',
'bar-gauge',
'box',
'bullet',
'button-group',
'button',
'calendar',
'chart',
'check-box',
'circular-gauge',
'color-box',
'context-menu',
'data-grid',
'date-box',
'date-range-box',
'defer-rendering',
'diagram',
'draggable',
'drawer',
'drop-down-box',
'drop-down-button',
'file-manager',
'file-uploader',
'filter-builder',
'form',
'funnel',
'gallery',
'gantt',
'html-editor',
'linear-gauge',
'list',
'load-indicator',
'load-panel',
'lookup',
'map',
'menu',
'multi-view',
'nested',
'number-box',
'pie-chart',
'pivot-grid-field-chooser',
'pivot-grid',
'polar-chart',
'popover',
'popup',
'progress-bar',
'radio-group',
'range-selector',
'range-slider',
'recurrence-editor',
'resizable',
'responsive-box',
'sankey',
'scheduler',
'scroll-view',
'select-box',
'slider',
'sortable',
'sparkline',
'speed-dial-action',
'splitter',
'switch',
'tab-panel',
'tabs',
'tag-box',
'text-area',
'text-box',
'tile-view',
'toast',
'toolbar',
'tooltip',
'tree-list',
'tree-map',
'tree-view',
'validation-group',
'validation-summary',
'validator',
'vector-map',
];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'@angular/platform-browser-dynamic': {
'esModule': true,
},
'@angular/platform-browser': {
'esModule': true,
},
'@angular/core': {
'esModule': true,
},
'@angular/common': {
'esModule': true,
},
'@angular/common/http': {
'esModule': true,
},
'@angular/compiler': {
'esModule': true,
},
'@angular/animations': {
'esModule': true,
},
'@angular/forms': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': '../../../../bundles/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
/* @angular */
'@angular/compiler': 'bundles:@angular/compiler.umd.js',
'@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js',
'@angular/core': 'bundles:@angular/core.umd.js',
'@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js',
'@angular/common': 'bundles:@angular/common.umd.js',
'@angular/common/http': 'bundles:@angular/common-http.umd.js',
'@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js',
'@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js',
'@angular/forms': 'bundles:@angular/forms.umd.js',
/* devextreme */
'devextreme': 'npm:devextreme@24.1.5/cjs',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'devextreme/bundles/dx.all': 'npm:devextreme@24.1.5/bundles/dx.all.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.10',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56',
/* devextreme-angular umd maps */
'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js',
'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js',
'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js',
...componentNames.reduce((acc, name) => {
acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`;
return acc;
}, {}),
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'tslib': 'npm:tslib@2.6.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',
'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.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/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.13/inferno/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devexpress-diagram@2.2.10/package.json',
'npm:devexpress-gantt@4.1.56/package.json',
],
};
System.config(window.config);
// System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<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=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.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.13.3/bundles/zone.umd.min.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>