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][1]][1] [1]: https://i.sstatic.net/k1zUq.png 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. 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); });