var statsData = [
    {
        "clicks": 123,
        "views": 208,
        "average_cost": "38.13",
        "cost": "46.89990",
        "tarih": "2026-05-07"
    },
    {
        "clicks": 143,
        "views": 174,
        "average_cost": "49.83",
        "cost": "71.25690",
        "tarih": "2026-05-08"
    },
    {
        "clicks": 154,
        "views": 177,
        "average_cost": "44.18",
        "cost": "68.03720",
        "tarih": "2026-05-09"
    },
    {
        "clicks": 84,
        "views": 100,
        "average_cost": "27.41",
        "cost": "23.02440",
        "tarih": "2026-05-10"
    },
    {
        "clicks": 138,
        "views": 183,
        "average_cost": "25.71",
        "cost": "35.47980",
        "tarih": "2026-05-11"
    },
    {
        "clicks": 87,
        "views": 172,
        "average_cost": "21.58",
        "cost": "18.77460",
        "tarih": "2026-05-12"
    },
    {
        "clicks": 117,
        "views": 200,
        "average_cost": "34.28",
        "cost": "40.10760",
        "tarih": "2026-05-13"
    }
];    
		var options = {
        series: [{
            name: "Tıklamalar",
            data: statsData.map(item => item.clicks)
        }, {
            name: "Gösterim Sayısı",
            data: statsData.map(item => item.views)
        }],
        chart: {
            height: 350,
            type: "area"
        },
        dataLabels: {
            enabled: true,
            formatter: function(val) {
                return val.toFixed(0);
            }
        },
        stroke: {
            curve: "smooth"
        },
        xaxis: {
            type: "datetime",
            categories: statsData.map(item => item.tarih)
        },
        tooltip: {
            x: {
                format: "dd/MM/yy"
            },
            y: {
                formatter: function(val) {
                    return val.toFixed(0);
                }
            },
        },
    };
    var chart = new ApexCharts(document.querySelector("#stats_hit"), options);
    chart.render();var options = {
          series: [6, 6, 14],
          chart: {
          width: 380,
          type: "pie",
        },
        labels: ["Erkek", "Kadın", "Diğer"],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: "bottom"
            }
          }
        }]
        };
        var chart = new ApexCharts(document.querySelector("#sehir_demografi"), options);
        chart.render();
		
		
		
		var options = {
          series: [14, 6, 6],
          chart: {
		  width: 380,
          type: "polarArea",
        },
		labels: ["Telefon", "Mail", "Form"],
        stroke: {
          colors: ["#fff"]
        },
        fill: {
          opacity: 0.8
        },
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: "bottom"
            }
          }
        }]
        };
        var chart = new ApexCharts(document.querySelector("#iletisim_stats"), options);
        chart.render();