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

Kood

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>