<!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://unpkg.com/devextreme@18.1.1-pre-18094/dist/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/devextreme@18.1.1-pre-18094/dist/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/devextreme@18.1.1-pre-18094/dist/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.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.then(function(viz) {
System.import("devextreme/viz/themes").then(function(viz) {
viz.currentTheme("generic.light");
viz.refreshTheme();
});
})
.catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>
// 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.1-pre-18094',
'devextreme-angular': 'npm:devextreme-angular@18.1.1-beta.4'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
<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, DxChartComponent} 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 {
@ViewChild(DxChartComponent) chart: DxChartComponent;
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) {
var 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.valueText + " °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;
}
var 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);
import { Injectable } from '@angular/core';
export class WeatherIndicators {
date: string;
temp: number;
precip: number;
}
export class AggregationInterval {
displayName: string;
interval: string;
}
export class AggregationFunction {
displayName: string;
func: string;
}
let intervals: AggregationInterval[] = [{
displayName: "Week",
interval: "week"
}, {
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;
}
}
::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;
}