DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Charts - Points Aggregation

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.

Backend API
import React, { useCallback, useState } from 'react'; import Chart, { CommonSeriesSettings, Series, Aggregation, Point, ArgumentAxis, ValueAxis, Title, Font, Legend, Label, Tooltip, IAggregationProps, } from 'devextreme-react/chart'; import CheckBox from 'devextreme-react/check-box'; import SelectBox from 'devextreme-react/select-box'; import { weatherData, aggregationFunctions, aggregationIntervals, functionLabel, intervalLabel, } from './data.ts'; const customizeTooltip = (pointInfo) => { const { aggregationInfo } = pointInfo.point; const start: Date = aggregationInfo && aggregationInfo.intervalStart; const end: Date = aggregationInfo && aggregationInfo.intervalEnd; const handlers = { 'Average temperature': (arg: { argument: Date; value: number; }) => ({ text: `${(!aggregationInfo ? `Date: ${arg.argument.toDateString()}` : `Interval: ${start.toDateString()} - ${end.toDateString()}`) }<br/>Temperature: ${arg.value.toFixed(2)} °C`, }), 'Temperature range': (arg: { rangeValue1: number; rangeValue2: number; }) => ({ text: `Interval: ${start.toDateString() } - ${end.toDateString() }<br/>Temperature range: ${arg.rangeValue1 } - ${arg.rangeValue2} °C`, }), Precipitation: (arg: { argument: Date; valueText: string; }) => ({ text: `Date: ${arg.argument.toDateString() }<br/>Precipitation: ${arg.valueText} mm`, }), }; return handlers[pointInfo.seriesName](pointInfo); }; function App() { const [useAggregation, setUseAggregation] = useState(true); const [currentFunction, setCurrentFunction] = useState(aggregationFunctions[0].func); const [currentInterval, setCurrentInterval] = useState(aggregationIntervals[0].interval); const updateAggregationUsage = useCallback(({ value }) => { setUseAggregation(value); }, [setUseAggregation]); const updateInterval = useCallback(({ value }) => { setCurrentInterval(value); }, [setCurrentInterval]); const updateMethod = useCallback(({ value }) => { setCurrentFunction(value); }, [setCurrentFunction]); const calculateRangeArea = useCallback<IAggregationProps['calculate']>((aggregationInfo) => { if (!aggregationInfo.data.length) { return null; } const temp = aggregationInfo.data.map((item: { temp: number; }) => item.temp); return { date: new Date((aggregationInfo.intervalStart.valueOf() + aggregationInfo.intervalEnd.valueOf()) / 2), maxTemp: Math.max.apply(null, temp), minTemp: Math.min.apply(null, temp), }; }, []); return ( <div id="chart-demo"> <Chart id="chart" dataSource={weatherData} > <CommonSeriesSettings argumentField="date" /> <Series axis="precipitation" color="#03a9f4" type="bar" valueField="precipitation" name="Precipitation" /> <Series axis="temperature" color="#ffc0bb" type="rangearea" rangeValue1Field="minTemp" rangeValue2Field="maxTemp" name="Temperature range" > <Aggregation enabled={useAggregation} calculate={calculateRangeArea} method="custom" /> </Series> <Series axis="temperature" color="#e91e63" valueField="temp" name="Average temperature" > <Point size={7} /> <Aggregation enabled={useAggregation} method={currentFunction} /> </Series> <ArgumentAxis aggregationInterval={currentInterval} valueMarginsEnabled={false} argumentType="datetime" /> <ValueAxis name="temperature"> <Title text="Temperature, °C"> <Font color="#e91e63" /> </Title> <Label> <Font color="#e91e63" /> </Label> </ValueAxis> <ValueAxis name="precipitation" position="right" > <Title text="Precipitation, mm"> <Font color="#03a9f4" /> </Title> <Label> <Font color="#03a9f4" /> </Label> </ValueAxis> <Legend visible={false} /> <Tooltip enabled={true} customizeTooltip={customizeTooltip} /> <Title text="Weather in Las Vegas, NV (2017)" /> </Chart> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox value={useAggregation} onValueChanged={updateAggregationUsage} text="Aggregation enabled" /> </div> <div className="option"> <span>Interval:</span>&nbsp; <SelectBox dataSource={aggregationIntervals} value={currentInterval} inputAttr={intervalLabel} onValueChanged={updateInterval} displayExpr="displayName" valueExpr="interval" /> </div> <div className="option"> <span>Method:</span>&nbsp; <SelectBox dataSource={aggregationFunctions} inputAttr={functionLabel} value={currentFunction} onValueChanged={updateMethod} displayExpr="displayName" valueExpr="func" /> </div> </div> </div> ); } export default App;
import React, { useCallback, useState } from 'react'; import Chart, { CommonSeriesSettings, Series, Aggregation, Point, ArgumentAxis, ValueAxis, Title, Font, Legend, Label, Tooltip, } from 'devextreme-react/chart'; import CheckBox from 'devextreme-react/check-box'; import SelectBox from 'devextreme-react/select-box'; import { weatherData, aggregationFunctions, aggregationIntervals, functionLabel, intervalLabel, } from './data.js'; const customizeTooltip = (pointInfo) => { const { aggregationInfo } = pointInfo.point; const start = aggregationInfo && aggregationInfo.intervalStart; const end = aggregationInfo && aggregationInfo.intervalEnd; const handlers = { 'Average temperature': (arg) => ({ text: `${ !aggregationInfo ? `Date: ${arg.argument.toDateString()}` : `Interval: ${start.toDateString()} - ${end.toDateString()}` }<br/>Temperature: ${arg.value.toFixed(2)} °C`, }), 'Temperature range': (arg) => ({ text: `Interval: ${start.toDateString()} - ${end.toDateString()}<br/>Temperature range: ${ arg.rangeValue1 } - ${arg.rangeValue2} °C`, }), Precipitation: (arg) => ({ text: `Date: ${arg.argument.toDateString()}<br/>Precipitation: ${arg.valueText} mm`, }), }; return handlers[pointInfo.seriesName](pointInfo); }; function App() { const [useAggregation, setUseAggregation] = useState(true); const [currentFunction, setCurrentFunction] = useState(aggregationFunctions[0].func); const [currentInterval, setCurrentInterval] = useState(aggregationIntervals[0].interval); const updateAggregationUsage = useCallback( ({ value }) => { setUseAggregation(value); }, [setUseAggregation], ); const updateInterval = useCallback( ({ value }) => { setCurrentInterval(value); }, [setCurrentInterval], ); const updateMethod = useCallback( ({ value }) => { setCurrentFunction(value); }, [setCurrentFunction], ); const calculateRangeArea = useCallback((aggregationInfo) => { if (!aggregationInfo.data.length) { return null; } const temp = aggregationInfo.data.map((item) => item.temp); return { date: new Date( (aggregationInfo.intervalStart.valueOf() + aggregationInfo.intervalEnd.valueOf()) / 2, ), maxTemp: Math.max.apply(null, temp), minTemp: Math.min.apply(null, temp), }; }, []); return ( <div id="chart-demo"> <Chart id="chart" dataSource={weatherData} > <CommonSeriesSettings argumentField="date" /> <Series axis="precipitation" color="#03a9f4" type="bar" valueField="precipitation" name="Precipitation" /> <Series axis="temperature" color="#ffc0bb" type="rangearea" rangeValue1Field="minTemp" rangeValue2Field="maxTemp" name="Temperature range" > <Aggregation enabled={useAggregation} calculate={calculateRangeArea} method="custom" /> </Series> <Series axis="temperature" color="#e91e63" valueField="temp" name="Average temperature" > <Point size={7} /> <Aggregation enabled={useAggregation} method={currentFunction} /> </Series> <ArgumentAxis aggregationInterval={currentInterval} valueMarginsEnabled={false} argumentType="datetime" /> <ValueAxis name="temperature"> <Title text="Temperature, °C"> <Font color="#e91e63" /> </Title> <Label> <Font color="#e91e63" /> </Label> </ValueAxis> <ValueAxis name="precipitation" position="right" > <Title text="Precipitation, mm"> <Font color="#03a9f4" /> </Title> <Label> <Font color="#03a9f4" /> </Label> </ValueAxis> <Legend visible={false} /> <Tooltip enabled={true} customizeTooltip={customizeTooltip} /> <Title text="Weather in Las Vegas, NV (2017)" /> </Chart> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox value={useAggregation} onValueChanged={updateAggregationUsage} text="Aggregation enabled" /> </div> <div className="option"> <span>Interval:</span>&nbsp; <SelectBox dataSource={aggregationIntervals} value={currentInterval} inputAttr={intervalLabel} onValueChanged={updateInterval} displayExpr="displayName" valueExpr="interval" /> </div> <div className="option"> <span>Method:</span>&nbsp; <SelectBox dataSource={aggregationFunctions} inputAttr={functionLabel} value={currentFunction} onValueChanged={updateMethod} displayExpr="displayName" valueExpr="func" /> </div> </div> </div> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
import { IAggregationProps, IArgumentAxisProps } from 'devextreme-react/chart'; export const aggregationIntervals: { displayName: string, interval: IArgumentAxisProps['aggregationInterval'], }[] = [ { displayName: 'One week', interval: 'week' }, { displayName: 'Two weeks', interval: { weeks: 2 } }, { displayName: 'Month', interval: 'month' }, ]; export const aggregationFunctions: { displayName: string, func: IAggregationProps['method'], }[] = [ { displayName: 'Average', func: 'avg' }, { displayName: 'Minimum', func: 'min' }, { displayName: 'Maximum', func: 'max' }, ]; export const weatherData = [{ date: '2017-01-01', temp: 9.5, precipitation: 0.1, }, { date: '2017-01-02', temp: 8, precipitation: 0.4, }, { date: '2017-01-03', temp: 7.5, precipitation: 0.2, }, { date: '2017-01-04', temp: 8.5, precipitation: 0.1, }, { date: '2017-01-05', temp: 10, precipitation: 0.3, }, { date: '2017-01-06', temp: 3, precipitation: 0, }, { date: '2017-01-07', temp: 5, precipitation: 0.3, }, { date: '2017-01-08', temp: 9.5, precipitation: 0, }, { date: '2017-01-09', temp: 11, precipitation: 0.5, }, { date: '2017-01-10', temp: 8, precipitation: 0, }, { date: '2017-01-11', temp: 11.5, precipitation: 0.3, }, { date: '2017-01-12', temp: 9.5, precipitation: 2.1, }, { date: '2017-01-13', temp: 11.5, precipitation: 3.5, }, { date: '2017-01-14', temp: 11, precipitation: 0.1, }, { date: '2017-01-15', temp: 10.5, precipitation: 0, }, { date: '2017-01-16', temp: 6.5, precipitation: 0, }, { date: '2017-01-17', temp: 7.5, precipitation: 0, }, { date: '2017-01-18', temp: 8, precipitation: 0.1, }, { date: '2017-01-19', temp: 8.5, precipitation: 1.3, }, { date: '2017-01-20', temp: 5.5, precipitation: 5.3, }, { date: '2017-01-21', temp: 9, precipitation: 0.1, }, { date: '2017-01-22', temp: 6, precipitation: 16.6, }, { date: '2017-01-23', temp: 8.5, precipitation: 5.5, }, { date: '2017-01-24', temp: 6.5, precipitation: 1.3, }, { date: '2017-01-25', temp: 4.5, precipitation: 0, }, { date: '2017-01-26', temp: 5.5, precipitation: 0, }, { date: '2017-01-27', temp: 3, precipitation: 0, }, { date: '2017-01-28', temp: 6.5, precipitation: 0, }, { date: '2017-01-29', temp: 8, precipitation: 0, }, { date: '2017-01-30', temp: 10.5, precipitation: 0, }, { date: '2017-01-31', temp: 13, precipitation: 0, }, { date: '2017-02-01', temp: 10.5, precipitation: 0, }, { date: '2017-02-02', temp: 12, precipitation: 0, }, { date: '2017-02-03', temp: 13, precipitation: 0.2, }, { date: '2017-02-04', temp: 10, precipitation: 0, }, { date: '2017-02-05', temp: 11.5, precipitation: 0, }, { date: '2017-02-06', temp: 11.5, precipitation: 0.1, }, { date: '2017-02-07', temp: 12.5, precipitation: 0.5, }, { date: '2017-02-08', temp: 13, precipitation: 0, }, { date: '2017-02-09', temp: 15.5, precipitation: 0, }, { date: '2017-02-10', temp: 16.5, precipitation: 0.1, }, { date: '2017-02-11', temp: 14.5, precipitation: 0.8, }, { date: '2017-02-12', temp: 13.5, precipitation: 0.1, }, { date: '2017-02-13', temp: 13.5, precipitation: 0, }, { date: '2017-02-14', temp: 12, precipitation: 0, }, { date: '2017-02-15', temp: 13.5, precipitation: 0, }, { date: '2017-02-16', temp: 14.5, precipitation: 0, }, { date: '2017-02-17', temp: 12.5, precipitation: 4.5, }, { date: '2017-02-18', temp: 10, precipitation: 14.4, }, { date: '2017-02-19', temp: 13.5, precipitation: 0.5, }, { date: '2017-02-20', temp: 14, precipitation: 0.6, }, { date: '2017-02-21', temp: 15, precipitation: 0, }, { date: '2017-02-22', temp: 11, precipitation: 0, }, { date: '2017-02-23', temp: 7.5, precipitation: 0, }, { date: '2017-02-24', temp: 6, precipitation: 0, }, { date: '2017-02-25', temp: 7, precipitation: 0, }, { date: '2017-02-26', temp: 8, precipitation: 0, }, { date: '2017-02-27', temp: 8.5, precipitation: 0.1, }, { date: '2017-02-28', temp: 10, precipitation: 0, }, { date: '2017-03-01', temp: 9, precipitation: 0, }, { date: '2017-03-02', temp: 11, precipitation: 0, }, { date: '2017-03-03', temp: 15, precipitation: 0, }, { date: '2017-03-04', temp: 14.5, precipitation: 0, }, { date: '2017-03-05', temp: 12.5, precipitation: 0, }, { date: '2017-03-06', temp: 7.5, precipitation: 0, }, { date: '2017-03-07', temp: 11, precipitation: 0, }, { date: '2017-03-08', temp: 16, precipitation: 0, }, { date: '2017-03-09', temp: 19.5, precipitation: 0, }, { date: '2017-03-10', temp: 20, precipitation: 0, }, { date: '2017-03-11', temp: 20.5, precipitation: 0, }, { date: '2017-03-12', temp: 21.5, precipitation: 0, }, { date: '2017-03-13', temp: 21.5, precipitation: 0, }, { date: '2017-03-14', temp: 23.5, precipitation: 0, }, { date: '2017-03-15', temp: 23, precipitation: 0, }, { date: '2017-03-16', temp: 23, precipitation: 0, }, { date: '2017-03-17', temp: 22.5, precipitation: 0, }, { date: '2017-03-18', temp: 23.5, precipitation: 0, }, { date: '2017-03-19', temp: 24, precipitation: 0, }, { date: '2017-03-20', temp: 23.5, precipitation: 0, }, { date: '2017-03-21', temp: 22, precipitation: 0, }, { date: '2017-03-22', temp: 18.5, precipitation: 4, }, { date: '2017-03-23', temp: 15, precipitation: 2.4, }, { date: '2017-03-24', temp: 20.5, precipitation: 0, }, { date: '2017-03-25', temp: 19, precipitation: 0, }, { date: '2017-03-26', temp: 18.5, precipitation: 0, }, { date: '2017-03-27', temp: 18, precipitation: 0, }, { date: '2017-03-28', temp: 17, precipitation: 0, }, { date: '2017-03-29', temp: 21, precipitation: 0, }, { date: '2017-03-30', temp: 19.5, precipitation: 0, }, { date: '2017-03-31', temp: 16.5, precipitation: 0.2, }, { date: '2017-04-01', temp: 19, precipitation: 0, }, { date: '2017-04-02', temp: 20, precipitation: 0, }, { date: '2017-04-03', temp: 18, precipitation: 0, }, { date: '2017-04-04', temp: 16.5, precipitation: 0, }, { date: '2017-04-05', temp: 17, precipitation: 0, }, { date: '2017-04-06', temp: 21.5, precipitation: 0, }, { date: '2017-04-07', temp: 22, precipitation: 0, }, { date: '2017-04-08', temp: 19, precipitation: 0.2, }, { date: '2017-04-09', temp: 14.5, precipitation: 0, }, { date: '2017-04-10', temp: 17, precipitation: 0, }, { date: '2017-04-11', temp: 19.5, precipitation: 0, }, { date: '2017-04-12', temp: 21.5, precipitation: 0, }, { date: '2017-04-13', temp: 21.5, precipitation: 0, }, { date: '2017-04-14', temp: 19, precipitation: 0, }, { date: '2017-04-15', temp: 21, precipitation: 0, }, { date: '2017-04-16', temp: 22.5, precipitation: 0, }, { date: '2017-04-17', temp: 21.5, precipitation: 0, }, { date: '2017-04-18', temp: 21.5, precipitation: 0, }, { date: '2017-04-19', temp: 21.5, precipitation: 0, }, { date: '2017-04-20', temp: 22, precipitation: 0, }, { date: '2017-04-21', temp: 20, precipitation: 0, }, { date: '2017-04-22', temp: 23, precipitation: 0, }, { date: '2017-04-23', temp: 26, precipitation: 0, }, { date: '2017-04-24', temp: 25, precipitation: 0, }, { date: '2017-04-25', temp: 22, precipitation: 0, }, { date: '2017-04-26', temp: 23.5, precipitation: 0, }, { date: '2017-04-27', temp: 23, precipitation: 0, }, { date: '2017-04-28', temp: 19, precipitation: 0, }, { date: '2017-04-29', temp: 19.5, precipitation: 0, }, { date: '2017-04-30', temp: 21.5, precipitation: 0, }, { date: '2017-05-01', temp: 26, precipitation: 0, }, { date: '2017-05-02', temp: 26, precipitation: 0, }, { date: '2017-05-03', temp: 25.5, precipitation: 0, }, { date: '2017-05-04', temp: 28, precipitation: 0, }, { date: '2017-05-05', temp: 28.5, precipitation: 0, }, { date: '2017-05-06', temp: 27, precipitation: 0.4, }, { date: '2017-05-07', temp: 17, precipitation: 0.1, }, { date: '2017-05-08', temp: 17, precipitation: 0, }, { date: '2017-05-09', temp: 20, precipitation: 1.7, }, { date: '2017-05-10', temp: 19.5, precipitation: 0.3, }, { date: '2017-05-11', temp: 23, precipitation: 0, }, { date: '2017-05-12', temp: 26, precipitation: 0, }, { date: '2017-05-13', temp: 22.5, precipitation: 0, }, { date: '2017-05-14', temp: 23, precipitation: 0, }, { date: '2017-05-15', temp: 19.5, precipitation: 0, }, { date: '2017-05-16', temp: 20, precipitation: 0, }, { date: '2017-05-17', temp: 18.5, precipitation: 0, }, { date: '2017-05-18', temp: 19.5, precipitation: 0, }, { date: '2017-05-19', temp: 21.5, precipitation: 0, }, { date: '2017-05-20', temp: 24, precipitation: 0, }, { date: '2017-05-21', temp: 27.5, precipitation: 0, }, { date: '2017-05-22', temp: 29, precipitation: 0, }, { date: '2017-05-23', temp: 30.5, precipitation: 0, }, { date: '2017-05-24', temp: 31, precipitation: 0, }, { date: '2017-05-25', temp: 29.5, precipitation: 0, }, { date: '2017-05-26', temp: 27, precipitation: 0, }, { date: '2017-05-27', temp: 26, precipitation: 0, }, { date: '2017-05-28', temp: 29, precipitation: 0, }, { date: '2017-05-29', temp: 30.5, precipitation: 0, }, { date: '2017-05-30', temp: 31.5, precipitation: 0, }, { date: '2017-05-31', temp: 29.5, precipitation: 0, }, { date: '2017-06-01', temp: 28, precipitation: 0, }, { date: '2017-06-02', temp: 30, precipitation: 0, }, { date: '2017-06-03', temp: 32.5, precipitation: 0, }, { date: '2017-06-04', temp: 32, precipitation: 0, }, { date: '2017-06-05', temp: 31.5, precipitation: 0, }, { date: '2017-06-06', temp: 33, precipitation: 0, }, { date: '2017-06-07', temp: 32.5, precipitation: 0, }, { date: '2017-06-08', temp: 31.5, precipitation: 0, }, { date: '2017-06-09', temp: 31.5, precipitation: 0, }, { date: '2017-06-10', temp: 29, precipitation: 0, }, { date: '2017-06-11', temp: 26, precipitation: 0, }, { date: '2017-06-12', temp: 21, precipitation: 0, }, { date: '2017-06-13', temp: 25, precipitation: 0, }, { date: '2017-06-14', temp: 30.5, precipitation: 0, }, { date: '2017-06-15', temp: 32, precipitation: 0, }, { date: '2017-06-16', temp: 34.5, precipitation: 0, }, { date: '2017-06-17', temp: 36, precipitation: 0, }, { date: '2017-06-18', temp: 36, precipitation: 0, }, { date: '2017-06-19', temp: 37.5, precipitation: 0, }, { date: '2017-06-20', temp: 39, precipitation: 0, }, { date: '2017-06-21', temp: 38, precipitation: 0, }, { date: '2017-06-22', temp: 37.5, precipitation: 0, }, { date: '2017-06-23', temp: 37, precipitation: 0, }, { date: '2017-06-24', temp: 37.5, precipitation: 0, }, { date: '2017-06-25', temp: 37, precipitation: 0, }, { date: '2017-06-26', temp: 36.5, precipitation: 0, }, { date: '2017-06-27', temp: 34, precipitation: 0, }, { date: '2017-06-28', temp: 34, precipitation: 0, }, { date: '2017-06-29', temp: 37.5, precipitation: 0, }, { date: '2017-06-30', temp: 35, precipitation: 0, }, { date: '2017-07-01', temp: 37.5, precipitation: 0, }, { date: '2017-07-02', temp: 35.5, precipitation: 0, }, { date: '2017-07-03', temp: 36.5, precipitation: 0, }, { date: '2017-07-04', temp: 37, precipitation: 0, }, { date: '2017-07-05', temp: 39, precipitation: 0, }, { date: '2017-07-06', temp: 39.5, precipitation: 0, }, { date: '2017-07-07', temp: 40, precipitation: 0, }, { date: '2017-07-08', temp: 39, precipitation: 0, }, { date: '2017-07-09', temp: 36.5, precipitation: 0, }, { date: '2017-07-10', temp: 37, precipitation: 0, }, { date: '2017-07-11', temp: 36.5, precipitation: 0.1, }, { date: '2017-07-12', temp: 36.5, precipitation: 0, }, { date: '2017-07-13', temp: 38, precipitation: 0, }, { date: '2017-07-14', temp: 39.5, precipitation: 0, }, { date: '2017-07-15', temp: 40, precipitation: 0, }, { date: '2017-07-16', temp: 38.5, precipitation: 0, }, { date: '2017-07-17', temp: 37, precipitation: 0, }, { date: '2017-07-18', temp: 37, precipitation: 0, }, { date: '2017-07-19', temp: 34, precipitation: 0.4, }, { date: '2017-07-20', temp: 34.5, precipitation: 0, }, { date: '2017-07-21', temp: 36.5, precipitation: 0, }, { date: '2017-07-22', temp: 36.5, precipitation: 0, }, { date: '2017-07-23', temp: 38, precipitation: 0, }, { date: '2017-07-24', temp: 34, precipitation: 0.1, }, { date: '2017-07-25', temp: 34, precipitation: 0, }, { date: '2017-07-26', temp: 33.5, precipitation: 0.2, }, { date: '2017-07-27', temp: 36, precipitation: 0, }, { date: '2017-07-28', temp: 38, precipitation: 0, }, { date: '2017-07-29', temp: 36.5, precipitation: 0, }, { date: '2017-07-30', temp: 37.5, precipitation: 0.1, }, { date: '2017-07-31', temp: 37, precipitation: 0, }, { date: '2017-08-01', temp: 37, precipitation: 0, }, { date: '2017-08-02', temp: 35.5, precipitation: 0.1, }, { date: '2017-08-03', temp: 33.5, precipitation: 0.9, }, { date: '2017-08-04', temp: 32, precipitation: 0.1, }, { date: '2017-08-05', temp: 33.5, precipitation: 0.1, }, { date: '2017-08-06', temp: 34, precipitation: 0, }, { date: '2017-08-07', temp: 33.5, precipitation: 0, }, { date: '2017-08-08', temp: 35.5, precipitation: 0, }, { date: '2017-08-09', temp: 36, precipitation: 0, }, { date: '2017-08-10', temp: 35.5, precipitation: 0, }, { date: '2017-08-11', temp: 35, precipitation: 0, }, { date: '2017-08-12', temp: 35.5, precipitation: 0.1, }, { date: '2017-08-13', temp: 34, precipitation: 0, }, { date: '2017-08-14', temp: 32.5, precipitation: 0, }, { date: '2017-08-15', temp: 30, precipitation: 0, }, { date: '2017-08-16', temp: 31, precipitation: 0, }, { date: '2017-08-17', temp: 33.5, precipitation: 0, }, { date: '2017-08-18', temp: 34.5, precipitation: 0, }, { date: '2017-08-19', temp: 34, precipitation: 0, }, { date: '2017-08-20', temp: 33, precipitation: 0, }, { date: '2017-08-21', temp: 32, precipitation: 0, }, { date: '2017-08-22', temp: 32.5, precipitation: 0, }, { date: '2017-08-23', temp: 33, precipitation: 0, }, { date: '2017-08-24', temp: 33, precipitation: 0, }, { date: '2017-08-25', temp: 33.5, precipitation: 0, }, { date: '2017-08-26', temp: 36, precipitation: 0, }, { date: '2017-08-27', temp: 37, precipitation: 0, }, { date: '2017-08-28', temp: 37, precipitation: 0, }, { date: '2017-08-29', temp: 36.5, precipitation: 0, }, { date: '2017-08-30', temp: 36, precipitation: 0.3, }, { date: '2017-08-31', temp: 33.5, precipitation: 0.3, }, { date: '2017-09-01', temp: 33.5, precipitation: 0, }, { date: '2017-09-02', temp: 34.5, precipitation: 0, }, { date: '2017-09-03', temp: 34, precipitation: 0.1, }, { date: '2017-09-04', temp: 29.5, precipitation: 0, }, { date: '2017-09-05', temp: 33, precipitation: 0, }, { date: '2017-09-06', temp: 32, precipitation: 0, }, { date: '2017-09-07', temp: 32, precipitation: 0, }, { date: '2017-09-08', temp: 28, precipitation: 1.7, }, { date: '2017-09-09', temp: 23, precipitation: 7.6, }, { date: '2017-09-10', temp: 29, precipitation: 0, }, { date: '2017-09-11', temp: 32, precipitation: 0, }, { date: '2017-09-12', temp: 31, precipitation: 0, }, { date: '2017-09-13', temp: 30.5, precipitation: 0, }, { date: '2017-09-14', temp: 26, precipitation: 0, }, { date: '2017-09-15', temp: 23.5, precipitation: 0, }, { date: '2017-09-16', temp: 24.5, precipitation: 0, }, { date: '2017-09-17', temp: 25, precipitation: 0, }, { date: '2017-09-18', temp: 26.5, precipitation: 0, }, { date: '2017-09-19', temp: 24.5, precipitation: 0, }, { date: '2017-09-20', temp: 24.5, precipitation: 0, }, { date: '2017-09-21', temp: 20, precipitation: 0, }, { date: '2017-09-22', temp: 17, precipitation: 0, }, { date: '2017-09-23', temp: 15.5, precipitation: 0, }, { date: '2017-09-24', temp: 17.5, precipitation: 0, }, { date: '2017-09-25', temp: 18, precipitation: 0, }, { date: '2017-09-26', temp: 18.5, precipitation: 0, }, { date: '2017-09-27', temp: 21.5, precipitation: 0, }, { date: '2017-09-28', temp: 22, precipitation: 0, }, { date: '2017-09-29', temp: 24, precipitation: 0, }, { date: '2017-09-30', temp: 25, precipitation: 0, }, { date: '2017-10-01', temp: 23, precipitation: 0, }, { date: '2017-10-02', temp: 18, precipitation: 0, }, { date: '2017-10-03', temp: 18.5, precipitation: 0, }, { date: '2017-10-04', temp: 18.5, precipitation: 0, }, { date: '2017-10-05', temp: 21.5, precipitation: 0, }, { date: '2017-10-06', temp: 19.5, precipitation: 0, }, { date: '2017-10-07', temp: 23, precipitation: 0, }, { date: '2017-10-08', temp: 24, precipitation: 0, }, { date: '2017-10-09', temp: 14.5, precipitation: 0, }, { date: '2017-10-10', temp: 18, precipitation: 0, }, { date: '2017-10-11', temp: 20, precipitation: 0, }, { date: '2017-10-12', temp: 20, precipitation: 0, }, { date: '2017-10-13', temp: 21, precipitation: 0, }, { date: '2017-10-14', temp: 17, precipitation: 0, }, { date: '2017-10-15', temp: 18, precipitation: 0, }, { date: '2017-10-16', temp: 20.5, precipitation: 0, }, { date: '2017-10-17', temp: 21.5, precipitation: 0, }, { date: '2017-10-18', temp: 21.5, precipitation: 0, }, { date: '2017-10-19', temp: 22.5, precipitation: 0, }, { date: '2017-10-20', temp: 18, precipitation: 0, }, { date: '2017-10-21', temp: 15, precipitation: 0, }, { date: '2017-10-22', temp: 19.5, precipitation: 0, }, { date: '2017-10-23', temp: 22, precipitation: 0, }, { date: '2017-10-24', temp: 20.5, precipitation: 0, }, { date: '2017-10-25', temp: 21, precipitation: 0, }, { date: '2017-10-26', temp: 22, precipitation: 0, }, { date: '2017-10-27', temp: 20, precipitation: 0, }, { date: '2017-10-28', temp: 19.5, precipitation: 0, }, { date: '2017-10-29', temp: 21, precipitation: 0, }, { date: '2017-10-30', temp: 19.5, precipitation: 0, }, { date: '2017-10-31', temp: 17.5, precipitation: 0, }, { date: '2017-11-01', temp: 18, precipitation: 0, }, { date: '2017-11-02', temp: 15, precipitation: 0, }, { date: '2017-11-03', temp: 14.5, precipitation: 0, }, { date: '2017-11-04', temp: 16.5, precipitation: 0, }, { date: '2017-11-05', temp: 12.5, precipitation: 0, }, { date: '2017-11-06', temp: 12, precipitation: 0, }, { date: '2017-11-07', temp: 14, precipitation: 0, }, { date: '2017-11-08', temp: 14.5, precipitation: 0, }, { date: '2017-11-09', temp: 16.5, precipitation: 0, }, { date: '2017-11-10', temp: 16, precipitation: 0, }, { date: '2017-11-11', temp: 14.5, precipitation: 0, }, { date: '2017-11-12', temp: 14.5, precipitation: 0, }, { date: '2017-11-13', temp: 16.5, precipitation: 0, }, { date: '2017-11-14', temp: 14.5, precipitation: 0, }, { date: '2017-11-15', temp: 16.5, precipitation: 0, }, { date: '2017-11-16', temp: 15, precipitation: 0, }, { date: '2017-11-17', temp: 17, precipitation: 0, }, { date: '2017-11-18', temp: 8.5, precipitation: 0, }, { date: '2017-11-19', temp: 11, precipitation: 0, }, { date: '2017-11-20', temp: 12, precipitation: 0, }, { date: '2017-11-21', temp: 15.5, precipitation: 0, }, { date: '2017-11-22', temp: 18.5, precipitation: 0, }, { date: '2017-11-23', temp: 18.5, precipitation: 0, }, { date: '2017-11-24', temp: 18, precipitation: 0, }, { date: '2017-11-25', temp: 18.5, precipitation: 0, }, { date: '2017-11-26', temp: 17.5, precipitation: 0, }, { date: '2017-11-27', temp: 13, precipitation: 0, }, { date: '2017-11-28', temp: 10, precipitation: 0, }, { date: '2017-11-29', temp: 12.5, precipitation: 0, }, { date: '2017-11-30', temp: 11.5, precipitation: 0, }, { date: '2017-12-01', temp: 14, precipitation: 0, }, { date: '2017-12-02', temp: 13.5, precipitation: 0, }, { date: '2017-12-03', temp: 13.5, precipitation: 0, }, { date: '2017-12-04', temp: 4.5, precipitation: 0, }, { date: '2017-12-05', temp: 5, precipitation: 0, }, { date: '2017-12-06', temp: 7, precipitation: 0, }, { date: '2017-12-07', temp: 6.5, precipitation: 0, }, { date: '2017-12-08', temp: 10, precipitation: 0, }, { date: '2017-12-09', temp: 10, precipitation: 0, }, { date: '2017-12-10', temp: 10, precipitation: 0, }, { date: '2017-12-11', temp: 10.5, precipitation: 0, }, { date: '2017-12-12', temp: 12, precipitation: 0, }, { date: '2017-12-13', temp: 12.5, precipitation: 0, }, { date: '2017-12-14', temp: 9, precipitation: 0, }, { date: '2017-12-15', temp: 10, precipitation: 0, }, { date: '2017-12-16', temp: 8, precipitation: 0, }, { date: '2017-12-17', temp: 6, precipitation: 0, }, { date: '2017-12-18', temp: 7.5, precipitation: 0, }, { date: '2017-12-19', temp: 9.5, precipitation: 0, }, { date: '2017-12-20', temp: 8.5, precipitation: 0, }, { date: '2017-12-21', temp: 3, precipitation: 0, }, { date: '2017-12-22', temp: 4, precipitation: 0, }, { date: '2017-12-23', temp: 6, precipitation: 0, }, { date: '2017-12-24', temp: 8, precipitation: 0, }, { date: '2017-12-25', temp: 10, precipitation: 0, }, { date: '2017-12-26', temp: 11, precipitation: 0, }, { date: '2017-12-27', temp: 12, precipitation: 0, }, { date: '2017-12-28', temp: 12, precipitation: 0, }, { date: '2017-12-29', temp: 13.5, precipitation: 0, }, { date: '2017-12-30', temp: 12, precipitation: 0, }, { date: '2017-12-31', temp: 11, precipitation: 0, }]; export const intervalLabel = { 'aria-label': 'Interval' }; export const functionLabel = { 'aria-label': 'Function' };
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', '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', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const aggregationIntervals = [ { displayName: 'One week', interval: 'week' }, { displayName: 'Two weeks', interval: { weeks: 2 } }, { displayName: 'Month', interval: 'month' }, ]; export const aggregationFunctions = [ { displayName: 'Average', func: 'avg' }, { displayName: 'Minimum', func: 'min' }, { displayName: 'Maximum', func: 'max' }, ]; export const weatherData = [ { date: '2017-01-01', temp: 9.5, precipitation: 0.1, }, { date: '2017-01-02', temp: 8, precipitation: 0.4, }, { date: '2017-01-03', temp: 7.5, precipitation: 0.2, }, { date: '2017-01-04', temp: 8.5, precipitation: 0.1, }, { date: '2017-01-05', temp: 10, precipitation: 0.3, }, { date: '2017-01-06', temp: 3, precipitation: 0, }, { date: '2017-01-07', temp: 5, precipitation: 0.3, }, { date: '2017-01-08', temp: 9.5, precipitation: 0, }, { date: '2017-01-09', temp: 11, precipitation: 0.5, }, { date: '2017-01-10', temp: 8, precipitation: 0, }, { date: '2017-01-11', temp: 11.5, precipitation: 0.3, }, { date: '2017-01-12', temp: 9.5, precipitation: 2.1, }, { date: '2017-01-13', temp: 11.5, precipitation: 3.5, }, { date: '2017-01-14', temp: 11, precipitation: 0.1, }, { date: '2017-01-15', temp: 10.5, precipitation: 0, }, { date: '2017-01-16', temp: 6.5, precipitation: 0, }, { date: '2017-01-17', temp: 7.5, precipitation: 0, }, { date: '2017-01-18', temp: 8, precipitation: 0.1, }, { date: '2017-01-19', temp: 8.5, precipitation: 1.3, }, { date: '2017-01-20', temp: 5.5, precipitation: 5.3, }, { date: '2017-01-21', temp: 9, precipitation: 0.1, }, { date: '2017-01-22', temp: 6, precipitation: 16.6, }, { date: '2017-01-23', temp: 8.5, precipitation: 5.5, }, { date: '2017-01-24', temp: 6.5, precipitation: 1.3, }, { date: '2017-01-25', temp: 4.5, precipitation: 0, }, { date: '2017-01-26', temp: 5.5, precipitation: 0, }, { date: '2017-01-27', temp: 3, precipitation: 0, }, { date: '2017-01-28', temp: 6.5, precipitation: 0, }, { date: '2017-01-29', temp: 8, precipitation: 0, }, { date: '2017-01-30', temp: 10.5, precipitation: 0, }, { date: '2017-01-31', temp: 13, precipitation: 0, }, { date: '2017-02-01', temp: 10.5, precipitation: 0, }, { date: '2017-02-02', temp: 12, precipitation: 0, }, { date: '2017-02-03', temp: 13, precipitation: 0.2, }, { date: '2017-02-04', temp: 10, precipitation: 0, }, { date: '2017-02-05', temp: 11.5, precipitation: 0, }, { date: '2017-02-06', temp: 11.5, precipitation: 0.1, }, { date: '2017-02-07', temp: 12.5, precipitation: 0.5, }, { date: '2017-02-08', temp: 13, precipitation: 0, }, { date: '2017-02-09', temp: 15.5, precipitation: 0, }, { date: '2017-02-10', temp: 16.5, precipitation: 0.1, }, { date: '2017-02-11', temp: 14.5, precipitation: 0.8, }, { date: '2017-02-12', temp: 13.5, precipitation: 0.1, }, { date: '2017-02-13', temp: 13.5, precipitation: 0, }, { date: '2017-02-14', temp: 12, precipitation: 0, }, { date: '2017-02-15', temp: 13.5, precipitation: 0, }, { date: '2017-02-16', temp: 14.5, precipitation: 0, }, { date: '2017-02-17', temp: 12.5, precipitation: 4.5, }, { date: '2017-02-18', temp: 10, precipitation: 14.4, }, { date: '2017-02-19', temp: 13.5, precipitation: 0.5, }, { date: '2017-02-20', temp: 14, precipitation: 0.6, }, { date: '2017-02-21', temp: 15, precipitation: 0, }, { date: '2017-02-22', temp: 11, precipitation: 0, }, { date: '2017-02-23', temp: 7.5, precipitation: 0, }, { date: '2017-02-24', temp: 6, precipitation: 0, }, { date: '2017-02-25', temp: 7, precipitation: 0, }, { date: '2017-02-26', temp: 8, precipitation: 0, }, { date: '2017-02-27', temp: 8.5, precipitation: 0.1, }, { date: '2017-02-28', temp: 10, precipitation: 0, }, { date: '2017-03-01', temp: 9, precipitation: 0, }, { date: '2017-03-02', temp: 11, precipitation: 0, }, { date: '2017-03-03', temp: 15, precipitation: 0, }, { date: '2017-03-04', temp: 14.5, precipitation: 0, }, { date: '2017-03-05', temp: 12.5, precipitation: 0, }, { date: '2017-03-06', temp: 7.5, precipitation: 0, }, { date: '2017-03-07', temp: 11, precipitation: 0, }, { date: '2017-03-08', temp: 16, precipitation: 0, }, { date: '2017-03-09', temp: 19.5, precipitation: 0, }, { date: '2017-03-10', temp: 20, precipitation: 0, }, { date: '2017-03-11', temp: 20.5, precipitation: 0, }, { date: '2017-03-12', temp: 21.5, precipitation: 0, }, { date: '2017-03-13', temp: 21.5, precipitation: 0, }, { date: '2017-03-14', temp: 23.5, precipitation: 0, }, { date: '2017-03-15', temp: 23, precipitation: 0, }, { date: '2017-03-16', temp: 23, precipitation: 0, }, { date: '2017-03-17', temp: 22.5, precipitation: 0, }, { date: '2017-03-18', temp: 23.5, precipitation: 0, }, { date: '2017-03-19', temp: 24, precipitation: 0, }, { date: '2017-03-20', temp: 23.5, precipitation: 0, }, { date: '2017-03-21', temp: 22, precipitation: 0, }, { date: '2017-03-22', temp: 18.5, precipitation: 4, }, { date: '2017-03-23', temp: 15, precipitation: 2.4, }, { date: '2017-03-24', temp: 20.5, precipitation: 0, }, { date: '2017-03-25', temp: 19, precipitation: 0, }, { date: '2017-03-26', temp: 18.5, precipitation: 0, }, { date: '2017-03-27', temp: 18, precipitation: 0, }, { date: '2017-03-28', temp: 17, precipitation: 0, }, { date: '2017-03-29', temp: 21, precipitation: 0, }, { date: '2017-03-30', temp: 19.5, precipitation: 0, }, { date: '2017-03-31', temp: 16.5, precipitation: 0.2, }, { date: '2017-04-01', temp: 19, precipitation: 0, }, { date: '2017-04-02', temp: 20, precipitation: 0, }, { date: '2017-04-03', temp: 18, precipitation: 0, }, { date: '2017-04-04', temp: 16.5, precipitation: 0, }, { date: '2017-04-05', temp: 17, precipitation: 0, }, { date: '2017-04-06', temp: 21.5, precipitation: 0, }, { date: '2017-04-07', temp: 22, precipitation: 0, }, { date: '2017-04-08', temp: 19, precipitation: 0.2, }, { date: '2017-04-09', temp: 14.5, precipitation: 0, }, { date: '2017-04-10', temp: 17, precipitation: 0, }, { date: '2017-04-11', temp: 19.5, precipitation: 0, }, { date: '2017-04-12', temp: 21.5, precipitation: 0, }, { date: '2017-04-13', temp: 21.5, precipitation: 0, }, { date: '2017-04-14', temp: 19, precipitation: 0, }, { date: '2017-04-15', temp: 21, precipitation: 0, }, { date: '2017-04-16', temp: 22.5, precipitation: 0, }, { date: '2017-04-17', temp: 21.5, precipitation: 0, }, { date: '2017-04-18', temp: 21.5, precipitation: 0, }, { date: '2017-04-19', temp: 21.5, precipitation: 0, }, { date: '2017-04-20', temp: 22, precipitation: 0, }, { date: '2017-04-21', temp: 20, precipitation: 0, }, { date: '2017-04-22', temp: 23, precipitation: 0, }, { date: '2017-04-23', temp: 26, precipitation: 0, }, { date: '2017-04-24', temp: 25, precipitation: 0, }, { date: '2017-04-25', temp: 22, precipitation: 0, }, { date: '2017-04-26', temp: 23.5, precipitation: 0, }, { date: '2017-04-27', temp: 23, precipitation: 0, }, { date: '2017-04-28', temp: 19, precipitation: 0, }, { date: '2017-04-29', temp: 19.5, precipitation: 0, }, { date: '2017-04-30', temp: 21.5, precipitation: 0, }, { date: '2017-05-01', temp: 26, precipitation: 0, }, { date: '2017-05-02', temp: 26, precipitation: 0, }, { date: '2017-05-03', temp: 25.5, precipitation: 0, }, { date: '2017-05-04', temp: 28, precipitation: 0, }, { date: '2017-05-05', temp: 28.5, precipitation: 0, }, { date: '2017-05-06', temp: 27, precipitation: 0.4, }, { date: '2017-05-07', temp: 17, precipitation: 0.1, }, { date: '2017-05-08', temp: 17, precipitation: 0, }, { date: '2017-05-09', temp: 20, precipitation: 1.7, }, { date: '2017-05-10', temp: 19.5, precipitation: 0.3, }, { date: '2017-05-11', temp: 23, precipitation: 0, }, { date: '2017-05-12', temp: 26, precipitation: 0, }, { date: '2017-05-13', temp: 22.5, precipitation: 0, }, { date: '2017-05-14', temp: 23, precipitation: 0, }, { date: '2017-05-15', temp: 19.5, precipitation: 0, }, { date: '2017-05-16', temp: 20, precipitation: 0, }, { date: '2017-05-17', temp: 18.5, precipitation: 0, }, { date: '2017-05-18', temp: 19.5, precipitation: 0, }, { date: '2017-05-19', temp: 21.5, precipitation: 0, }, { date: '2017-05-20', temp: 24, precipitation: 0, }, { date: '2017-05-21', temp: 27.5, precipitation: 0, }, { date: '2017-05-22', temp: 29, precipitation: 0, }, { date: '2017-05-23', temp: 30.5, precipitation: 0, }, { date: '2017-05-24', temp: 31, precipitation: 0, }, { date: '2017-05-25', temp: 29.5, precipitation: 0, }, { date: '2017-05-26', temp: 27, precipitation: 0, }, { date: '2017-05-27', temp: 26, precipitation: 0, }, { date: '2017-05-28', temp: 29, precipitation: 0, }, { date: '2017-05-29', temp: 30.5, precipitation: 0, }, { date: '2017-05-30', temp: 31.5, precipitation: 0, }, { date: '2017-05-31', temp: 29.5, precipitation: 0, }, { date: '2017-06-01', temp: 28, precipitation: 0, }, { date: '2017-06-02', temp: 30, precipitation: 0, }, { date: '2017-06-03', temp: 32.5, precipitation: 0, }, { date: '2017-06-04', temp: 32, precipitation: 0, }, { date: '2017-06-05', temp: 31.5, precipitation: 0, }, { date: '2017-06-06', temp: 33, precipitation: 0, }, { date: '2017-06-07', temp: 32.5, precipitation: 0, }, { date: '2017-06-08', temp: 31.5, precipitation: 0, }, { date: '2017-06-09', temp: 31.5, precipitation: 0, }, { date: '2017-06-10', temp: 29, precipitation: 0, }, { date: '2017-06-11', temp: 26, precipitation: 0, }, { date: '2017-06-12', temp: 21, precipitation: 0, }, { date: '2017-06-13', temp: 25, precipitation: 0, }, { date: '2017-06-14', temp: 30.5, precipitation: 0, }, { date: '2017-06-15', temp: 32, precipitation: 0, }, { date: '2017-06-16', temp: 34.5, precipitation: 0, }, { date: '2017-06-17', temp: 36, precipitation: 0, }, { date: '2017-06-18', temp: 36, precipitation: 0, }, { date: '2017-06-19', temp: 37.5, precipitation: 0, }, { date: '2017-06-20', temp: 39, precipitation: 0, }, { date: '2017-06-21', temp: 38, precipitation: 0, }, { date: '2017-06-22', temp: 37.5, precipitation: 0, }, { date: '2017-06-23', temp: 37, precipitation: 0, }, { date: '2017-06-24', temp: 37.5, precipitation: 0, }, { date: '2017-06-25', temp: 37, precipitation: 0, }, { date: '2017-06-26', temp: 36.5, precipitation: 0, }, { date: '2017-06-27', temp: 34, precipitation: 0, }, { date: '2017-06-28', temp: 34, precipitation: 0, }, { date: '2017-06-29', temp: 37.5, precipitation: 0, }, { date: '2017-06-30', temp: 35, precipitation: 0, }, { date: '2017-07-01', temp: 37.5, precipitation: 0, }, { date: '2017-07-02', temp: 35.5, precipitation: 0, }, { date: '2017-07-03', temp: 36.5, precipitation: 0, }, { date: '2017-07-04', temp: 37, precipitation: 0, }, { date: '2017-07-05', temp: 39, precipitation: 0, }, { date: '2017-07-06', temp: 39.5, precipitation: 0, }, { date: '2017-07-07', temp: 40, precipitation: 0, }, { date: '2017-07-08', temp: 39, precipitation: 0, }, { date: '2017-07-09', temp: 36.5, precipitation: 0, }, { date: '2017-07-10', temp: 37, precipitation: 0, }, { date: '2017-07-11', temp: 36.5, precipitation: 0.1, }, { date: '2017-07-12', temp: 36.5, precipitation: 0, }, { date: '2017-07-13', temp: 38, precipitation: 0, }, { date: '2017-07-14', temp: 39.5, precipitation: 0, }, { date: '2017-07-15', temp: 40, precipitation: 0, }, { date: '2017-07-16', temp: 38.5, precipitation: 0, }, { date: '2017-07-17', temp: 37, precipitation: 0, }, { date: '2017-07-18', temp: 37, precipitation: 0, }, { date: '2017-07-19', temp: 34, precipitation: 0.4, }, { date: '2017-07-20', temp: 34.5, precipitation: 0, }, { date: '2017-07-21', temp: 36.5, precipitation: 0, }, { date: '2017-07-22', temp: 36.5, precipitation: 0, }, { date: '2017-07-23', temp: 38, precipitation: 0, }, { date: '2017-07-24', temp: 34, precipitation: 0.1, }, { date: '2017-07-25', temp: 34, precipitation: 0, }, { date: '2017-07-26', temp: 33.5, precipitation: 0.2, }, { date: '2017-07-27', temp: 36, precipitation: 0, }, { date: '2017-07-28', temp: 38, precipitation: 0, }, { date: '2017-07-29', temp: 36.5, precipitation: 0, }, { date: '2017-07-30', temp: 37.5, precipitation: 0.1, }, { date: '2017-07-31', temp: 37, precipitation: 0, }, { date: '2017-08-01', temp: 37, precipitation: 0, }, { date: '2017-08-02', temp: 35.5, precipitation: 0.1, }, { date: '2017-08-03', temp: 33.5, precipitation: 0.9, }, { date: '2017-08-04', temp: 32, precipitation: 0.1, }, { date: '2017-08-05', temp: 33.5, precipitation: 0.1, }, { date: '2017-08-06', temp: 34, precipitation: 0, }, { date: '2017-08-07', temp: 33.5, precipitation: 0, }, { date: '2017-08-08', temp: 35.5, precipitation: 0, }, { date: '2017-08-09', temp: 36, precipitation: 0, }, { date: '2017-08-10', temp: 35.5, precipitation: 0, }, { date: '2017-08-11', temp: 35, precipitation: 0, }, { date: '2017-08-12', temp: 35.5, precipitation: 0.1, }, { date: '2017-08-13', temp: 34, precipitation: 0, }, { date: '2017-08-14', temp: 32.5, precipitation: 0, }, { date: '2017-08-15', temp: 30, precipitation: 0, }, { date: '2017-08-16', temp: 31, precipitation: 0, }, { date: '2017-08-17', temp: 33.5, precipitation: 0, }, { date: '2017-08-18', temp: 34.5, precipitation: 0, }, { date: '2017-08-19', temp: 34, precipitation: 0, }, { date: '2017-08-20', temp: 33, precipitation: 0, }, { date: '2017-08-21', temp: 32, precipitation: 0, }, { date: '2017-08-22', temp: 32.5, precipitation: 0, }, { date: '2017-08-23', temp: 33, precipitation: 0, }, { date: '2017-08-24', temp: 33, precipitation: 0, }, { date: '2017-08-25', temp: 33.5, precipitation: 0, }, { date: '2017-08-26', temp: 36, precipitation: 0, }, { date: '2017-08-27', temp: 37, precipitation: 0, }, { date: '2017-08-28', temp: 37, precipitation: 0, }, { date: '2017-08-29', temp: 36.5, precipitation: 0, }, { date: '2017-08-30', temp: 36, precipitation: 0.3, }, { date: '2017-08-31', temp: 33.5, precipitation: 0.3, }, { date: '2017-09-01', temp: 33.5, precipitation: 0, }, { date: '2017-09-02', temp: 34.5, precipitation: 0, }, { date: '2017-09-03', temp: 34, precipitation: 0.1, }, { date: '2017-09-04', temp: 29.5, precipitation: 0, }, { date: '2017-09-05', temp: 33, precipitation: 0, }, { date: '2017-09-06', temp: 32, precipitation: 0, }, { date: '2017-09-07', temp: 32, precipitation: 0, }, { date: '2017-09-08', temp: 28, precipitation: 1.7, }, { date: '2017-09-09', temp: 23, precipitation: 7.6, }, { date: '2017-09-10', temp: 29, precipitation: 0, }, { date: '2017-09-11', temp: 32, precipitation: 0, }, { date: '2017-09-12', temp: 31, precipitation: 0, }, { date: '2017-09-13', temp: 30.5, precipitation: 0, }, { date: '2017-09-14', temp: 26, precipitation: 0, }, { date: '2017-09-15', temp: 23.5, precipitation: 0, }, { date: '2017-09-16', temp: 24.5, precipitation: 0, }, { date: '2017-09-17', temp: 25, precipitation: 0, }, { date: '2017-09-18', temp: 26.5, precipitation: 0, }, { date: '2017-09-19', temp: 24.5, precipitation: 0, }, { date: '2017-09-20', temp: 24.5, precipitation: 0, }, { date: '2017-09-21', temp: 20, precipitation: 0, }, { date: '2017-09-22', temp: 17, precipitation: 0, }, { date: '2017-09-23', temp: 15.5, precipitation: 0, }, { date: '2017-09-24', temp: 17.5, precipitation: 0, }, { date: '2017-09-25', temp: 18, precipitation: 0, }, { date: '2017-09-26', temp: 18.5, precipitation: 0, }, { date: '2017-09-27', temp: 21.5, precipitation: 0, }, { date: '2017-09-28', temp: 22, precipitation: 0, }, { date: '2017-09-29', temp: 24, precipitation: 0, }, { date: '2017-09-30', temp: 25, precipitation: 0, }, { date: '2017-10-01', temp: 23, precipitation: 0, }, { date: '2017-10-02', temp: 18, precipitation: 0, }, { date: '2017-10-03', temp: 18.5, precipitation: 0, }, { date: '2017-10-04', temp: 18.5, precipitation: 0, }, { date: '2017-10-05', temp: 21.5, precipitation: 0, }, { date: '2017-10-06', temp: 19.5, precipitation: 0, }, { date: '2017-10-07', temp: 23, precipitation: 0, }, { date: '2017-10-08', temp: 24, precipitation: 0, }, { date: '2017-10-09', temp: 14.5, precipitation: 0, }, { date: '2017-10-10', temp: 18, precipitation: 0, }, { date: '2017-10-11', temp: 20, precipitation: 0, }, { date: '2017-10-12', temp: 20, precipitation: 0, }, { date: '2017-10-13', temp: 21, precipitation: 0, }, { date: '2017-10-14', temp: 17, precipitation: 0, }, { date: '2017-10-15', temp: 18, precipitation: 0, }, { date: '2017-10-16', temp: 20.5, precipitation: 0, }, { date: '2017-10-17', temp: 21.5, precipitation: 0, }, { date: '2017-10-18', temp: 21.5, precipitation: 0, }, { date: '2017-10-19', temp: 22.5, precipitation: 0, }, { date: '2017-10-20', temp: 18, precipitation: 0, }, { date: '2017-10-21', temp: 15, precipitation: 0, }, { date: '2017-10-22', temp: 19.5, precipitation: 0, }, { date: '2017-10-23', temp: 22, precipitation: 0, }, { date: '2017-10-24', temp: 20.5, precipitation: 0, }, { date: '2017-10-25', temp: 21, precipitation: 0, }, { date: '2017-10-26', temp: 22, precipitation: 0, }, { date: '2017-10-27', temp: 20, precipitation: 0, }, { date: '2017-10-28', temp: 19.5, precipitation: 0, }, { date: '2017-10-29', temp: 21, precipitation: 0, }, { date: '2017-10-30', temp: 19.5, precipitation: 0, }, { date: '2017-10-31', temp: 17.5, precipitation: 0, }, { date: '2017-11-01', temp: 18, precipitation: 0, }, { date: '2017-11-02', temp: 15, precipitation: 0, }, { date: '2017-11-03', temp: 14.5, precipitation: 0, }, { date: '2017-11-04', temp: 16.5, precipitation: 0, }, { date: '2017-11-05', temp: 12.5, precipitation: 0, }, { date: '2017-11-06', temp: 12, precipitation: 0, }, { date: '2017-11-07', temp: 14, precipitation: 0, }, { date: '2017-11-08', temp: 14.5, precipitation: 0, }, { date: '2017-11-09', temp: 16.5, precipitation: 0, }, { date: '2017-11-10', temp: 16, precipitation: 0, }, { date: '2017-11-11', temp: 14.5, precipitation: 0, }, { date: '2017-11-12', temp: 14.5, precipitation: 0, }, { date: '2017-11-13', temp: 16.5, precipitation: 0, }, { date: '2017-11-14', temp: 14.5, precipitation: 0, }, { date: '2017-11-15', temp: 16.5, precipitation: 0, }, { date: '2017-11-16', temp: 15, precipitation: 0, }, { date: '2017-11-17', temp: 17, precipitation: 0, }, { date: '2017-11-18', temp: 8.5, precipitation: 0, }, { date: '2017-11-19', temp: 11, precipitation: 0, }, { date: '2017-11-20', temp: 12, precipitation: 0, }, { date: '2017-11-21', temp: 15.5, precipitation: 0, }, { date: '2017-11-22', temp: 18.5, precipitation: 0, }, { date: '2017-11-23', temp: 18.5, precipitation: 0, }, { date: '2017-11-24', temp: 18, precipitation: 0, }, { date: '2017-11-25', temp: 18.5, precipitation: 0, }, { date: '2017-11-26', temp: 17.5, precipitation: 0, }, { date: '2017-11-27', temp: 13, precipitation: 0, }, { date: '2017-11-28', temp: 10, precipitation: 0, }, { date: '2017-11-29', temp: 12.5, precipitation: 0, }, { date: '2017-11-30', temp: 11.5, precipitation: 0, }, { date: '2017-12-01', temp: 14, precipitation: 0, }, { date: '2017-12-02', temp: 13.5, precipitation: 0, }, { date: '2017-12-03', temp: 13.5, precipitation: 0, }, { date: '2017-12-04', temp: 4.5, precipitation: 0, }, { date: '2017-12-05', temp: 5, precipitation: 0, }, { date: '2017-12-06', temp: 7, precipitation: 0, }, { date: '2017-12-07', temp: 6.5, precipitation: 0, }, { date: '2017-12-08', temp: 10, precipitation: 0, }, { date: '2017-12-09', temp: 10, precipitation: 0, }, { date: '2017-12-10', temp: 10, precipitation: 0, }, { date: '2017-12-11', temp: 10.5, precipitation: 0, }, { date: '2017-12-12', temp: 12, precipitation: 0, }, { date: '2017-12-13', temp: 12.5, precipitation: 0, }, { date: '2017-12-14', temp: 9, precipitation: 0, }, { date: '2017-12-15', temp: 10, precipitation: 0, }, { date: '2017-12-16', temp: 8, precipitation: 0, }, { date: '2017-12-17', temp: 6, precipitation: 0, }, { date: '2017-12-18', temp: 7.5, precipitation: 0, }, { date: '2017-12-19', temp: 9.5, precipitation: 0, }, { date: '2017-12-20', temp: 8.5, precipitation: 0, }, { date: '2017-12-21', temp: 3, precipitation: 0, }, { date: '2017-12-22', temp: 4, precipitation: 0, }, { date: '2017-12-23', temp: 6, precipitation: 0, }, { date: '2017-12-24', temp: 8, precipitation: 0, }, { date: '2017-12-25', temp: 10, precipitation: 0, }, { date: '2017-12-26', temp: 11, precipitation: 0, }, { date: '2017-12-27', temp: 12, precipitation: 0, }, { date: '2017-12-28', temp: 12, precipitation: 0, }, { date: '2017-12-29', temp: 13.5, precipitation: 0, }, { date: '2017-12-30', temp: 12, precipitation: 0, }, { date: '2017-12-31', temp: 11, precipitation: 0, }, ]; export const intervalLabel = { 'aria-label': 'Interval' }; export const functionLabel = { 'aria-label': 'Function' };
<!DOCTYPE html> <html 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.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#chart-demo { height: 700px; } #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; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; }