mercredi 29 novembre 2023

Getting data from database in jquery

I want to get yeniseries values ​​from the database, i can use the API but I don't know what I should add to the javascript code, I would be happy if you help me.

var yeniSeries = [50, 80, 30];

window.addEventListener("load", function () {
  try {
    var grafikYapilandirma = {
      chart: {
        type: "donut",
        width: 370,
        height: 430,
      },
      colors: ["#622bd7", "#e2a03f", "#e7515a", "#e2a03f"],
      dataLabels: {
        enabled: false,
      },
      legend: {
        position: "bottom",
        horizontalAlign: "center",
        fontSize: "14px",
        markers: {
          width: 10,
          height: 10,
          offsetX: -5,
          offsetY: 0,
        },
        itemMargin: {
          horizontal: 10,
          vertical: 30,
        },
      },
      plotOptions: {
        pie: {
          donut: {
            size: "75%",
            background: "transparent",
            labels: {
              show: true,
              name: {
                show: true,
                fontSize: "29px",
                fontFamily: "Nunito, sans-serif",
                color: undefined,
                offsetY: -10,
              },
              value: {
                show: true,
                fontSize: "26px",
                fontFamily: "Nunito, sans-serif",
                color: "#1ad271",
                offsetY: 16,
                formatter: function (t) {
                  return t;
                },
              },
              total: {
                show: true,
                showAlways: true,
                label: "Total",
                color: "#888ea8",
                formatter: function (t) {
                  return t.globals.seriesTotals.reduce(function (n, e) {
                    return n + e;
                  }, 0);
                },
              },
            },
          },
        },
      },
      stroke: {
        show: true,
        width: 15,
        colors: "#0e1726",
      },
      series: yeniSeries,
      labels: ["Online", "Offline", "Rest"],
      responsive: [
        { breakpoint: 1440, options: { chart: { width: 325 } } },
        { breakpoint: 1199, options: { chart: { width: 380 } } },
        { breakpoint: 575, options: { chart: { width: 320 } } },
      ],
    };

    var grafik = new ApexCharts(
      document.querySelector("#chart-2"),
      grafikYapilandirma,
    );

    grafik.render();

    document
      .querySelector(".theme-toggle")
      .addEventListener("click", function () {
        var yeniSeries = [200, 300, 500];

        grafik.updateOptions({ series: yeniSeries });
      });
  } catch (hata) {
    console.log(hata);
  }
});

I would appreciate it if you could help, thank you



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire