{"id":2048,"date":"2026-07-27T03:43:40","date_gmt":"2026-07-27T03:43:40","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/"},"modified":"2026-07-27T03:43:40","modified_gmt":"2026-07-27T03:43:40","slug":"calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","title":{"rendered":"Grafik Kalender: Peta Panas Deret Waktu dan Pelacakan Aktivitas Harian"},"content":{"rendered":"<p>Ketika melacak kebiasaan harian, lalu lintas situs web, catatan aktivitas server, atau intensitas penjualan selama tahun kalender penuh, maka<strong>Grafik Kalender<\/strong>memberikan tata letak visual yang efektif berbasis kisi. Dibuat menyerupai grafik kontribusi dan peta panas musiman, grafik kalender memetakan metrik kuantitatif yang terus-menerus di sepanjang hari-hari kalender tertentu, membantu pengguna mengidentifikasi puncak aktivitas tinggi, variasi akhir pekan, dan pola musiman selama beberapa bulan dalam sekali pandang.<\/p>\n<h2>Mekanisme Grafik Kalender<\/h2>\n<p>Dalam Apache ECharts, grafik kalender menggunakan sistem koordinat khusus<code>kalender<\/code>yang digabungkan dengan<code>peta panas<\/code>atau<code>sebaran<\/code>tipe seri. Alih-alih sumbu X dan Y kartesius standar, ECharts menghitung posisi kisi hari dan bulan secara otomatis menggunakan string tanggal.<\/p>\n<h3>1. Pengaturan Dasar<\/h3>\n<p>Untuk membuat peta panas kalender tahunan dasar, tentukan komponen<code>kalender<\/code>yang menentukan rentang (misalnya,<code>'2026'<\/code>), sambungkan dengan<code>visualMap<\/code>untuk mengendalikan gradien warna metrik, dan kirimkan pasangan tanggal-nilai harian yang diformat sebagai<code>['YYYY-MM-DD', nilai]<\/code>:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNkk1vozAQhu8r7X+wlINbbajAkDRQ7al73L1sDnuIOEzMpFgyGBmnLV3lv+8YUsX0Q1oLieGdwX79zJjOKdOy7+zv1y+MllNOY\/H6NSqmK1gSLy+KxoMrGJfYOrQ8SDh89okfoPTA7k3TKNezKxGL9TWfqk7nameMdqqbHXQwtgFHWxbscGzl6OuqAwtNfx3W+WXRHW3LpuzNI+gj7uKSfWOczqfXLJGMCSYnQ\/zustVp7upR9UfQv2Duq1FtwcL7N\/DsiYSSGzqixjuFEp9UjyEVYxWRomxN0YtpHWj+XzQ9+PUqUFT7G9qHeXv8kkYborbjC9xjdYj5kvFFvsccNmOYxTJbp2OYxpBkOIYiWWOa8\/JTHBI0thXYD8ZBvJ+HNJSseqjfahK13qoX9Ebh6AyZSNIy\/Gm6HPcDE4JQDputG\/T7i++NrdD+UZWrqUU3IatL+n6iwxdSSh5cNigeEOxP2KOmE1hfmycaQdA9viXSI\/Wyn\/OYOl8juAa60LY0dLxqweF26OkKvslnomFZBQ4Iydz5boQQxQk9npMol6EmSMtWc833d7Mplx9vJKIko4I8\/CmNhB+VNA60VZR4bb36bKPbSNz6kwJHSRyl3mWeB5qIxMo7j4P5OocE9XT3D+U9BbQ=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNUsFu2zAMvQ\/YPwjIQS0WF7Jsp7GLXXbaUOyy7Rb4wNhMolqWDFlusQX590lOsspJC0wIEOrxmXp8pO6s0Ip8JvuPH4g7T0M9yOJ88wcs9AWJ2fwVaoQRBaEW1RZ2NEhYbByXPupWWPIVjABFbjjji1t6JB1OZKu1tKKbPLTRpgVr0RRkM6hq1HXTgYG2vw15\/hi0g1HkmL17BjngipXkE6Huefc3ScRjgjReFX14LXSYanoW\/QDyO0xVtUIVJGy+hWb0I8SeUAnfeCewwhfRY2iKNgKVM9FbtnOXP9rdJP0fP4\/eL7IAqkFC+8MXVNvi0pYXMAoKsqIzXGO9YXRO6CxfYw7LMUxZlS6SMUwYxCmOIY8XmOS0fNeZBiSq2g\/mei\/49WIkEwgUqAtsaAYD6idKL1Vb7cYueiclTsqAZc5NUr9BoS1b+A3fLLZX\/Utcg\/lyVMbuQtv+uXPK0llVVTToOOBKWKP8BbvB6d4TC20nZOOb2IDs8dKcHn3P+zeWAS24RVTQh9p70Tvlj1qbWiiwjnd2l06mbP0cp\/pXoxERi93Pu8XLeYhxh6XZFPOzXi7L+duFeBSnjpCHHyUR92uTsADLothji+y9QvcRv\/cvBYpiFiVeZZ4HGI945pWzYNdOoXP18PAXY08NVA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    judul: {\r\n        atas: 10,\r\n        kiri: 'tengah',\r\n        teks: 'Komit Harian (2026)'\r\n    },\r\n    tooltip: {\r\n        formatter: function (params) {\r\n            return params.value[0] + ': ' + params.value[1] + ' komit';\r\n        }\r\n    },\r\n    visualMap: {\r\n        min: 0,\r\n        maks: 100,\r\n        jenis: 'piecewise',\r\n        orientasi: 'horizontal',\r\n        kiri: 'tengah',\r\n        atas: 65,\r\n        dalamRentang: {\r\n            warna: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']\r\n        }\r\n    },\r\n    kalender: {\r\n        atas: 120,\r\n        kiri: 30,\r\n        kanan: 30,\r\n        ukuranSel: ['otomatis', 13],\r\n        rentang: '2026',\r\n        gayaItem: {\r\n            lebarBatas: 0.5,\r\n            warnaBatas: '#ccc'\r\n        },\r\n        labelTahun: { tampilkan: false }\r\n    },\r\n    seri: {\r\n        jenis: 'peta panas',\r\n        sistemKoordinat: 'kalender',\r\n        data: [\r\n            ['2026-01-01', 12], ['2026-01-02', 45], ['2026-01-03', 88],\r\n            ['2026-02-14', 95], ['2026-03-20', 30], ['2026-05-10', 65],\r\n            ['2026-07-27', 82], ['2026-10-31', 99], ['2026-12-25', 10]\r\n        ]\r\n    }\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNUsFu2zAMvQ\/YPwjIQS0WF7Jsp7GLXXbaUOyy7Rb4wNhMolqWDFlusQX590lOsspJC0wIEOrxmXp8pO6s0Ip8JvuPH4g7T0M9yOJ88wcs9AWJ2fwVaoQRBaEW1RZ2NEhYbByXPupWWPIVjABFbjjji1t6JB1OZKu1tKKbPLTRpgVr0RRkM6hq1HXTgYG2vw15\/hi0g1HkmL17BjngipXkE6Huefc3ScRjgjReFX14LXSYanoW\/QDyO0xVtUIVJGy+hWb0I8SeUAnfeCewwhfRY2iKNgKVM9FbtnOXP9rdJP0fP4\/eL7IAqkFC+8MXVNvi0pYXMAoKsqIzXGO9YXRO6CxfYw7LMUxZlS6SMUwYxCmOIY8XmOS0fNeZBiSq2g\/mei\/49WIkEwgUqAtsaAYD6idKL1Vb7cYueiclTsqAZc5NUr9BoS1b+A3fLLZX\/Utcg\/lyVMbuQtv+uXPK0llVVTToOOBKWKP8BbvB6d4TC20nZOOb2IDs8dKcHn3P+zeWAS24RVTQh9p70Tvlj1qbWiiwjnd2l06mbP0cp\/pXoxERi93Pu8XLeYhxh6XZFPOzXi7L+duFeBSnjpCHHyUR92uTsADLothji+y9QvcRv\/cvBYpiFiVeZZ4HGI945pWzYNdOoXP18PAXY08NVA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNkk1vozAQhu8r7X+wlINbbajAkDRQ7al73L1sDnuIOEzMpFgyGBmnLV3lv+8YUsX0Q1oLieGdwX79zJjOKdOy7+zv1y+MllNOY\/H6NSqmK1gSLy+KxoMrGJfYOrQ8SDh89okfoPTA7k3TKNezKxGL9TWfqk7nameMdqqbHXQwtgFHWxbscGzl6OuqAwtNfx3W+WXRHW3LpuzNI+gj7uKSfWOczqfXLJGMCSYnQ\/zustVp7upR9UfQv2Duq1FtwcL7N\/DsiYSSGzqixjuFEp9UjyEVYxWRomxN0YtpHWj+XzQ9+PUqUFT7G9qHeXv8kkYborbjC9xjdYj5kvFFvsccNmOYxTJbp2OYxpBkOIYiWWOa8\/JTHBI0thXYD8ZBvJ+HNJSseqjfahK13qoX9Ebh6AyZSNIy\/Gm6HPcDE4JQDputG\/T7i++NrdD+UZWrqUU3IatL+n6iwxdSSh5cNigeEOxP2KOmE1hfmycaQdA9viXSI\/Wyn\/OYOl8juAa60LY0dLxqweF26OkKvslnomFZBQ4Iydz5boQQxQk9npMol6EmSMtWc833d7Mplx9vJKIko4I8\/CmNhB+VNA60VZR4bb36bKPbSNz6kwJHSRyl3mWeB5qIxMo7j4P5OocE9XT3D+U9BbQ=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"jJApFDb\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-1402\" decoding=\"async\" fetchpriority=\"high\" height=\"439\" sizes=\"(max-width: 2018px) 100vw, 2018px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png 2018w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090-300x65.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090-1024x223.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090-768x167.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090-1536x334.png 1536w\" width=\"2018\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Teknik Struktural Lanjutan<\/h2>\n<p>Grafik kalender dapat disesuaikan untuk tata letak gulir vertikal atau disesuaikan dengan representasi sebaran untuk memvisualisasikan metrik harian diskrit.<\/p>\n<h3>1. Tampilan Kalender Multi-Bulan Vertikal<\/h3>\n<p>Ubah <code>orientasi: 'vertikal'<\/code> pada komponen kalender untuk menumpuk bulan secara vertikal\u2014ideal untuk widget dashboard yang tinggi atau tata letak mobile:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNksFu4yAQhu8r7Tsg9cAlUQEnbepqDyvtsT3s5lj1QPE4QcVg4Ula7yrvvkOdNFCpUpEP8M8w8\/N5Qo82ePaD\/fv+jdFCiw7q0+lNgVesGf8t2U+Ddm9xZHdhw2fnDAdtyjDgESKf9MMxjiE4tD1VPCl7O+y0u9d90aWzvmYiK9rp15otRS7h2EPqEzxavwu7ITcRoqX+FN5DRGu0y4PRbrYUk0W10J9NZ7r1f7TflAzSMsGFWLMHftFCK5obPmO0bYxZ6WlrVs1yUpvrSsiWP54LHEoqZA98o2MJOhm6Ep+C\/fJjJ\/sPXAl1NReSvuRqOlXzSvLHLNuAc2v7N11QYsaUyIMj6Hinn8CRUTZsw0vNWu0GeH9IWo0eTzklsdbGAX\/pkcDP2OUlW6OOyF4AnhmN3H0gAmN5w+sO3iaDg+cZvXwu6O9v3z0VFz5SHoAwDSXjaYS2oLHTfU7NhBAb6zXCehwQusT9+Jd48VjUhKq0naFeEmqZIGaiXJFYLXJR0UfiYlXgzmupuRKUoWR+rZrL1GDxQVSpgbwR2cAdt0TkcPsfUgXnRw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqVkk1PAyEQhu8m\/gcSD1zaCGyrtcaDnkz8iF\/x0ngYC93SZdnNLtSD6X936LYWNvEg4QAvw8zDy1R1q8kV+T4+IjhWXnoz3e\/CcKpop4TeVzm5LpxeawcteeZ0cAgpdKMxxCmbw5J2+mZ37qrKOF1jyr1SKwfvuvWQ1im1nRIWZS0hFB6zWFspqwNNUVmnrY8hqkYri2yBZK0apwswCSRYwAo8TgcYfwCPDiQYKF9CPpsnlGF8QWNhSmb0ZKEWTF7QAcGlnM8n0C3nEznuVHmeMb6gH4cEm9QehFRWqiYp0mGdsT8t\/sezm\/0jZlQwcTZkHGdg63bZMOP0I4r3hW\/Avir8nJlgAyJYfGrgU5k3WHp08ps4KGttimDrAkyrfl\/1G3oLAbvn3xLFJ0SFEl3kA3J6Sh68AR1aIM89qUECecWftum90DiP20tUWRpZ2q96g9m2gOmNvvet6sHtu2upwJVQxza2unWqvKuqRmoLLrTg7ufStnGhMVLsyPgxGs+Do5HIJyhmo1gUOFEcTRLv41xiKBhGCB5fy4Y8FBj1RBEK8AsWNeFuiX5sLn8AMQ3yAA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">opsi = {\r\n    judul: {\r\n        teks: 'Log Aktivitas Q1',\r\n        kiri: 'tengah'\r\n    },\r\n    tooltip: {},\r\n    petaVisual: {\r\n        min: 0,\r\n        maks: 500,\r\n        jenis: 'kontinu',\r\n        orientasi: 'vertikal',\r\n        kanan: 10,\r\n        atas: 'tengah',\r\n        dalamRentang: {\r\n            warna: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']\r\n        }\r\n    },\r\n    kalender: {\r\n        atas: 60,\r\n        kiri: 'tengah',\r\n        orientasi: 'vertikal',\r\n        rentang: ['2026-01-01', '2026-03-31'],\r\n        ukuranSel: [20, 20],\r\n        labelTahun: { tampilkan: false },\r\n        labelHari: {\r\n            hariPertama: 1, \/\/ Mulai minggu pada Senin\r\n            petaNama: 'en'\r\n        },\r\n        labelBulan: { petaNama: 'en' }\r\n    },\r\n    seri: {\r\n        jenis: 'heatmap',\r\n        sistemKoordinat: 'kalender',\r\n        data: [\r\n            ['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],\r\n            ['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]\r\n        ]\r\n    }\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqVkk1PAyEQhu8m\/gcSD1zaCGyrtcaDnkz8iF\/x0ngYC93SZdnNLtSD6X936LYWNvEg4QAvw8zDy1R1q8kV+T4+IjhWXnoz3e\/CcKpop4TeVzm5LpxeawcteeZ0cAgpdKMxxCmbw5J2+mZ37qrKOF1jyr1SKwfvuvWQ1im1nRIWZS0hFB6zWFspqwNNUVmnrY8hqkYri2yBZK0apwswCSRYwAo8TgcYfwCPDiQYKF9CPpsnlGF8QWNhSmb0ZKEWTF7QAcGlnM8n0C3nEznuVHmeMb6gH4cEm9QehFRWqiYp0mGdsT8t\/sezm\/0jZlQwcTZkHGdg63bZMOP0I4r3hW\/Avir8nJlgAyJYfGrgU5k3WHp08ps4KGttimDrAkyrfl\/1G3oLAbvn3xLFJ0SFEl3kA3J6Sh68AR1aIM89qUECecWftum90DiP20tUWRpZ2q96g9m2gOmNvvet6sHtu2upwJVQxza2unWqvKuqRmoLLrTg7ufStnGhMVLsyPgxGs+Do5HIJyhmo1gUOFEcTRLv41xiKBhGCB5fy4Y8FBj1RBEK8AsWNeFuiX5sLn8AMQ3yAA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqNksFu4yAQhu8r7Tsg9cAlUQEnbepqDyvtsT3s5lj1QPE4QcVg4Ula7yrvvkOdNFCpUpEP8M8w8\/N5Qo82ePaD\/fv+jdFCiw7q0+lNgVesGf8t2U+Ddm9xZHdhw2fnDAdtyjDgESKf9MMxjiE4tD1VPCl7O+y0u9d90aWzvmYiK9rp15otRS7h2EPqEzxavwu7ITcRoqX+FN5DRGu0y4PRbrYUk0W10J9NZ7r1f7TflAzSMsGFWLMHftFCK5obPmO0bYxZ6WlrVs1yUpvrSsiWP54LHEoqZA98o2MJOhm6Ep+C\/fJjJ\/sPXAl1NReSvuRqOlXzSvLHLNuAc2v7N11QYsaUyIMj6Hinn8CRUTZsw0vNWu0GeH9IWo0eTzklsdbGAX\/pkcDP2OUlW6OOyF4AnhmN3H0gAmN5w+sO3iaDg+cZvXwu6O9v3z0VFz5SHoAwDSXjaYS2oLHTfU7NhBAb6zXCehwQusT9+Jd48VjUhKq0naFeEmqZIGaiXJFYLXJR0UfiYlXgzmupuRKUoWR+rZrL1GDxQVSpgbwR2cAdt0TkcPsfUgXnRw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"uQfyIDb\"><img alt=\"\" class=\"alignnone size-full wp-image-1403\" decoding=\"async\" height=\"889\" sizes=\"(max-width: 1221px) 100vw, 1221px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d43481552.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d43481552.png 1221w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d43481552-300x218.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d43481552-1024x746.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d43481552-768x559.png 768w\" width=\"1221\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Penyesuaian Halus Tata Letak dan Gaya<\/h2>\n<p>Menggabungkan sistem koordinat kalender dengan seri titik memungkinkan Anda menyesuaikan ukuran titik berdasarkan intensitas, bukan hanya berdasarkan blok warna.<\/p>\n<h3>1. Kalender Titik Gelembung<\/h3>\n<p>Menggunakan <code>jenis: 'titik'<\/code> pada <code>kalender<\/code> sistem koordinat menciptakan indikator harian gaya gelembung yang interaktif:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqVUrFu2zAQ3QP0Hw7owAZ1YoqJU1VGp2TvYCAZDA0UfXIIUKJAUkWUwv\/eo2zDohMP5SLp3bvHu\/dku6BtC7\/g75croBN0MFgcv0YE30IB7ElqM8Bvt0EHz9b0DbLZiWSwjiSFbUDH9vjuUA\/WmqC7RLS2rpGBuAXUfavGGb510snGX0958TgMvWthX739I02Pa17Cd2B0Iz2SQjYWwMY5PVuelHbpUEoabDfSpatamjLnH\/a6n0JOb18\/YLLdkmtMcPFwwxdTZxQas9LvVF0z2QfLZiAW5YSgAzarMJy5PrZaY2lA9rXOa1mrqWo81bjki96E1wKyT4uPRwUUmNecXbTDo9PoUzOGLq7k1ZhTspIlcd3KgKvB0\/Qx+IOdU5ofmsoedj+FTDFdSphKMb85ZHwJ8zmsoqqHqq8qg+BJCKRS491bymofMk3Tt2Gy2P9Ze1flon44t9Z2UukwFMBv88+lNzJIijRtWx9\/gBueUc6Z4OVsCi5i+PcpmInIzHk5u6SV5cS4y9I2Edt+nmGRKH7w8qR0eKW0d8t\/Hf3uXg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqVUk2P00AMvSPxHyztISCy20l2uxtSceEEQkhISFyqHNzGyU6TzETzAapQ\/zuebatOSntYX5LYz8\/2e9GjlfAJ\/r59AxwbX\/u+PH6FcNTZEpJfuvcDwQ+yqFDBFzQSVZKecJ00knGOVIvPyT6\/O9Sd1r2T44S30WZA58iU0Hi1dlIreDeiwcG+j3EhDDlvFOyrd7+x97QUFXyAhCfyY1LIXgow7jdNFieq3XSrDntSdVggGocO+dxC\/HfZwyQVqM9yhpRD1fJGucgfb8U8Vsd33qD6SaztMtFO8+nSJink8ypCtbjFr46G8lyAP2gUMvNNUzTYrGPmED2t0Hzer56lF1oPteSGcioakVzVxFK4NZq+ISVDp5NOdvFcKy1v+k1rU0uFjiFHPS\/cLYeV7mOj2aprLnMpeDiDTCxgNoPvpLZkPUoW\/cAHLfU0rLxqYUWmRosmFDd+6PH56Hx046skvl8VefN4LrEecS3dtgRxV1xmrlljdnfatjz+DLciY7uzXFRpnJyHf+BhmszygCxElV7jygpG3GfTtjy0fTzLBWD+JKoT0+GVfd8t\/gHnKfTn\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">opsi = {\r\n    judul: {\r\n        teks: 'Volume Pesanan Harian',\r\n        kiri: 'tengah'\r\n    },\r\n    tooltip: {\r\n        formatter: function (params) {\r\n            return params.value[0] + ': ' + params.value[1] + ' pesanan';\r\n        }\r\n    },\r\n    kalender: {\r\n        atas: 80,\r\n        kiri: 40,\r\n        kanan: 40,\r\n        rentang: '2026-05',\r\n        ukuranSel: ['otomatis', 25],\r\n        gayaItem: {\r\n            warna: '#f8fafc',\r\n            lebarBatas: 1,\r\n            warnaBatas: '#e2e8f0'\r\n        }\r\n    },\r\n    seri: {\r\n        jenis: 'titik',\r\n        sistemKoordinat: 'kalender',\r\n        ukuranSimbol: function (val) {\r\n            return val[1] \/ 10; \/\/ Menyesuaikan ukuran gelembung berdasarkan jumlah pesanan\r\n        },\r\n        gayaItem: {\r\n            warna: '#3b82f6',\r\n            opacity: 0.8\r\n        },\r\n        data: [\r\n            ['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],\r\n            ['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]\r\n        ]\r\n    }\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqVUk2P00AMvSPxHyztISCy20l2uxtSceEEQkhISFyqHNzGyU6TzETzAapQ\/zuebatOSntYX5LYz8\/2e9GjlfAJ\/r59AxwbX\/u+PH6FcNTZEpJfuvcDwQ+yqFDBFzQSVZKecJ00knGOVIvPyT6\/O9Sd1r2T44S30WZA58iU0Hi1dlIreDeiwcG+j3EhDDlvFOyrd7+x97QUFXyAhCfyY1LIXgow7jdNFieq3XSrDntSdVggGocO+dxC\/HfZwyQVqM9yhpRD1fJGucgfb8U8Vsd33qD6SaztMtFO8+nSJink8ypCtbjFr46G8lyAP2gUMvNNUzTYrGPmED2t0Hzer56lF1oPteSGcioakVzVxFK4NZq+ISVDp5NOdvFcKy1v+k1rU0uFjiFHPS\/cLYeV7mOj2aprLnMpeDiDTCxgNoPvpLZkPUoW\/cAHLfU0rLxqYUWmRosmFDd+6PH56Hx046skvl8VefN4LrEecS3dtgRxV1xmrlljdnfatjz+DLciY7uzXFRpnJyHf+BhmszygCxElV7jygpG3GfTtjy0fTzLBWD+JKoT0+GVfd8t\/gHnKfTn\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqVUrFu2zAQ3QP0Hw7owAZ1YoqJU1VGp2TvYCAZDA0UfXIIUKJAUkWUwv\/eo2zDohMP5SLp3bvHu\/dku6BtC7\/g75croBN0MFgcv0YE30IB7ElqM8Bvt0EHz9b0DbLZiWSwjiSFbUDH9vjuUA\/WmqC7RLS2rpGBuAXUfavGGb510snGX0958TgMvWthX739I02Pa17Cd2B0Iz2SQjYWwMY5PVuelHbpUEoabDfSpatamjLnH\/a6n0JOb18\/YLLdkmtMcPFwwxdTZxQas9LvVF0z2QfLZiAW5YSgAzarMJy5PrZaY2lA9rXOa1mrqWo81bjki96E1wKyT4uPRwUUmNecXbTDo9PoUzOGLq7k1ZhTspIlcd3KgKvB0\/Qx+IOdU5ofmsoedj+FTDFdSphKMb85ZHwJ8zmsoqqHqq8qg+BJCKRS491bymofMk3Tt2Gy2P9Ze1flon44t9Z2UukwFMBv88+lNzJIijRtWx9\/gBueUc6Z4OVsCi5i+PcpmInIzHk5u6SV5cS4y9I2Edt+nmGRKH7w8qR0eKW0d8t\/Hf3uXg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZxdxCvz\"><img alt=\"\" class=\"alignnone size-full wp-image-1404\" decoding=\"async\" height=\"518\" sizes=\"(max-width: 2015px) 100vw, 2015px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d440d2d96.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d440d2d96.png 2015w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d440d2d96-300x77.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d440d2d96-1024x263.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d440d2d96-768x197.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d440d2d96-1536x395.png 1536w\" width=\"2015\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Praktik Terbaik Strategis<\/h2>\n<ul>\n<li><strong>Sesuaikan Tanggal dengan Format ISO:<\/strong> Pastikan tanggal di dalam array data seri Anda mengikuti format standar <code>'YYYY-MM-DD'<\/code> format string agar kisi kalender memetakan catatan secara akurat.<\/li>\n<li><strong>Konfigurasikan <code>hariPertama<\/code> untuk konsistensi regional:<\/strong> Gunakan <code>labelHari.hariPertama<\/code> (diatur ke <code>0<\/code> untuk hari Minggu atau <code>1<\/code> untuk hari Senin) untuk menyesuaikan dengan kebiasaan kalender lokal audiens Anda.<\/li>\n<li><strong>Pasangkan VisualMap Piecewise untuk Kontribusi:<\/strong> Saat merender grafik commit gaya GitHub, gunakan <code>piecewise<\/code> tipe peta visual dengan hentian warna diskret alih-alih gradien kontinu untuk langkah visual kategorikal yang lebih bersih.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ketika melacak kebiasaan harian, lalu lintas situs web, catatan aktivitas server, atau intensitas penjualan selama tahun kalender penuh, makaGrafik Kalendermemberikan tata letak visual yang efektif berbasis kisi. Dibuat menyerupai grafik kontribusi dan peta panas musiman, grafik kalender memetakan metrik kuantitatif&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":26,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2048","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ECharts Calendar Heatmap | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/\",\"name\":\"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66d42a1f090.png\",\"datePublished\":\"2026-07-27T03:43:40+00:00\",\"description\":\"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66d42a1f090.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66d42a1f090.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Grafik Kalender: Peta Panas Deret Waktu dan Pelacakan Aktivitas Harian\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide","description":"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","og_locale":"id_ID","og_type":"article","og_title":"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide","og_description":"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/","name":"ECharts Calendar Heatmap | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png","datePublished":"2026-07-27T03:43:40+00:00","description":"Plot year-view daily activity heatmaps using ECharts calendar charts in VPasCode, a free text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66d42a1f090.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/calendar-chart-time-series-heatmaps-and-daily-activity-tracking-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Grafik Kalender: Peta Panas Deret Waktu dan Pelacakan Aktivitas Harian"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2048"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}