I'm doing a drilldown chart link which for the time being as a test I intend to show years (axis x) and a numerator (y axis) brought from my database, at the moment I am a bit lost because the graphics I am using work with some peculiarities that I have been able to master.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Practica</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-3d.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/exporting.js"></script>
<script src="js/export-data.js"></script>
<script src="js/data.js"></script>
<script src="js/drilldown.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</body>
</html>
<script type="text/javascript">
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Practica. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
<?php
include 'conexion/conexion.php';
$query = "
SELECT
r.var_numerador_mujeres_casadas,
a.mujeres_anio_casadas
FROM resumen_mujeres_casadas r
INNER JOIN mujeres_anios_casadas a ON r.id_mujeres_anios_casadas = a.id_mujeres_anios_casadas
";
$result = mysqli_query($conexion_mysql, $query);
if ($result)
{
$arrayData['data'] = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
array_push($arrayData['data'], array(
'name:' => $row['mujeres_anio_casadas'],
'y:' => (int)$row['var_numerador_mujeres_casadas'],
'drilldown:' => $row['mujeres_anio_casadas']
));
}
}//FIN DEL IF RESULT
?>
series: [{
name: 'Brands',
data: [<?php echo $var = json_encode($arrayData); ?>]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
24.13
],
[
'v8.0',
17.2
],
[
'v9.0',
8.11
],
[
'v10.0',
5.33
],
[
'v6.0',
1.06
],
[
'v7.0',
0.5
]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
[
'v40.0',
5
],
[
'v41.0',
4.32
],
[
'v42.0',
3.68
],
[
'v39.0',
2.96
],
[
'v36.0',
2.53
],
[
'v43.0',
1.45
],
[
'v31.0',
1.24
],
[
'v35.0',
0.85
],
[
'v38.0',
0.6
],
[
'v32.0',
0.55
],
[
'v37.0',
0.38
],
[
'v33.0',
0.19
],
[
'v34.0',
0.14
],
[
'v30.0',
0.14
]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
[
'v35',
2.76
],
[
'v36',
2.32
],
[
'v37',
2.31
],
[
'v34',
1.27
],
[
'v38',
1.02
],
[
'v31',
0.33
],
[
'v33',
0.22
],
[
'v32',
0.15
]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
[
'v8.0',
2.56
],
[
'v7.1',
0.77
],
[
'v5.1',
0.42
],
[
'v5.0',
0.3
],
[
'v6.1',
0.29
],
[
'v7.0',
0.26
],
[
'v6.2',
0.17
]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
[
'v12.x',
0.34
],
[
'v28',
0.24
],
[
'v27',
0.17
],
[
'v29',
0.16
]
]
}]
}
});
</script>There a detail I have not touched the part of the level according to the drilldown because I have not yet passed the first level.
The following is the PHP code that makes the query is as follows:
<?php
include 'conexion/conexion.php';
$query = "
SELECT
r.var_numerador_mujeres_casadas,
a.mujeres_anio_casadas
FROM resumen_mujeres_casadas r
INNER JOIN mujeres_anios_casadas a ON r.id_mujeres_anios_casadas = a.id_mujeres_anios_casadas
";
$result = mysqli_query($conexion_mysql, $query);
if ($result)
{
$arrayData['data'] = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
array_push($arrayData['data'], array(
'name:' => $row['mujeres_anio_casadas'],
'y:' => (int)$row['var_numerador_mujeres_casadas'],
'drilldown:' => $row['mujeres_anio_casadas']
));
}
}//FIN DEL IF RESULT
?>
series: [{
name: 'Brands',
data: [<?php echo $var = json_encode($arrayData); ?>]
}], in my opinion it is the part that I have not been able to make use of although with the json_encode I think I have an advance because of the type of response that I check in the browser console.
As you can see it is the closest thing to the format of the series for the graphic, if you could help me I would really appreciate it or if you can give me some support with a different way of working with the drilldown
