Graafika näidised

Tulpdiagramm

<div class="mb-3">
  <canvas id="rkas"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('rkas');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['2014','2015','2016','2017','2018','2019','2020','2021','2022','2023','2024'],
      datasets: [{
        label: 'Müüdud vara',
        data: [3.5, 7.2, 6.9, 8.3, 7.0, 17.0, 8.1, 13.0, 8.0, 12.0, 0],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#0000c4'
      },
      {
        label: 'Müügi eesmärk',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 21.0],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#c4ffff'
      }
      ]
    },
    options: {
      scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
    }
  });
</script>

Tulpdiagramm mitme postiga

<div class="mb-3">
  <canvas id="tegevusala"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx2 = document.getElementById('tegevusala');

  new Chart(ctx2, {
    type: 'bar',
    data: {
      labels: ['2021 I kv','2021 II kv','2021 III kv','2021 IV kv','2022 I kv','2022 II kv','2022 III kv','2022 IV kv','2023 I kv','2023 II kv','2023 III kv','2023 IV kv','2024 I kv','2024 II kv'],
      datasets: [{
        label: 'Kõik tegevusalad',
        data: [1158, 1199, 1200, 1270, 1240, 1354, 1349, 1429, 1424, 1524, 1500, 1578, 1553, 1641],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#0000c4'
      },
      {
        label: 'Rajatiste ehitus',
        data: [1377, 1491, 1582, 1663, 1474, 1622, 1750, 1815, 1653, 1846, 1911, 1999, 1735, 1878],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#c4ffff'
      },
      {
        label: 'Eriehitustööd',
        data: [951, 990, 1034, 1062, 1013, 1125, 1167, 1177, 1133, 1192, 1200, 1238, 1194, 1258],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#e4e4e4'
      },
      {
        label: 'Hoonete ehitus',
        data: [951, 981, 1020, 1059, 1000, 1134, 1157, 1167, 1122, 1168, 1176, 1202, 1175, 1221],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#ffffff'
      }
      ]
    },
    options: {
      scales: {
      x: {
        stacked: false,
      },
      y: {
        stacked: false,
      }
    }
    }
  });
</script>

Tulpdiagramm pikali postide, nähtavate numbrite ja fikseeritud kõrgusega

<div class="chart-container mb-3" style="position: relative; height:600px">
  <canvas id="maakonnad"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<script>
  const ctx6 = document.getElementById('maakonnad');

  new Chart(ctx6, {
    plugins: [ChartDataLabels],
    type: 'bar',
    data: {
      labels: ['Võru maakond', 'Hiiu maakond', 'Lääne maakond', 'Pärnu maakond', 'Ida-Viru maakond', 'Valga maakond', 'Saare maakond', 'Põlva maakond', 'Lääne-Viru maakond', 'Jõgeva maakond', 'Viljandi maakond', 'Tartu maakond', 'Harju maakond, v.a Tallinn', 'Tallinn', 'Harju maakond', 'Rapla maakond', 'Järva maakond'],
      datasets: [{
        label: 'II kv 2023',
        data: [936, 1048, 1057, 1065, 901, 900, 988, 1028, 1041, 1070, 997, 1103, 1200, 1147, 1167, 1101, 1251],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#c4ffff'
      },
      {
        label: 'II kv 2024',
        data: [877, 953, 997, 1002, 1041, 1044, 1047, 1088, 1098, 1104, 1104, 1127, 1198, 1200, 1200, 1250, 1360],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#0000c4'
      }
      ]
    },
    options: {
      maintainAspectRatio: false,
      plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
        offset: 4,
      }
    },
      responsive: true,
      indexAxis: 'y',
      scales: {
      x: {
        stacked: false,
      },
      y: {
        stacked: false,
      }
    }
    }
  });
</script>

Joondiagramm

<h2 class="mb-3 font-family-sans-serif">Joondiagramm</h2>
<div class="chart-container mb-3" style="position: relative; height:300px">
  <canvas id="joon"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
const ctx2j = document.getElementById('joon');
new Chart(ctx2j, {
  plugins: [ChartDataLabels],
  type: 'line',
  data: {
    labels: [
      '2021 I kv', '2021 II kv', '2021 III kv', '2021 IV kv',
      '2022 I kv', '2022 II kv', '2022 III kv', '2022 IV kv',
      '2023 I kv', '2023 II kv', '2023 III kv', '2023 IV kv',
      '2024 I kv', '2024 II kv', '2024 III kv', '2024 IV kv',
      '2025 I kv'
    ],
    datasets: [{
      label: 'Töötajate arv',
      data: [
        41232, 44127, 45918, 46076,
        44131, 45454, 46416, 46150,
        43875, 44407, 45282, 44151,
        41394, 42288, 43654, 43138,
        41253
      ],
      borderWidth: 2,
      borderColor: '#0000c4',
      backgroundColor: '#0000c4',
      fill: false
    }]
  },
  options: {
    maintainAspectRatio: false,
    plugins: {
      datalabels: {
        display: false // Välja lülitatud, kuna liiga palju andmepunkte
      },
      legend: {
        display: true
      }
    },
    responsive: true,
    scales: {
      x: {
        stacked: false,
        title: {
          display: true,
          text: 'Kvartal'
        }
      },
      y: {
        stacked: false,
        title: {
          display: true,
          text: 'Töötajate arv'
        },
        ticks: {
          callback: function(value) {
            return value.toLocaleString('et-EE');
          }
        }
      }
    },
    interaction: {
      intersect: false,
      mode: 'index'
    }
  }
});
</script>

