Please assist me on finishing this scripts...
First of all, the scripts work flawlessly without any drilldown charts, but if i add drilldown to the scripts, the script shows many error such as id property, etc...
I try to follows Highchart Column Drilldown tutorial including requirement that should included in order the chart to drilldown, but still fails to make it works:
This is my databases:
Below are my scripts without any drilldown which is work without errors..
<?php
require_once('../includes/database.php');
$stmt = mysqli_prepare($con, "SELECT state_name,totals FROM states");
$result = array('state_name' => array(), 'totals' => array());
if ($stmt) {
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $state_name, $totals);
while (mysqli_stmt_fetch($stmt)) {
$result['state_name'][] = $state_name;
$result['totals'][] = (int)$totals;
}
mysqli_stmt_close($stmt);
}
?>
<body>
<div id="div-chart"></div>
<script src="../assets/js/jquery-1.12.3.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js">
</script>
<script>
$(function () {
$('#div-chart').highcharts({
chart: {
type: 'column'
},
title: {
text: 'List of States'
},
xAxis: {
categories: <?php echo json_encode($result['state_name'])
?>,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'States',
data: <?php echo json_encode($result['totals']) ?>
}]
});
});
</script>
</body>
Below are output without drilldown attributes:
Below are updated scripts with drilldown attribute that dont work at all:
<?php
require_once('../includes/database.php');
$stmt = mysqli_prepare($con, "SELECT state_name,one,two,three,totals FROM
states");
$result = array('state_name' => array(), 'one' => array(), 'two' =>
array(), 'three' => array(), 'totals' => array());
if ($stmt) {
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $state_name, $totals);
while (mysqli_stmt_fetch($stmt)) {
$result['state_name'][] = $state_name;
$result['one'][] = (int)$one;
$result['two'][] = (int)$two;
$result['three'][] = (int)$three;
$result['totals'][] = (int)$totals;
}
mysqli_stmt_close($stmt);
}
?>
<body>
<div id="div-chart"></div>
<script src="../assets/js/jquery-1.12.3.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js">
</script>
<script>
$(function () {
$('#div-chart').highcharts({
chart: {
type: 'column'
},
title: {
text: 'List of States'
},
xAxis: {
categories: <?php echo json_encode($result['state_name'])
?>,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'States',
data: [{
name: <?php echo json_encode($result['state_name']) ?>,
y: <?php echo json_encode($result['totals']) ?>,
drilldown: <?php echo json_encode($result['state_name']) ?>
}]
}],
drilldown: {
series: [{
name: <?php echo json_encode($result['state_name']) ?>,
id: <?php echo json_encode($result['state_name']) ?>,
data: [
<?php echo json_encode($result['one']) ?>,
<?php echo json_encode($result['two']) ?>,
<?php echo json_encode($result['three']) ?>
]
}]
}
});
});
</script>
</body>
Please help me out to solve this, I want the chart to drilldown asynchronously, but from mysql databases..
Thank You...