tengo la siguiente consulta:
Código PHP:
<?php
$arrayMeses = array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
$connection = mysqli_connect("localhost","root","","db") or die("Error " . mysqli_error($connection));
//fetch department names from the department table
$sql = "SELECT Month(created_at) AS Meses, Sum(total) AS total_Mes FROM sell WHERE Year(created_at)=2016 GROUP BY Meses ORDER BY Meses asc";
$result = mysqli_query($connection, $sql) or die("Error " . mysqli_error($connection));
$Meses1 = array();
while($row = mysqli_fetch_array($result))
{
$Datos = array("Meses" => $arrayMeses[date($row[0])-1], "total_Mes" => $row[1]);
array_push($Meses1 , $Datos);
}
echo json_encode($Meses1 );
mysqli_close($connection);
?>
Que me da como resultado lo siguiente:
Código HTML:
[{"Meses":"Enero","total_Mes":"48"},{"Meses":"Febrero","total_Mes":"54"},{"Meses":"Marzo","total_Mes":"683.3000000000001"},{"Meses":"Abril","total_Mes":"689.0999999999999"}]
lo que necesito es ponerlo en el siguiente gráfico:
Código HTML:
<!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 () { var Nombre=<?php echo preg_replace( "/\"(\d+)\"/", '$1', json_encode($Meses1, JSON_NUMERIC_CHECK)); ?>; $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Ventas mensuales' }, subtitle: { text: '2016' }, xAxis: { categories: [Nombre], crosshair: true }, yAxis: { min: 0, title: { text: 'Dolares (USD)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} usd</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Ventas', data: [Nombre] }, { name: 'Gastos', data: [] }, { name: 'Devoluciones', data: [] }] }); }); </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; height: 400px; margin: 0 auto"></div> </body> </html>