Hi I’m using Highcharts and I’m trying to put in the middle of each bar, a value of a third array instead of the value of a second array but apparently not meeting documentation if possible.
It looks like this:
The idea is that, you see the corresponding value in the array $montos in the middle of each bar.
Code:
<?php
error_reporting(1);
include_once("conexion.php");
include_once("funciones.php");
$consulta = "";
if ($year == "") {
$consulta = mysql_query("select id_deudor,month(fecha_pago_deudor) from deudores");
} else {
$consulta = mysql_query("select id_deudor,month(fecha_pago_deudor) from deudores where year(fecha_pago_deudor)='" . $year . "'");
}
$monto_total = "0";
if ($year == "") {
$monto_total = totalDeudores();
} else {
$monto_total = totalDeudorPorYear($year);
}
if (!is_numeric($monto_total)) {
$monto_total = "0";
}
$montos = array(
"300",
"400",
"600",
"800",
"900",
"200",
"300",
"100",
"400",
"600",
"800",
"900"
);
$cantidad = mysql_num_rows($consulta);
$ids = array();
$Enero = 0;
$Febrero = 0;
$Marzo = 0;
$Abril = 0;
$Mayo = 0;
$Junio = 0;
$Julio = 0;
$Agosto = 0;
$Septiembre = 0;
$Octubre = 0;
$Noviembre = 0;
$Diciembre = 0;
while ($resultado = mysql_fetch_array($consulta)) {
$id_cliente = $resultado[0];
$mes_pago = $resultado[1];
if (!in_array($id_cliente, $ids)) {
array_push($ids, $id_cliente);
if ($mes_pago == 1) {
$Enero++;
}
if ($mes_pago == 2) {
$Febrero++;
}
if ($mes_pago == 3) {
$Marzo++;
}
if ($mes_pago == 4) {
$Abril++;
}
if ($mes_pago == 5) {
$Mayo++;
}
if ($mes_pago == 6) {
$Junio++;
}
if ($mes_pago == 7) {
$Julio++;
}
if ($mes_pago == 8) {
$Agosto++;
}
if ($mes_pago == 9) {
$Septiembre++;
}
if ($mes_pago == 10) {
$Octubre++;
}
if ($mes_pago == 11) {
$Noviembre++;
}
if ($mes_pago == 12) {
$Diciembre++;
}
}
}
$textos = array(
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre"
);
$datos = array(
$Enero,
$Febrero,
$Marzo,
$Abril,
$Mayo,
$Junio,
$Julio,
$Agosto,
$Septiembre,
$Octubre,
$Noviembre,
$Diciembre
);
$series = array();
for($i=0;$i<=11;$i++) {
$serie = array( 'name' => $textos[$i] , 'data' => $datos[$i]) ;
//$serie = array( 'name' => $textos[$i] , 'data' => $datos[$i]) ;
array_push( $series,$serie);
//echo $textos[$i]." : ".$datos[$i]."
";
}
//echo $textos;
//echo $datos;
//echo "fuck";
?>
<!DOCTYPE HTML>
<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>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Deudores'
},
subtitle: {
text: 'Bla Bla'
},
xAxis: {
categories: <?php echo json_encode($textos) ?>,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Cantidad de deudores',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
//pointFormat: '<tr><th colspan="2"><h3>{point.montos}</h3></th></tr>';
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels:{
enabled:true,
format: '{point.montos}',
formatter:function(){
if(this.y > 0)
return this.y;
}
}
}
},
legend: {
//layout: 'vertical',
//align: 'right',
//verticalAlign: 'top',
//x: -40,
//y: 80,
//floating: true,
//borderWidth: 1,
//backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
//shadow: true
},
credits: {
enabled: false
},
series: [{
name: ['Cantidad de clientes'],
data: <?php echo json_encode( $datos) ?>,
montos : <?php echo json_encode($montos) ?>
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I’m trying to do this in two ways but I get no good
tooltip: {
useHTML: true,
headerFormat: '<table>',
//pointFormat: '<tr><th colspan="2"><h3>{point.montos}</h3></th></tr>';
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels:{
enabled:true,
format: '{point.montos}',
formatter:function(){
if(this.y > 0)
return this.y;
}
}
}
In the first thing I want to show the tooltip but when I use the line pointFormat not shown me the chart
In the second I want to show beside each bar as I had thought but still does not work and nothing is displayed
Can somebody help me ?