How to display highchart in dynamic position?
like this
here is my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<?php
for ($i = 1; $i <= 8 ; $i++){
$datakategori[$i] = mysqli_query($conn, "SELECT kategori, nama_ins, ( (SUM(nilai)/COUNT(nilai)) / 4 )*100 as nilainya
FROM tb_nilai n
JOIN tb_ins i ON n.user_ins=i.user_ins
JOIN tb_kues k ON n.id_kues= k.id_kues
WHERE n.id_kues=$i GROUP BY n.user_ins ORDER BY nilainya DESC");
$getnamakategori[$i] = mysqli_query($conn, "SELECT kategori FROM tb_kues WHERE id_kues=$i");
$namakategori[$i] = array();
while($row_namakategori[$i] = mysqli_fetch_array($getnamakategori[$i])){
$namakategori[$i][] = $row_namakategori[$i]['kategori'];
}
$pointkategori[$i] = mysqli_query($conn, "SELECT kategori, nama_ins, ( (SUM(nilai)/COUNT(nilai)) / 4 )*100 as nilainya
FROM tb_nilai n
JOIN tb_ins i ON n.user_ins=i.user_ins
JOIN tb_kues k ON n.id_kues= k.id_kues
WHERE n.id_kues=$i GROUP BY n.user_ins ORDER BY nilainya DESC");
?>
<script type="text/javascript">
$(function () {
$('#container<?php echo $i?>').highcharts({
chart: {
type: 'bar'
},
title: {
text: '<?php echo $namakategori[$i][0];?>'
},
xAxis: {
categories: [
<?php
while($row_datakategori[$i] = mysqli_fetch_array($datakategori[$i])){
echo "'".$row_datakategori[$i]['nama_ins']."',";
}
?>
],
title: {
text: null
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Point',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' point'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
colorByPoint: true
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: 'Nilai',
data: [
<?php
while($row_pointkategori[$i] = mysqli_fetch_array($pointkategori[$i])){
echo $row_pointkategori[$i]['nilainya'].",";
}
?>
]
}]
});
});
</script>
</head>
<body>
<div id="container<?php echo $i;?>" style=" width: 700px; height: 500px; margin: 0 auto; display: inline;"></div>
<?php
}
?>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/themes/grid-light.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire