Skip to main content
se añadieron 2281 caracteres en el cuerpo
Origen Enlace
Joel Ibaceta
  • 2.4k
  • 13
  • 34

Este código en PHP se conecta con la base de datos y te devuelve el resultado en formato JSON.

<?php
$con = mysql_connect("localhost","root","password");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("bfsdemo", $con);

$result = mysql_query("SELECT name, val FROM web_marketing");

$rows = array();
while($r = mysql_fetch_array($result)) {
    $row[0] = $r[0];
    $row[1] = $r[1];
    array_push($rows,$row);
}

print json_encode($rows, JSON_NUMERIC_CHECK);

mysql_close($con);
?>

Y podrías poblar el chart con el siguiente código

var options = {
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Web Sales & Marketing Efforts'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: []
                }]
            }

$.getJSON("data.php", function(json) {
    options.series[0].data = json;
    chart = new Highcharts.Chart(options);
});

Este código en PHP se conecta con la base de datos y te devuelve el resultado en formato JSON.

<?php
$con = mysql_connect("localhost","root","password");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("bfsdemo", $con);

$result = mysql_query("SELECT name, val FROM web_marketing");

$rows = array();
while($r = mysql_fetch_array($result)) {
    $row[0] = $r[0];
    $row[1] = $r[1];
    array_push($rows,$row);
}

print json_encode($rows, JSON_NUMERIC_CHECK);

mysql_close($con);
?>

Y podrías poblar el chart con el siguiente código

var options = {
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Web Sales & Marketing Efforts'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: []
                }]
            }

$.getJSON("data.php", function(json) {
    options.series[0].data = json;
    chart = new Highcharts.Chart(options);
});
Origen Enlace
Joel Ibaceta
  • 2.4k
  • 13
  • 34

Lo que quieres hacer corresponde al comportamiento clásico de una aplicación web, las cuales por lo general siguen el siguiente patrón

MVC

Es decir la información que esta alojada en la base de datos es consumida y abstraída por un modelo el cual es consultado por un controlador como respuesta a un requerimiento (GET o POST), procesado por el servidor web, este proceso genera una respuesta html + javascript + css, por lo que el código en frontend no varia con respecto a los ejemplos que has visto, con la única diferencia de que debes cargar la información en las vistas usando previamente un lenguaje de backend (PHP, Java, .Net, Python, Ruby) de lado del servidor.