Drill-down column chart
This demo shows how we can show aggregated daily data as a column series, then drill-down into hourly data for the day on a click.
Example
Section titled “Example”/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
var data = [ { date: 1711929600000, visitors: 16 }, { date: 1711933200000, visitors: 146 }, { date: 1711936800000, visitors: 124 }, { date: 1711940400000, visitors: 185 }, { date: 1711944000000, visitors: 81 }, { date: 1711947600000, visitors: 68 }, { date: 1711951200000, visitors: 380 }, { date: 1711954800000, visitors: 241 }, { date: 1711958400000, visitors: 385 }, { date: 1711962000000, visitors: 422 }, { date: 1711965600000, visitors: 321 }, { date: 1711969200000, visitors: 332 }, { date: 1711972800000, visitors: 362 }, { date: 1711976400000, visitors: 414 }, { date: 1711980000000, visitors: 420 }, { date: 1711983600000, visitors: 434 }, { date: 1711987200000, visitors: 345 }, { date: 1711990800000, visitors: 438 }, { date: 1711994400000, visitors: 275 }, { date: 1711998000000, visitors: 208 }, { date: 1712001600000, visitors: 273 }, { date: 1712005200000, visitors: 452 }, { date: 1712008800000, visitors: 429 }, { date: 1712012400000, visitors: 177 }, { date: 1712016000000, visitors: 192 }, { date: 1712019600000, visitors: 117 }, { date: 1712023200000, visitors: 48 }, { date: 1712026800000, visitors: 24 }, { date: 1712030400000, visitors: 129 }, { date: 1712034000000, visitors: 13 }, { date: 1712037600000, visitors: 393 }, { date: 1712041200000, visitors: 204 }, { date: 1712044800000, visitors: 228 }, { date: 1712048400000, visitors: 364 }, { date: 1712052000000, visitors: 335 }, { date: 1712055600000, visitors: 344 }, { date: 1712059200000, visitors: 416 }, { date: 1712062800000, visitors: 331 }, { date: 1712066400000, visitors: 491 }, { date: 1712070000000, visitors: 269 }, { date: 1712073600000, visitors: 451 }, { date: 1712077200000, visitors: 474 }, { date: 1712080800000, visitors: 381 }, { date: 1712084400000, visitors: 366 }, { date: 1712088000000, visitors: 290 }, { date: 1712091600000, visitors: 401 }, { date: 1712095200000, visitors: 218 }, { date: 1712098800000, visitors: 132 }, { date: 1712102400000, visitors: 48 }, { date: 1712106000000, visitors: 55 }, { date: 1712109600000, visitors: 38 }, { date: 1712113200000, visitors: 199 }, { date: 1712116800000, visitors: 71 }, { date: 1712120400000, visitors: 194 }, { date: 1712124000000, visitors: 257 }, { date: 1712127600000, visitors: 347 }, { date: 1712131200000, visitors: 200 }, { date: 1712134800000, visitors: 389 }, { date: 1712138400000, visitors: 390 }, { date: 1712142000000, visitors: 316 }, { date: 1712145600000, visitors: 333 }, { date: 1712149200000, visitors: 257 }, { date: 1712152800000, visitors: 243 }, { date: 1712156400000, visitors: 372 }, { date: 1712160000000, visitors: 359 }, { date: 1712163600000, visitors: 372 }, { date: 1712167200000, visitors: 348 }, { date: 1712170800000, visitors: 279 }, { date: 1712174400000, visitors: 412 }, { date: 1712178000000, visitors: 402 }, { date: 1712181600000, visitors: 451 }, { date: 1712185200000, visitors: 155 }, { date: 1712188800000, visitors: 199 }, { date: 1712192400000, visitors: 46 }, { date: 1712196000000, visitors: 162 }, { date: 1712199600000, visitors: 185 }, { date: 1712203200000, visitors: 190 }, { date: 1712206800000, visitors: 82 }, { date: 1712210400000, visitors: 213 }, { date: 1712214000000, visitors: 342 }, { date: 1712217600000, visitors: 200 }, { date: 1712221200000, visitors: 253 }, { date: 1712224800000, visitors: 458 }, { date: 1712228400000, visitors: 343 }, { date: 1712232000000, visitors: 211 }, { date: 1712235600000, visitors: 423 }, { date: 1712239200000, visitors: 471 }, { date: 1712242800000, visitors: 355 }, { date: 1712246400000, visitors: 207 }, { date: 1712250000000, visitors: 321 }, { date: 1712253600000, visitors: 363 }, { date: 1712257200000, visitors: 289 }, { date: 1712260800000, visitors: 335 }, { date: 1712264400000, visitors: 385 }, { date: 1712268000000, visitors: 377 }, { date: 1712271600000, visitors: 86 }, { date: 1712275200000, visitors: 162 }, { date: 1712278800000, visitors: 61 }, { date: 1712282400000, visitors: 13 }, { date: 1712286000000, visitors: 68 }, { date: 1712289600000, visitors: 81 }, { date: 1712293200000, visitors: 157 }, { date: 1712296800000, visitors: 411 }, { date: 1712300400000, visitors: 419 }, { date: 1712304000000, visitors: 439 }, { date: 1712307600000, visitors: 245 }, { date: 1712311200000, visitors: 234 }, { date: 1712314800000, visitors: 452 }, { date: 1712318400000, visitors: 281 }, { date: 1712322000000, visitors: 455 }, { date: 1712325600000, visitors: 396 }, { date: 1712329200000, visitors: 209 }, { date: 1712332800000, visitors: 485 }, { date: 1712336400000, visitors: 441 }, { date: 1712340000000, visitors: 450 }, { date: 1712343600000, visitors: 204 }, { date: 1712347200000, visitors: 318 }, { date: 1712350800000, visitors: 488 }, { date: 1712354400000, visitors: 264 }, { date: 1712358000000, visitors: 18 }, { date: 1712361600000, visitors: 108 }, { date: 1712365200000, visitors: 29 }, { date: 1712368800000, visitors: 131 }, { date: 1712372400000, visitors: 70 }, { date: 1712376000000, visitors: 132 }, { date: 1712379600000, visitors: 172 }, { date: 1712383200000, visitors: 416 }, { date: 1712386800000, visitors: 482 }, { date: 1712390400000, visitors: 376 }, { date: 1712394000000, visitors: 297 }, { date: 1712397600000, visitors: 304 }, { date: 1712401200000, visitors: 298 }, { date: 1712404800000, visitors: 205 }, { date: 1712408400000, visitors: 396 }, { date: 1712412000000, visitors: 332 }, { date: 1712415600000, visitors: 458 }, { date: 1712419200000, visitors: 222 }, { date: 1712422800000, visitors: 252 }, { date: 1712426400000, visitors: 364 }, { date: 1712430000000, visitors: 401 }, { date: 1712433600000, visitors: 282 }, { date: 1712437200000, visitors: 344 }, { date: 1712440800000, visitors: 284 }, { date: 1712444400000, visitors: 193 }, { date: 1712448000000, visitors: 76 }, { date: 1712451600000, visitors: 132 }, { date: 1712455200000, visitors: 38 }, { date: 1712458800000, visitors: 146 }, { date: 1712462400000, visitors: 162 }, { date: 1712466000000, visitors: 85 }, { date: 1712469600000, visitors: 233 }, { date: 1712473200000, visitors: 294 }, { date: 1712476800000, visitors: 271 }, { date: 1712480400000, visitors: 238 }, { date: 1712484000000, visitors: 353 }, { date: 1712487600000, visitors: 449 }, { date: 1712491200000, visitors: 361 }, { date: 1712494800000, visitors: 317 }, { date: 1712498400000, visitors: 458 }, { date: 1712502000000, visitors: 467 }, { date: 1712505600000, visitors: 253 }, { date: 1712509200000, visitors: 435 }, { date: 1712512800000, visitors: 421 }, { date: 1712516400000, visitors: 450 }, { date: 1712520000000, visitors: 311 }, { date: 1712523600000, visitors: 454 }, { date: 1712527200000, visitors: 406 }, { date: 1712530800000, visitors: 37 }, { date: 1712534400000, visitors: 90 }, { date: 1712538000000, visitors: 123 }, { date: 1712541600000, visitors: 49 }, { date: 1712545200000, visitors: 54 }, { date: 1712548800000, visitors: 71 }, { date: 1712552400000, visitors: 102 }, { date: 1712556000000, visitors: 493 }, { date: 1712559600000, visitors: 297 }, { date: 1712563200000, visitors: 485 }, { date: 1712566800000, visitors: 448 }, { date: 1712570400000, visitors: 365 }, { date: 1712574000000, visitors: 229 }, { date: 1712577600000, visitors: 446 }, { date: 1712581200000, visitors: 305 }, { date: 1712584800000, visitors: 250 }, { date: 1712588400000, visitors: 280 }, { date: 1712592000000, visitors: 332 }, { date: 1712595600000, visitors: 484 }, { date: 1712599200000, visitors: 337 }, { date: 1712602800000, visitors: 383 }, { date: 1712606400000, visitors: 472 }, { date: 1712610000000, visitors: 268 }, { date: 1712613600000, visitors: 233 }, { date: 1712617200000, visitors: 57 }, { date: 1712620800000, visitors: 178 }, { date: 1712624400000, visitors: 22 }, { date: 1712628000000, visitors: 116 }, { date: 1712631600000, visitors: 54 }, { date: 1712635200000, visitors: 98 }, { date: 1712638800000, visitors: 190 }, { date: 1712642400000, visitors: 310 }, { date: 1712646000000, visitors: 448 }, { date: 1712649600000, visitors: 350 }, { date: 1712653200000, visitors: 382 }, { date: 1712656800000, visitors: 294 }, { date: 1712660400000, visitors: 207 }, { date: 1712664000000, visitors: 383 }, { date: 1712667600000, visitors: 480 }, { date: 1712671200000, visitors: 394 }, { date: 1712674800000, visitors: 394 }, { date: 1712678400000, visitors: 354 }, { date: 1712682000000, visitors: 292 }, { date: 1712685600000, visitors: 359 }, { date: 1712689200000, visitors: 260 }, { date: 1712692800000, visitors: 321 }, { date: 1712696400000, visitors: 250 }, { date: 1712700000000, visitors: 476 }, { date: 1712703600000, visitors: 48 }, { date: 1712707200000, visitors: 168 }, { date: 1712710800000, visitors: 91 }, { date: 1712714400000, visitors: 109 }, { date: 1712718000000, visitors: 11 }, { date: 1712721600000, visitors: 86 }, { date: 1712725200000, visitors: 21 }, { date: 1712728800000, visitors: 211 }, { date: 1712732400000, visitors: 245 }, { date: 1712736000000, visitors: 233 }, { date: 1712739600000, visitors: 277 }, { date: 1712743200000, visitors: 417 }, { date: 1712746800000, visitors: 272 }, { date: 1712750400000, visitors: 481 }, { date: 1712754000000, visitors: 448 }, { date: 1712757600000, visitors: 246 }, { date: 1712761200000, visitors: 320 }, { date: 1712764800000, visitors: 413 }, { date: 1712768400000, visitors: 438 }, { date: 1712772000000, visitors: 255 }, { date: 1712775600000, visitors: 306 }, { date: 1712779200000, visitors: 247 }, { date: 1712782800000, visitors: 260 }, { date: 1712786400000, visitors: 225 }, { date: 1712790000000, visitors: 69 }, { date: 1712793600000, visitors: 88 }, { date: 1712797200000, visitors: 46 }, { date: 1712800800000, visitors: 31 }, { date: 1712804400000, visitors: 157 }, { date: 1712808000000, visitors: 105 }, { date: 1712811600000, visitors: 77 }, { date: 1712815200000, visitors: 326 }, { date: 1712818800000, visitors: 255 }, { date: 1712822400000, visitors: 413 }, { date: 1712826000000, visitors: 213 }, { date: 1712829600000, visitors: 227 }, { date: 1712833200000, visitors: 277 }, { date: 1712836800000, visitors: 415 }, { date: 1712840400000, visitors: 353 }, { date: 1712844000000, visitors: 213 }, { date: 1712847600000, visitors: 386 }, { date: 1712851200000, visitors: 206 }, { date: 1712854800000, visitors: 202 }, { date: 1712858400000, visitors: 310 }, { date: 1712862000000, visitors: 437 }, { date: 1712865600000, visitors: 438 }, { date: 1712869200000, visitors: 473 }, { date: 1712872800000, visitors: 493 }, { date: 1712876400000, visitors: 148 }, { date: 1712880000000, visitors: 42 }, { date: 1712883600000, visitors: 143 }, { date: 1712887200000, visitors: 120 }, { date: 1712890800000, visitors: 88 }, { date: 1712894400000, visitors: 169 }, { date: 1712898000000, visitors: 188 }, { date: 1712901600000, visitors: 472 }, { date: 1712905200000, visitors: 430 }, { date: 1712908800000, visitors: 285 }, { date: 1712912400000, visitors: 325 }, { date: 1712916000000, visitors: 499 }, { date: 1712919600000, visitors: 224 }, { date: 1712923200000, visitors: 344 }, { date: 1712926800000, visitors: 212 }, { date: 1712930400000, visitors: 411 }, { date: 1712934000000, visitors: 224 }, { date: 1712937600000, visitors: 267 }, { date: 1712941200000, visitors: 266 }, { date: 1712944800000, visitors: 432 }, { date: 1712948400000, visitors: 308 }, { date: 1712952000000, visitors: 345 }, { date: 1712955600000, visitors: 310 }, { date: 1712959200000, visitors: 427 }, { date: 1712962800000, visitors: 93 }, { date: 1712966400000, visitors: 31 }, { date: 1712970000000, visitors: 36 }, { date: 1712973600000, visitors: 90 }, { date: 1712977200000, visitors: 135 }, { date: 1712980800000, visitors: 193 }, { date: 1712984400000, visitors: 101 }, { date: 1712988000000, visitors: 300 }, { date: 1712991600000, visitors: 205 }, { date: 1712995200000, visitors: 379 }, { date: 1712998800000, visitors: 481 }, { date: 1713002400000, visitors: 425 }, { date: 1713006000000, visitors: 428 }, { date: 1713009600000, visitors: 488 }, { date: 1713013200000, visitors: 349 }, { date: 1713016800000, visitors: 476 }, { date: 1713020400000, visitors: 397 }, { date: 1713024000000, visitors: 269 }, { date: 1713027600000, visitors: 311 }, { date: 1713031200000, visitors: 203 }, { date: 1713034800000, visitors: 294 }, { date: 1713038400000, visitors: 351 }, { date: 1713042000000, visitors: 336 }, { date: 1713045600000, visitors: 446 }, { date: 1713049200000, visitors: 73 }, { date: 1713052800000, visitors: 34 }, { date: 1713056400000, visitors: 33 }, { date: 1713060000000, visitors: 21 }, { date: 1713063600000, visitors: 27 }, { date: 1713067200000, visitors: 24 }, { date: 1713070800000, visitors: 36 }, { date: 1713074400000, visitors: 419 }, { date: 1713078000000, visitors: 274 }, { date: 1713081600000, visitors: 203 }, { date: 1713085200000, visitors: 333 }, { date: 1713088800000, visitors: 317 }, { date: 1713092400000, visitors: 293 }, { date: 1713096000000, visitors: 261 }, { date: 1713099600000, visitors: 393 }, { date: 1713103200000, visitors: 402 }, { date: 1713106800000, visitors: 225 }, { date: 1713110400000, visitors: 372 }, { date: 1713114000000, visitors: 499 }, { date: 1713117600000, visitors: 332 }, { date: 1713121200000, visitors: 317 }, { date: 1713124800000, visitors: 474 }, { date: 1713128400000, visitors: 411 }, { date: 1713132000000, visitors: 424 }, { date: 1713135600000, visitors: 131 }, { date: 1713139200000, visitors: 140 }, { date: 1713142800000, visitors: 157 }, { date: 1713146400000, visitors: 55 }, { date: 1713150000000, visitors: 24 }, { date: 1713153600000, visitors: 162 }, { date: 1713157200000, visitors: 26 }, { date: 1713160800000, visitors: 237 }, { date: 1713164400000, visitors: 492 }, { date: 1713168000000, visitors: 338 }, { date: 1713171600000, visitors: 458 }, { date: 1713175200000, visitors: 360 }, { date: 1713178800000, visitors: 377 }, { date: 1713182400000, visitors: 209 }, { date: 1713186000000, visitors: 460 }, { date: 1713189600000, visitors: 337 }, { date: 1713193200000, visitors: 371 }, { date: 1713196800000, visitors: 212 }, { date: 1713200400000, visitors: 367 }, { date: 1713204000000, visitors: 329 }, { date: 1713207600000, visitors: 283 }, { date: 1713211200000, visitors: 300 }, { date: 1713214800000, visitors: 472 }, { date: 1713218400000, visitors: 464 }, { date: 1713222000000, visitors: 91 }, { date: 1713225600000, visitors: 119 }, { date: 1713229200000, visitors: 104 }, { date: 1713232800000, visitors: 175 }, { date: 1713236400000, visitors: 41 }, { date: 1713240000000, visitors: 20 }, { date: 1713243600000, visitors: 54 }, { date: 1713247200000, visitors: 234 }, { date: 1713250800000, visitors: 200 }, { date: 1713254400000, visitors: 495 }, { date: 1713258000000, visitors: 259 }, { date: 1713261600000, visitors: 466 }, { date: 1713265200000, visitors: 428 }, { date: 1713268800000, visitors: 469 }, { date: 1713272400000, visitors: 485 }, { date: 1713276000000, visitors: 490 }, { date: 1713279600000, visitors: 412 }, { date: 1713283200000, visitors: 364 }, { date: 1713286800000, visitors: 204 }, { date: 1713290400000, visitors: 277 }, { date: 1713294000000, visitors: 261 }, { date: 1713297600000, visitors: 331 }, { date: 1713301200000, visitors: 288 }, { date: 1713304800000, visitors: 436 }, { date: 1713308400000, visitors: 157 }, { date: 1713312000000, visitors: 170 }, { date: 1713315600000, visitors: 177 }, { date: 1713319200000, visitors: 169 }, { date: 1713322800000, visitors: 106 }, { date: 1713326400000, visitors: 11 }, { date: 1713330000000, visitors: 42 }, { date: 1713333600000, visitors: 378 }, { date: 1713337200000, visitors: 324 }, { date: 1713340800000, visitors: 222 }, { date: 1713344400000, visitors: 262 }, { date: 1713348000000, visitors: 342 }, { date: 1713351600000, visitors: 352 }, { date: 1713355200000, visitors: 344 }, { date: 1713358800000, visitors: 424 }, { date: 1713362400000, visitors: 303 }, { date: 1713366000000, visitors: 303 }, { date: 1713369600000, visitors: 238 }, { date: 1713373200000, visitors: 397 }, { date: 1713376800000, visitors: 333 }, { date: 1713380400000, visitors: 266 }, { date: 1713384000000, visitors: 378 }, { date: 1713387600000, visitors: 241 }, { date: 1713391200000, visitors: 214 }, { date: 1713394800000, visitors: 113 }, { date: 1713398400000, visitors: 70 }, { date: 1713402000000, visitors: 132 }, { date: 1713405600000, visitors: 143 }, { date: 1713409200000, visitors: 18 }, { date: 1713412800000, visitors: 15 }, { date: 1713416400000, visitors: 82 }, { date: 1713420000000, visitors: 488 }, { date: 1713423600000, visitors: 453 }, { date: 1713427200000, visitors: 395 }, { date: 1713430800000, visitors: 285 }, { date: 1713434400000, visitors: 209 }, { date: 1713438000000, visitors: 204 }, { date: 1713441600000, visitors: 322 }, { date: 1713445200000, visitors: 317 }, { date: 1713448800000, visitors: 493 }, { date: 1713452400000, visitors: 358 }, { date: 1713456000000, visitors: 427 }, { date: 1713459600000, visitors: 415 }, { date: 1713463200000, visitors: 383 }, { date: 1713466800000, visitors: 214 }, { date: 1713470400000, visitors: 356 }, { date: 1713474000000, visitors: 335 }, { date: 1713477600000, visitors: 460 }, { date: 1713481200000, visitors: 67 }, { date: 1713484800000, visitors: 31 }, { date: 1713488400000, visitors: 163 }, { date: 1713492000000, visitors: 136 }, { date: 1713495600000, visitors: 12 }, { date: 1713499200000, visitors: 136 }, { date: 1713502800000, visitors: 50 }, { date: 1713506400000, visitors: 491 }, { date: 1713510000000, visitors: 481 }, { date: 1713513600000, visitors: 498 }, { date: 1713517200000, visitors: 482 }, { date: 1713520800000, visitors: 268 }, { date: 1713524400000, visitors: 347 }, { date: 1713528000000, visitors: 210 }, { date: 1713531600000, visitors: 453 }, { date: 1713535200000, visitors: 237 }, { date: 1713538800000, visitors: 333 }, { date: 1713542400000, visitors: 399 }, { date: 1713546000000, visitors: 222 }, { date: 1713549600000, visitors: 417 }, { date: 1713553200000, visitors: 340 }, { date: 1713556800000, visitors: 303 }, { date: 1713560400000, visitors: 409 }, { date: 1713564000000, visitors: 310 }, { date: 1713567600000, visitors: 192 }, { date: 1713571200000, visitors: 41 }, { date: 1713574800000, visitors: 60 }, { date: 1713578400000, visitors: 53 }, { date: 1713582000000, visitors: 91 }, { date: 1713585600000, visitors: 155 }, { date: 1713589200000, visitors: 159 }, { date: 1713592800000, visitors: 486 }, { date: 1713596400000, visitors: 250 }, { date: 1713600000000, visitors: 228 }, { date: 1713603600000, visitors: 495 }, { date: 1713607200000, visitors: 496 }, { date: 1713610800000, visitors: 413 }, { date: 1713614400000, visitors: 466 }, { date: 1713618000000, visitors: 456 }, { date: 1713621600000, visitors: 300 }, { date: 1713625200000, visitors: 309 }, { date: 1713628800000, visitors: 381 }, { date: 1713632400000, visitors: 200 }, { date: 1713636000000, visitors: 254 }, { date: 1713639600000, visitors: 348 }, { date: 1713643200000, visitors: 336 }, { date: 1713646800000, visitors: 401 }, { date: 1713650400000, visitors: 316 }, { date: 1713654000000, visitors: 195 }, { date: 1713657600000, visitors: 198 }, { date: 1713661200000, visitors: 33 }, { date: 1713664800000, visitors: 157 }, { date: 1713668400000, visitors: 46 }, { date: 1713672000000, visitors: 13 }, { date: 1713675600000, visitors: 117 }, { date: 1713679200000, visitors: 493 }, { date: 1713682800000, visitors: 409 }, { date: 1713686400000, visitors: 216 }, { date: 1713690000000, visitors: 327 }, { date: 1713693600000, visitors: 450 }, { date: 1713697200000, visitors: 378 }, { date: 1713700800000, visitors: 381 }, { date: 1713704400000, visitors: 351 }, { date: 1713708000000, visitors: 224 }, { date: 1713711600000, visitors: 379 }, { date: 1713715200000, visitors: 397 }, { date: 1713718800000, visitors: 360 }, { date: 1713722400000, visitors: 376 }, { date: 1713726000000, visitors: 484 }, { date: 1713729600000, visitors: 262 }, { date: 1713733200000, visitors: 349 }, { date: 1713736800000, visitors: 353 }, { date: 1713740400000, visitors: 48 }, { date: 1713744000000, visitors: 179 }, { date: 1713747600000, visitors: 124 }, { date: 1713751200000, visitors: 195 }, { date: 1713754800000, visitors: 134 }, { date: 1713758400000, visitors: 21 }, { date: 1713762000000, visitors: 140 }, { date: 1713765600000, visitors: 388 }, { date: 1713769200000, visitors: 248 }, { date: 1713772800000, visitors: 456 }, { date: 1713776400000, visitors: 423 }, { date: 1713780000000, visitors: 340 }, { date: 1713783600000, visitors: 414 }, { date: 1713787200000, visitors: 410 }, { date: 1713790800000, visitors: 231 }, { date: 1713794400000, visitors: 357 }, { date: 1713798000000, visitors: 484 }, { date: 1713801600000, visitors: 485 }, { date: 1713805200000, visitors: 343 }, { date: 1713808800000, visitors: 218 }, { date: 1713812400000, visitors: 217 }, { date: 1713816000000, visitors: 456 }, { date: 1713819600000, visitors: 277 }, { date: 1713823200000, visitors: 374 }, { date: 1713826800000, visitors: 175 }, { date: 1713830400000, visitors: 50 }, { date: 1713834000000, visitors: 71 }, { date: 1713837600000, visitors: 69 }, { date: 1713841200000, visitors: 134 }, { date: 1713844800000, visitors: 120 }, { date: 1713848400000, visitors: 23 }, { date: 1713852000000, visitors: 254 }, { date: 1713855600000, visitors: 330 }, { date: 1713859200000, visitors: 487 }, { date: 1713862800000, visitors: 465 }, { date: 1713866400000, visitors: 361 }, { date: 1713870000000, visitors: 286 }, { date: 1713873600000, visitors: 254 }, { date: 1713877200000, visitors: 487 }, { date: 1713880800000, visitors: 377 }, { date: 1713884400000, visitors: 207 }, { date: 1713888000000, visitors: 446 }, { date: 1713891600000, visitors: 454 }, { date: 1713895200000, visitors: 253 }, { date: 1713898800000, visitors: 448 }, { date: 1713902400000, visitors: 438 }, { date: 1713906000000, visitors: 428 }, { date: 1713909600000, visitors: 266 }, { date: 1713913200000, visitors: 148 }, { date: 1713916800000, visitors: 19 }, { date: 1713920400000, visitors: 127 }, { date: 1713924000000, visitors: 23 }, { date: 1713927600000, visitors: 89 }, { date: 1713931200000, visitors: 102 }, { date: 1713934800000, visitors: 19 }, { date: 1713938400000, visitors: 277 }, { date: 1713942000000, visitors: 487 }, { date: 1713945600000, visitors: 319 }, { date: 1713949200000, visitors: 364 }, { date: 1713952800000, visitors: 381 }, { date: 1713956400000, visitors: 422 }, { date: 1713960000000, visitors: 206 }, { date: 1713963600000, visitors: 462 }, { date: 1713967200000, visitors: 360 }, { date: 1713970800000, visitors: 350 }, { date: 1713974400000, visitors: 284 }, { date: 1713978000000, visitors: 346 }, { date: 1713981600000, visitors: 311 }, { date: 1713985200000, visitors: 235 }, { date: 1713988800000, visitors: 484 }, { date: 1713992400000, visitors: 387 }, { date: 1713996000000, visitors: 281 }, { date: 1713999600000, visitors: 174 }, { date: 1714003200000, visitors: 58 }, { date: 1714006800000, visitors: 129 }, { date: 1714010400000, visitors: 53 }, { date: 1714014000000, visitors: 65 }, { date: 1714017600000, visitors: 165 }, { date: 1714021200000, visitors: 120 }, { date: 1714024800000, visitors: 460 }, { date: 1714028400000, visitors: 492 }, { date: 1714032000000, visitors: 455 }, { date: 1714035600000, visitors: 421 }, { date: 1714039200000, visitors: 425 }, { date: 1714042800000, visitors: 252 }, { date: 1714046400000, visitors: 479 }, { date: 1714050000000, visitors: 280 }, { date: 1714053600000, visitors: 401 }, { date: 1714057200000, visitors: 357 }, { date: 1714060800000, visitors: 319 }, { date: 1714064400000, visitors: 258 }, { date: 1714068000000, visitors: 414 }, { date: 1714071600000, visitors: 327 }, { date: 1714075200000, visitors: 423 }, { date: 1714078800000, visitors: 408 }, { date: 1714082400000, visitors: 314 }, { date: 1714086000000, visitors: 188 }, { date: 1714089600000, visitors: 21 }, { date: 1714093200000, visitors: 29 }, { date: 1714096800000, visitors: 190 }, { date: 1714100400000, visitors: 52 }, { date: 1714104000000, visitors: 135 }, { date: 1714107600000, visitors: 59 }, { date: 1714111200000, visitors: 445 }, { date: 1714114800000, visitors: 477 }, { date: 1714118400000, visitors: 434 }, { date: 1714122000000, visitors: 203 }, { date: 1714125600000, visitors: 353 }, { date: 1714129200000, visitors: 228 }, { date: 1714132800000, visitors: 308 }, { date: 1714136400000, visitors: 297 }, { date: 1714140000000, visitors: 414 }, { date: 1714143600000, visitors: 492 }, { date: 1714147200000, visitors: 274 }, { date: 1714150800000, visitors: 345 }, { date: 1714154400000, visitors: 327 }, { date: 1714158000000, visitors: 241 }, { date: 1714161600000, visitors: 240 }, { date: 1714165200000, visitors: 233 }, { date: 1714168800000, visitors: 216 }, { date: 1714172400000, visitors: 133 }, { date: 1714176000000, visitors: 128 }, { date: 1714179600000, visitors: 17 }, { date: 1714183200000, visitors: 94 }, { date: 1714186800000, visitors: 138 }, { date: 1714190400000, visitors: 17 }, { date: 1714194000000, visitors: 166 }, { date: 1714197600000, visitors: 333 }, { date: 1714201200000, visitors: 418 }, { date: 1714204800000, visitors: 367 }, { date: 1714208400000, visitors: 297 }, { date: 1714212000000, visitors: 467 }, { date: 1714215600000, visitors: 436 }, { date: 1714219200000, visitors: 372 }, { date: 1714222800000, visitors: 389 }, { date: 1714226400000, visitors: 321 }, { date: 1714230000000, visitors: 245 }, { date: 1714233600000, visitors: 263 }, { date: 1714237200000, visitors: 329 }, { date: 1714240800000, visitors: 392 }, { date: 1714244400000, visitors: 380 }, { date: 1714248000000, visitors: 491 }, { date: 1714251600000, visitors: 481 }, { date: 1714255200000, visitors: 228 }, { date: 1714258800000, visitors: 81 }, { date: 1714262400000, visitors: 98 }, { date: 1714266000000, visitors: 55 }, { date: 1714269600000, visitors: 42 }, { date: 1714273200000, visitors: 10 }, { date: 1714276800000, visitors: 156 }, { date: 1714280400000, visitors: 40 }, { date: 1714284000000, visitors: 494 }, { date: 1714287600000, visitors: 431 }, { date: 1714291200000, visitors: 426 }, { date: 1714294800000, visitors: 297 }, { date: 1714298400000, visitors: 254 }, { date: 1714302000000, visitors: 310 }, { date: 1714305600000, visitors: 351 }, { date: 1714309200000, visitors: 445 }, { date: 1714312800000, visitors: 268 }, { date: 1714316400000, visitors: 488 }, { date: 1714320000000, visitors: 449 }, { date: 1714323600000, visitors: 235 }, { date: 1714327200000, visitors: 438 }, { date: 1714330800000, visitors: 347 }, { date: 1714334400000, visitors: 426 }, { date: 1714338000000, visitors: 443 }, { date: 1714341600000, visitors: 400 }, { date: 1714345200000, visitors: 77 }, { date: 1714348800000, visitors: 107 }, { date: 1714352400000, visitors: 134 }, { date: 1714356000000, visitors: 111 }, { date: 1714359600000, visitors: 141 }, { date: 1714363200000, visitors: 111 }, { date: 1714366800000, visitors: 28 }, { date: 1714370400000, visitors: 260 }, { date: 1714374000000, visitors: 303 }, { date: 1714377600000, visitors: 241 }, { date: 1714381200000, visitors: 224 }, { date: 1714384800000, visitors: 238 }, { date: 1714388400000, visitors: 490 }, { date: 1714392000000, visitors: 330 }, { date: 1714395600000, visitors: 428 }, { date: 1714399200000, visitors: 307 }, { date: 1714402800000, visitors: 371 }, { date: 1714406400000, visitors: 301 }, { date: 1714410000000, visitors: 211 }, { date: 1714413600000, visitors: 474 }, { date: 1714417200000, visitors: 300 }, { date: 1714420800000, visitors: 243 }, { date: 1714424400000, visitors: 216 }, { date: 1714428000000, visitors: 256 }, { date: 1714431600000, visitors: 102 }, { date: 1714435200000, visitors: 170 }, { date: 1714438800000, visitors: 58 }, { date: 1714442400000, visitors: 44 }, { date: 1714446000000, visitors: 181 }, { date: 1714449600000, visitors: 111 }, { date: 1714453200000, visitors: 20 }, { date: 1714456800000, visitors: 397 }, { date: 1714460400000, visitors: 399 }, { date: 1714464000000, visitors: 224 }, { date: 1714467600000, visitors: 288 }, { date: 1714471200000, visitors: 467 }, { date: 1714474800000, visitors: 342 }, { date: 1714478400000, visitors: 258 }, { date: 1714482000000, visitors: 225 }, { date: 1714485600000, visitors: 246 }, { date: 1714489200000, visitors: 487 }, { date: 1714492800000, visitors: 465 }, { date: 1714496400000, visitors: 215 }, { date: 1714500000000, visitors: 398 }, { date: 1714503600000, visitors: 481 }, { date: 1714507200000, visitors: 285 }, { date: 1714510800000, visitors: 449 }, { date: 1714514400000, visitors: 469 }, { date: 1714518000000, visitors: 46 }];
// Aggregate daily datavar dailyTotals = data.reduce(function (acc, { date, visitors }) { var dateString = new Date(date).toISOString().split("T")[0]; if (!acc[dateString]) { acc[dateString] = { date: new Date(dateString).getTime(), visitors: 0 }; } acc[dateString].visitors += visitors; return acc;}, {});var daily = Object.values(dailyTotals);
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: true, panY: true, wheelX: "panX", wheelY: "zoomX" }));
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { maxDeviation: 0.1, groupData: false, baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {}) }));
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { maxDeviation: 0.1, renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.ColumnSeries.new(root, { minBulletDistance: 10, xAxis: xAxis, yAxis: yAxis, valueYField: "visitors", valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }) }));
// Events to toggle drill-down/upseries.columns.template.events.on("click", function (ev) { if (xAxis.get("baseInterval").timeUnit == "day") { // Drill-down to hourly data var targetDateString = getDate(ev.target.dataItem.get("valueX")); var dayData = data.filter(function (item) { var itemDateString = getDate(item.date); return itemDateString == targetDateString; }); xAxis.set("baseInterval", { timeUnit: "hour", count: 1 });
series.data.setAll(dayData); } else { xAxis.set("baseInterval", { timeUnit: "day", count: 1 });
series.data.setAll(daily); }});
function getDate(timestamp) { return new Date(timestamp).toISOString().split("T")[0];}
series.data.setAll(daily);
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { xAxis: xAxis }));
cursor.lineY.set("visible", false);
// add scrollbarchart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear(1000, 100);chart.appear(1000, 100);<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 95vh;}{ "type": "XYChart", "settings": { "panX": true, "panY": true, "wheelX": "panX", "wheelY": "zoomX", "cursor": { "type": "XYCursor", "settings": { "xAxis": "#axis-0" }, "properties": { "lineY": { "settings": { "visible": false } } } }, "scrollbarX": { "type": "Scrollbar", "settings": { "orientation": "horizontal" } } }, "properties": { "series": [ "#series-0" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "refs": [ { "data-0": [ { "date": 1711929600000, "visitors": 6928 }, { "date": 1712016000000, "visitors": 6611 }, { "date": 1712102400000, "visitors": 6487 }, { "date": 1712188800000, "visitors": 6496 }, { "date": 1712275200000, "visitors": 6751 }, { "date": 1712361600000, "visitors": 6548 }, { "date": 1712448000000, "visitors": 6847 }, { "date": 1712534400000, "visitors": 6653 }, { "date": 1712620800000, "visitors": 6660 }, { "date": 1712707200000, "visitors": 5849 }, { "date": 1712793600000, "visitors": 6289 }, { "date": 1712880000000, "visitors": 6624 }, { "date": 1712966400000, "visitors": 6797 }, { "date": 1713052800000, "visitors": 6255 }, { "date": 1713139200000, "visitors": 6721 }, { "date": 1713225600000, "visitors": 6769 }, { "date": 1713312000000, "visitors": 6109 }, { "date": 1713398400000, "visitors": 6641 }, { "date": 1713484800000, "visitors": 6920 }, { "date": 1713571200000, "visitors": 6889 }, { "date": 1713657600000, "visitors": 6801 }, { "date": 1713744000000, "visitors": 7089 }, { "date": 1713830400000, "visitors": 6856 }, { "date": 1713916800000, "visitors": 6509 }, { "date": 1714003200000, "visitors": 7263 }, { "date": 1714089600000, "visitors": 6146 }, { "date": 1714176000000, "visitors": 6850 }, { "date": 1714262400000, "visitors": 6980 }, { "date": 1714348800000, "visitors": 5927 }, { "date": 1714435200000, "visitors": 6725 } ] }, { "axis-0": { "type": "DateAxis", "settings": { "maxDeviation": 0.1, "groupData": false, "baseInterval": { "timeUnit": "day", "count": 1 }, "renderer": { "type": "AxisRendererX", "settings": { "minGridDistance": 50 } }, "tooltip": { "type": "Tooltip" } } } }, { "axis-1": { "type": "ValueAxis", "settings": { "maxDeviation": 0.1, "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "ColumnSeries", "settings": { "minBulletDistance": 10, "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "visitors", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } } }, "properties": { "data": "#data-0" } } } ]}drill-down-column-chart