<!DOCTYPE html><html><head><title>Time Series widget | CARTO</title><metaname="viewport"content="initial-scale=1.0"><metacharset="utf-8"><linkhref="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600"rel="stylesheet"><!-- Include CARTO.js --><script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.2/carto.min.js"></script><linkhref="https://carto.com/developers/carto-js/examples/maps/public/style.css"rel="stylesheet"></head><bodyclass="bg-gray"><divclass="dataview"><ul><li><h2class="h2">Column</h2><inputid="column"type="text"value="date"class="input_text open-sans"></input></li><li><h2class="h2">Aggregation</h2><selectid="aggregation"class="select"><optionvalue="auto">Auto</option><optionvalue="year">Year</option><optionvalue="quarter">Quarter</option><optionvalue="month">Month</option><optionvalue="week">Week</option><optionvalue="day">Day</option><optionvalue="hour">Hour</option><optionvalue="minute">Minute</option></select></li><li><h2class="h2">Offset</h2><inputid="offset"type="number"value="1"class="input_text open-sans"></input></li></ul><buttonclass="button open-sans"onclick="applyDataviewChanges()">Apply</button><preclass="code"id="data"></pre></div><asideclass="toolbox"><divclass="box"><header><h1>Time Series widget</h1><buttonclass="github-logo js-source-link"></button></header><section><pclass="description open-sans">Create a widget with the time series dataview.</p><divclass="separator"></div><sectionclass="usage"><header>USAGE</header><pclass="open-sans">Select different aggregations on the form.</p></section><divid="controls"><divid="info"></div></div></section><footerclass="js-footer"></footer></div></aside><script>constclient=newcarto.Client({apiKey:'YOUR_API_KEY',username:'cartojs-test'});constsource=newcarto.source.Dataset(`
railroad_data
`);consttimeseriesDataview=newcarto.dataview.TimeSeries(source,'date',{aggregation:carto.dataview.timeAggregation.AUTO,offset:1});timeseriesDataview.on('dataChanged',data=>{document.getElementById('data').innerHTML=JSON.stringify(data,null,4);});timeseriesDataview.on('error',error=>{alert(error.message);});client.addDataview(timeseriesDataview);functionapplyDataviewChanges(){constcolumn=document.getElementById('column').value;constaggregation=document.getElementById('aggregation').value;constoffset=document.getElementById('offset').value;timeseriesDataview.setColumn(column);timeseriesDataview.setAggregation(aggregation);timeseriesDataview.setOffset(parseInt(offset));}</script></body></html>