highcharts_index.php

<?php
$con = mysql_connect("localhost","root","");
mysql_select_db("graph2", $con);

$result = mysql_query("select nama from kecamatan order by id_kec");
while(list($nama) = mysql_fetch_row($result)) $kecamatan[] = "'$nama'";
mysql_free_result($result);

$calon = array();
$hasil = array();
$i = 0;
$result = mysql_query("select id_calon, nama_calon from calon order by id_calon");
while(list($id,$nama) = mysql_fetch_row($result)) {
    $calon[] = $nama;
    $res = mysql_query("select suara from hasil where id_calon='$id' order by id_kec");
    while(list($suara) = mysql_fetch_row($res)) { $hasil[$i][] = $suara; }
    $i++;
    mysql_free_result($res);
}
mysql_free_result($result);
?>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Pilkada 2022 - PHP</title>
<META HTTP-EQUIV="Refresh" CONTENT="3000">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" content="no-cache">
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<script type="text/javascript" src="js/themes/gray.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
                var options = {
                        chart: {
                                renderTo: 'container',
                                defaultSeriesType: 'line',
                                marginRight: 130,
                                marginBottom: 25
                        },
                        title: {
                                text: 'Project Requests',
                                x: -20 //center
                        },
                        subtitle: {
                                text: '',
                                x: -20
                        },
                        xAxis: {
                                categories: [<?php echo join($kecamatan, ","); ?>]
                        },
                        yAxis: {
                                title: {
                                        text: 'Hasil suara'
                                },
                                plotLines: [{
                                        value: 0,
                                        width: 1,
                                        color: '#808080'
                                }]
                        },
                        tooltip: {
                                formatter: function() {
                                                return '<b>'+ this.series.name +'</b><br/>'+
                                                this.x +': '+ this.y;
                                }
                        },
                        legend: {
                                layout: 'vertical',
                                align: 'right',
                                verticalAlign: 'top',
                                x: -10,
                                y: 100,
                                borderWidth: 0
                        },
                        series: [<?php
                                $series = "";
                                for($i=0;$i<count($calon);$i++) {
                                        $tab = $i ? "\t\t\t\t":"";
                                        $series .= "$tab{name: '".$calon[$i]."', data: [". join($hasil[$i], ",") ."]},\n";
                                }
                                $series = substr($series,0,-2);
                                echo $series;
                                ?> ]

                }
                setInterval(function() { getData(); }, 30000);
                function getData(){ chart = new Highcharts.Chart(options); }
        });
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
</body>
</html>