Graafika näidised

Tulpdiagramm

<h2 class="mb-3 font-family-atlas-grotesk">Tulpdiagramm</h2>

<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: '#947f3a',
        backgroundColor: '#947f3a'
      },
      {
        label: 'Müügi eesmärk',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 21.0],
        borderWidth: 1,
        borderColor: '#947f3a',
        backgroundColor: '#fff200'
      }
      ]
    },
    options: {
      scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
    }
  });
</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="sonepar"></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 ctx2 = document.getElementById('sonepar');

  new Chart(ctx2, {
    plugins: [ChartDataLabels],
    type: 'line',
    data: {
      labels: ['2019','2020','2021','2022','2023'],
      datasets: [{
        label: 'Müügikäive (mln €)',
        data: [23.903,22.29,29.719,36.711,31.835],
        borderWidth: 2,
        borderColor: '#947f3a',
        backgroundColor: '#947f3a'
      },
      ]
    },
      options: {
      maintainAspectRatio: false,
      plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
        offset: 4,
      }
    },
      responsive: true,
      indexAxis: 'x',
      scales: {
      x: {
        stacked: false,
      },
      y: {
        stacked: false,
      }
    }
    }
  });
</script>

Radardiagramm

<h2 class="mb-3 font-family-sans-serif">Eesti energeetikasektorit iseloomustavad näitajad</h2>
<div class="mb-3">
    <canvas id="enmak"></canvas>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>

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

    new Chart(ctx, {
      plugins: [ChartDataLabels],
      type: 'radar',
      data: {
        labels: ['Elu', 'Valu', 'Raha', 'Ilu'],
        datasets: [{
          label: 'Eesti tulemus',
          fill: true,
          data: [69.9, 78.5, 94.8, 32.1],
          borderColor: '#947f3a',
          backgroundColor: 'rgba(255, 242, 0, 0.2)'
        }]
      },
      options: {
        elements: {
          line: {
            borderWidth: 2
          }
        },
        plugins: {
          datalabels: {
            formatter: (value) => value.toFixed(1),
            anchor: 'end',
            align: 'end',
            offset: 4
          }
        },
        scales: {
          r: {
            suggestedMin: 0,
            suggestedMax: 100,
            beginAtZero: true
          }
        },    
      }
    });
  </script>

Radardiagramm ringil (et kolme tipuga korralikult kuvaks)

Allikas: Maailma Energeetikanõukogu

<div class="mb-5"></div>
<h2 class="mb-3 font-family-sans-serif">Radardiagramm ringil (et kolme tipuga korralikult kuvaks)</h2>
<div class="mb-3">
  <canvas id="enmak-r"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>

<script>
        const ctx3 = document.getElementById('enmak-r').getContext('2d');
        new Chart(ctx3, {
            plugins: [ChartDataLabels],
            type: 'radar',
            data: {
labels: ['Varustuskindlus', 'Keskkond', 'Hind',],
        datasets: [{
          label: 'Eesti tulemus',
          fill: true,
          data: [69.9, 78.5, 94.8],
          borderColor: '#947f3a',
          backgroundColor: 'rgba(255, 242, 0, 0.2)',
                    borderWidth: 1
                }]
            },
            options: {
                      plugins: {
          datalabels: {
            formatter: (value) => value.toFixed(1),
            anchor: 'end',
            align: 'end',
            offset: 4
          }
        },
                scales: {
                    r: {
                        suggestedMin: 0,
                        suggestedMax: 100,
                        beginAtZero: true,
                        angleLines: {
                            display: false
                        },
                        grid: {
                            circular: true
                        },
                        ticks: {
                            callback: function(value) {
                                return value + '';
                            }
                        }
                    }
                },
                aspectRatio: 1,
                responsive: true,
                maintainAspectRatio: true
            }
        });
    </script>
    <p class="wp-image-credit">Allikas: Maailma Energeetikanõukogu</p>