Joondiagramm mitme värviga

<h2 class="mb-3 font-family-sans-serif">Joondiagramm mitme värviga</h2>
<div class="chart-container mb-3" style="position: relative; height:300px">
  <canvas id="multi-salary-chart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
const ctxMultiSalary = document.getElementById('multi-salary-chart');
new Chart(ctxMultiSalary, {
  plugins: [ChartDataLabels],
  type: 'line',
  data: {
    labels: [
      '2021 I kv', '2021 II kv', '2021 III kv', '2021 IV kv',
      '2022 I kv', '2022 II kv', '2022 III kv', '2022 IV kv',
      '2023 I kv', '2023 II kv', '2023 III kv', '2023 IV kv',
      '2024 I kv', '2024 II kv', '2024 III kv', '2024 IV kv',
      '2025 I kv'
    ],
    datasets: [
      {
        label: 'Kõik tegevusalad',
        data: [
          1158, 1199, 1200, 1270,
          1240, 1354, 1349, 1429,
          1424, 1524, 1500, 1578,
          1553, 1641, 1620, 1699,
          1649
        ],
        borderWidth: 2,
        borderColor: '#000000',
        backgroundColor: '#000000',
        fill: false
      },
      {
        label: 'Hoonete ehitus',
        data: [
          951, 981, 1020, 1059,
          1000, 1134, 1157, 1167,
          1122, 1168, 1176, 1202,
          1175, 1221, 1236, 1251,
          1215
        ],
        borderWidth: 2,
        borderColor: '#0000c4',
        backgroundColor: '#0000c4',
        fill: false
      },
      {
        label: 'Rajatiste ehitus',
        data: [
          1377, 1491, 1582, 1663,
          1474, 1622, 1750, 1815,
          1653, 1846, 1911, 1999,
          1735, 1878, 1974, 2046,
          1803
        ],
        borderWidth: 2,
        borderColor: '#00c4c4',
        backgroundColor: '#00c4c4',
        fill: false
      },
      {
        label: 'Eriehitustööd',
        data: [
          951, 990, 1034, 1062,
          1013, 1125, 1167, 1177,
          1133, 1192, 1200, 1238,
          1194, 1258, 1289, 1313,
          1261
        ],
        borderWidth: 2,
        borderColor: '#c4c400',
        backgroundColor: '#c4c400',
        fill: false
      }
    ]
  },
  options: {
    maintainAspectRatio: false,
    plugins: {
      datalabels: {
        display: false // Välja lülitatud, kuna liiga palju andmepunkte ja jooni
      },
      legend: {
        display: true,
        position: 'top'
      }
    },
    responsive: true,
    scales: {
      x: {
        stacked: false,
        title: {
          display: true,
          text: 'Kvartal'
        }
      },
      y: {
        stacked: false,
        title: {
          display: true,
          text: 'Brutokuupalga mediaan (€)'
        },
        ticks: {
          callback: function(value) {
            return value.toLocaleString('et-EE') + ' €';
          }
        }
      }
    },
    interaction: {
      intersect: false,
      mode: 'index'
    }
  }
});
</script>

Google Mapsi embed

<div class="ratio ratio-16x9 mb-3">
<iframe src="https://www.google.com/maps/embed?pb=!4v1723464205852!6m8!1m7!1sz02ne78hPYuMhr7tPrujKw!2m2!1d59.44039017903117!2d24.73180968897423!3f133.2171482683519!4f10.076939728535677!5f0.7820865974627469" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

Sõõrikdiagramm

<h2 class="mb-3 font-family-atlas-grotesk">Kristiine keskuse ostnud ettevõtte osanikud</h2>
<div class="chart-container mb-3" style="position: relative; height:600px">
  <canvas id="osalused"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<script>
  const ctx7 = document.getElementById('osalused');

  new Chart(ctx7, {
    plugins: [ChartDataLabels],
    type: 'doughnut',
    data: {
      labels: ['Taavet Hinrikus','Toonart Rääsk','Anders Anderson','Ivar Vendelin','Eften Real Estate Fund 5','Kristjan Rahu','Priit Koit','Viljar Arkas','Tõnu Uustalu'],
      datasets: [{
        label: 'Osalus (%)',
        data: [17.09, 17.09, 17.09, 17.09, 11.24, 10.03, 10.03, 0.16, 0.16],
        borderWidth: 1,
        borderColor: '#0000c4',
        backgroundColor: '#c4ffff'
      }
      ]
    },
    options: {
      maintainAspectRatio: false,
      plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
        offset: 4,
      }
    },
      responsive: true,
    }
  });
</script>