{"id":27029,"date":"2016-05-19T10:00:52","date_gmt":"2016-05-19T17:00:52","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=27029"},"modified":"2025-01-16T16:12:02","modified_gmt":"2025-01-17T00:12:02","slug":"generar-graficas-de-base-de-datos-mysql-en-php","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/","title":{"rendered":"C\u00f3mo generar gr\u00e1ficas de una base de datos MySQL usando PHP"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Si has estado en la programaci\u00f3n durante alg\u00fan tiempo, hay muchas posibilidades de que PHP y <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/\"><span style=\"font-weight: 400;\">MySQL<\/span><\/a><span style=\"font-weight: 400;\"> formen parte de tu conocimiento tecnol\u00f3gico. No importa cu\u00e1ntos lenguajes nuevos y brillantes vayan y vengan, esta combinaci\u00f3n (PHP y MySQL) estar\u00e1 all\u00ed por al menos un poco m\u00e1s de tiempo. Y esa es la raz\u00f3n por la que decid\u00ed usar ambas tecnolog\u00edas hoy para hacer algunas gr\u00e1ficas geniales.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En esta publicaci\u00f3n, cubriremos el proceso de obtenci\u00f3n de datos de una base de datos MySQL a trav\u00e9s de PHP y luego presentaremos gr\u00e1ficas interactivas utilizando esos datos. Para el componente de gr\u00e1ficos, vamos a utilizar <\/span><a href=\"http:\/\/www.fusioncharts.com\/\"><span style=\"font-weight: 400;\">FusionCharts<\/span><\/a><span style=\"font-weight: 400;\">, ya que ofrece una buena colecci\u00f3n de gr\u00e1ficos y mapas, es compatible con todos los navegadores y es f\u00e1cil de usar. Tambi\u00e9n tiene un plugin de <\/span><a href=\"http:\/\/www.fusioncharts.com\/php-charts\/\"><span style=\"font-weight: 400;\">gr\u00e1ficas PHP<\/span><\/a><span style=\"font-weight: 400;\"> dedicado que har\u00e1 que nuestro trabajo sea un poco m\u00e1s f\u00e1cil.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Nota: FusionCharts es gratis para uso personal y no comercial. Tendr\u00e1s que comprar una licencia si deseas usarla en aplicaciones comerciales.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Esto es lo que estamos construyendo hoy:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"776\" height=\"432\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/browser-market-share-1.jpg\" alt=\"\" class=\"wp-image-27108 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2016\/05\/browser-market-share-1.jpg.webp 776w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/browser-market-share-1-300x167.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/browser-market-share-1-768x428.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2016\/05\/browser-market-share-1-600x334.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2016\/05\/browser-market-share-1-730x406.jpg.webp 730w\" data-sizes=\"(max-width: 776px) 100vw, 776px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 776px; --smush-placeholder-aspect-ratio: 776\/432;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">\u00a1Ahora, manos a la obra!<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Hemos dividido este tutorial en los siguientes seis pasos:<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Incluir archivos de la biblioteca de gr\u00e1ficos<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Iniciar la conexi\u00f3n con la base de datos MySQL<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Validar conexi\u00f3n y escribir el SQL <\/span><i><span style=\"font-weight: 400;\">query<\/span><\/i><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Formar matriz JSON<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Crear un contenedor gr\u00e1fico<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Crear una instancia de FusionCharts y cerrar la conexi\u00f3n de la base de datos<\/span><\/li>\n\n\n<\/ol>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-paso-1-incluir-archivos-de-graficos-en-biblioteca-nbsp\" class=\"wp-block-heading\"><b>Paso 1: Incluir archivos de gr\u00e1ficos en biblioteca&nbsp;<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Para representar gr\u00e1ficos con PHP, debemos incluir los siguientes archivos:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">El contenedor de gr\u00e1ficos PHP de FusionCharts &#8211; \u2018fusioncharts.php\u2019 &#8211; ir\u00e1 dentro del c\u00f3digo PHP (desc\u00e1rgalo de la <\/span><a href=\"http:\/\/www.fusioncharts.com\/php-charts\/\"><span style=\"font-weight: 400;\">p\u00e1gina de plugins<\/span><\/a><span style=\"font-weight: 400;\">)<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Los archivos JavaScript centrales de FusionCharts &#8211; \u2018fusioncharts.js\u2019 y \u2018fusioncharts.charts.js\u2019 &#8211; ir\u00e1n dentro de HTML usando la etiqueta de script (<\/span><a href=\"http:\/\/www.fusioncharts.com\/download\/\"><span style=\"font-weight: 400;\">desc\u00e1rgalos de esta p\u00e1gina<\/span><\/a><span style=\"font-weight: 400;\">)<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Aqu\u00ed est\u00e1 el c\u00f3digo HTML y PHP para lograr esto:<\/span><\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-php\">PHP:<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;?php\n  \/\/ including FusionCharts PHP wrapper\n  include(&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;\/path\/to\/fusioncharts.php&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;);\n?&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;<\/pre><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html\">HTML:<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;\n\n&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;\n  &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!-- including FusionCharts JavaScript file --&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;\n  &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;script type=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;text\/javascript&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; src=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;\/path\/to\/fusioncharts.js&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;\/script&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;\n  &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;script type=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;text\/javascript&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; src=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;\/path\/to\/fusioncharts.charts.js&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;\/script&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;\/head&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;\n\n&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;\/html&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;<\/pre><\/pre>\n\n\n\n<h2 id=\"h-paso-2-iniciar-la-conexion-con-la-base-de-datos-mysql\" class=\"wp-block-heading\"><b>Paso 2: Iniciar la conexi\u00f3n con la base de datos MySQL<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Despu\u00e9s de haber incluido los archivos JavaScript y PHP requeridos, debemos configurar una conexi\u00f3n con la base de datos para obtener datos para la gr\u00e1fica. El c\u00f3digo PHP para hacer esto se muestra a continuaci\u00f3n:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;?php\n\n    \/\/setting up connection with database\n    $host_db=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;localhost&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;; \/\/ MySQL host server (might vary depending upon user)\n    $user_db=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;db_username&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;; \/\/ MySQL database username\n    $pass_db=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;db_password&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;; \/\/ MySQL password\n    $name_db=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;DB_name&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;; \/\/ name of the database\n\n?&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;<\/pre><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Debes reemplazar los valores de<em> $host_db, $user_db, $pass_db<\/em> y<em> $name_db<\/em> con valores reales para tu base de datos MySQL y el servidor host de la base de datos.<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-related-link-https-www-dreamhost-com-blog-es-cuando-cambiar-plan-alojamiento-text-cuando-debes-actualizar-tu-plan-de-hosting\"><span style=\"font-weight: 400;\">\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\t\u00bfCu\u00e1ndo deber\u00edas actualizar tu plan de alojamiento?\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/cuando-cambiar-plan-alojamiento\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/span><\/h4>\n\n\n\n<h2 id=\"h-paso-3-validar-la-conexion-y-escribir-consulta-sql\" class=\"wp-block-heading\"><b>Paso 3: Validar la conexi\u00f3n y escribir consulta SQL<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Una vez realizada la conexi\u00f3n con la base de datos MySQL, realizaremos una comprobaci\u00f3n r\u00e1pida para validar la conexi\u00f3n y escribir una consulta para obtener el resultado en una variable. As\u00ed es c\u00f3mo validamos la conexi\u00f3n<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">$dbhandle = new mysqli($host_db, $user_db, $pass_db, $name_db);\n\nif ($dbhandle -&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; connect_error) {\n    exit(&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;There was an error with your connection: &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;.$dbhandle - &amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; connect_error);\n}<\/pre><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Si el c\u00f3digo anterior se ejecuta con \u00e9xito, tendr\u00e1s una conexi\u00f3n establecida. Ahora podemos usar el siguiente c\u00f3digo para obtener datos<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">$strQuery = &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;SELECT DISTINCT browser, shareval FROM browsershare_feb2016; &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;; \n\n$result = $dbhandle-&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;query($strQuery) or exit(&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;Error code ({$dbhandle-&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;errno}): {$dbhandle-&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;error}&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;);<\/pre><\/pre>\n\n\n\n<p><i><span style=\"font-weight: 400;\">$dbhandle<\/span><\/i><span style=\"font-weight: 400;\"> se usa para hacer la conexi\u00f3n con la base de datos. Si la conexi\u00f3n se realiza con \u00e9xito, no habr\u00e1 ning\u00fan error y se ejecutar\u00e1 <\/span><i><span style=\"font-weight: 400;\">$strQuery<\/span><\/i><span style=\"font-weight: 400;\">. De lo contrario, arrojar\u00e1 un error.<\/span><\/p>\n\n\n\n<h2 id=\"h-paso-4-formar-la-matriz-json\" class=\"wp-block-heading\"><b>Paso 4: Formar la matriz JSON<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">S\u00ed seguiste todo hasta ahora, deber\u00edas obtener tus datos de la consulta SQL en la variable <\/span><i><span style=\"font-weight: 400;\">$result.<\/span><\/i><\/p>\n\n\n\n<p><i><span style=\"font-weight: 400;\">Consejo: Puedes <\/span><\/i><i><span style=\"font-weight: 400;\">`echo`&nbsp; <\/span><\/i><i><span style=\"font-weight: 400;\">&nbsp;del resultado para verificar los datos recibidos como resultado de la consulta SQL.<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Ahora agregaremos los datos junto con la configuraci\u00f3n del gr\u00e1fico FusionCharts y analizaremos el resultado final como una matriz JSON (FusionCharts comprende los formatos de datos JSON y XML).<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Aqu\u00ed est\u00e1 el c\u00f3digo para lograr eso:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">if ($result) {\n\n  \/\/ creating an associative array to store the chart attributes\n  $arrData = array(\n    &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;chart&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; array(\n      &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;theme&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;fint&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n      &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;caption&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;Browser Market Share&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n      &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;subcaption&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;February 2016&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n      &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;captionFontSize&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;24&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n      &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;paletteColors&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;#A2A5FC, #41CBE3, #EEDA54, #BB423F #,F35685&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n      &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;baseFont&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;Quicksand, sans-serif&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n      \/\/more chart configuration options\n    )\n  );\n\n  $arrData&#x5B;&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;data&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;] = array();\n\n  \/\/ iterating over each data and pushing it into $arrData array\n  while ($row = mysqli_fetch_array($result)) {\n    array_push($arrData&#x5B;&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;data&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;], array(\n      &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;label&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; $row&#x5B;&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;browser&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;],\n      &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;value&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; $row&#x5B;&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;shareval&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;]\n    ));\n  }\n\n  $jsonEncodedData = json_encode($arrData);\n\n}<\/pre><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">En este paso, primero verificamos si el resultado es v\u00e1lido. Si es v\u00e1lido, creamos una matriz asociativa que contiene las opciones de configuraci\u00f3n del gr\u00e1fico y los datos que obtuvimos de la base de datos. Y luego codificamos esta matriz en JSON usando la funci\u00f3n <\/span><i><span style=\"font-weight: 400;\">json_encode.<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">El objeto de gr\u00e1fico bajo <\/span><i><span style=\"font-weight: 400;\">$arrData<\/span><\/i><span style=\"font-weight: 400;\"> contiene opciones de configuraci\u00f3n del gr\u00e1fico, como leyenda, color de fondo, color de trazado de datos y formatos de visualizaci\u00f3n para n\u00fameros, etc.<\/span><\/p>\n\n\n\n<h2 id=\"h-paso-5-crear-un-contenedor-grafico\" class=\"wp-block-heading\"><b>Paso 5: crear un contenedor gr\u00e1fico<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Vamos a utilizar el elemento HTML <\/span><i><span style=\"font-weight: 400;\">&lt;div&gt;<\/span><\/i><span style=\"font-weight: 400;\"> para representar nuestra gr\u00e1fica:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;doughnut-chart&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;A beautiful donut chart is on its way!&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;\/div&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;<\/pre><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tHome &#8211; Espa\u00f1ol\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/span><\/p>\n\n\n\n<h2 id=\"h-paso-6-crear-una-instancia-de-fusioncharts-y-cerrar-la-conexion-de-la-base-de-datos\" class=\"wp-block-heading\"><b>Paso 6: Crear una instancia de FusionCharts y cerrar la conexi\u00f3n de la base de datos<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Despu\u00e9s de crear la matriz JSON final, crearemos la instancia de FusionCharts y le pasaremos el tipo de gr\u00e1fico, las dimensiones, la identificaci\u00f3n del contenedor y otros detalles para representar el gr\u00e1fico.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Aqu\u00ed est\u00e1 el formato para crear una instancia de FusionCharts:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\/\/ Syntax for the instance -\n$var = new FusionCharts(&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;type of chart&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n                &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;unique chart id&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n                &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;width of chart&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n                &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;height of chart&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n                &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;div id to render the chart&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n                &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;type of data&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;,\n                &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;actual data&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;)<\/pre><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Para nuestro proyecto, as\u00ed es como creamos la instancia de FusionCharts, renderizamos el gr\u00e1fico y finalmente cerramos la conexi\u00f3n de la base de datos:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\/\/ creating FusionCharts instance\n$doughnutChart = new FusionCharts(&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;doughnut2d&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;, &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;browserShareChart&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; , &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;, &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;450&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;, &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;doughnut-chart&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;, &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;json&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;, $jsonEncodedData);\n\n\/\/ FusionCharts render method\n$doughnutChart-&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;render();\n\n\/\/ closing database connection\n$dbhandle-&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;close();<\/pre><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Este fue un tutorial b\u00e1sico para comenzar a crear gr\u00e1ficas usando PHP y MySQL, y si deseas explorar mas, visita esta <\/span><a href=\"http:\/\/www.fusioncharts.com\/dev\/using-with-server-side-languages\/php\/introduction.html\"><span style=\"font-weight: 400;\">p\u00e1gina de documentaci\u00f3n oficial. <\/span><\/a><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><\/span><\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Haz m\u00e1s con DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Sin complicaciones y de alto rendimiento. El alojamiento de WordPress puede ayudarte a crecer tu negocio. Planes desde $16.95 USD\/mes.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/es\/wordpress\/administrado\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Escoge tu plan                    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Si has estado en la programaci\u00f3n durante alg\u00fan tiempo, hay muchas posibilidades de que PHP y MySQL formen parte de tu conocimiento tecnol\u00f3gico. No importa cu\u00e1ntos lenguajes nuevos y brillantes vayan y vengan, esta combinaci\u00f3n (PHP y MySQL) estar\u00e1 all\u00ed por al menos un poco m\u00e1s de tiempo. Y esa es la raz\u00f3n por la [&hellip;]<\/p>\n","protected":false},"author":1035,"featured_media":19777,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Crear gr\u00e1ficas hermosas es f\u00e1cil cuando extraes informaci\u00f3n de las bases de datos de MySQL a trav\u00e9s de PHP. \u00a1Te ayudamos con el paso a paso!","toc_headlines":"[[\"h-paso-1-incluir-archivos-de-graficos-en-biblioteca-nbsp\",\"Paso 1: Incluir archivos de gr\u00e1ficos en biblioteca\u00a0\"],[\"h-paso-2-iniciar-la-conexion-con-la-base-de-datos-mysql\",\"Paso 2: Iniciar la conexi\u00f3n con la base de datos MySQL\"],[\"h-paso-3-validar-la-conexion-y-escribir-consulta-sql\",\"Paso 3: Validar la conexi\u00f3n y escribir consulta SQL\"],[\"h-paso-4-formar-la-matriz-json\",\"Paso 4: Formar la matriz JSON\"],[\"h-paso-5-crear-un-contenedor-grafico\",\"Paso 5: crear un contenedor gr\u00e1fico\"],[\"h-paso-6-crear-una-instancia-de-fusioncharts-y-cerrar-la-conexion-de-la-base-de-datos\",\"Paso 6: Crear una instancia de FusionCharts y cerrar la conexi\u00f3n de la base de datos\"]]","hide_toc":false,"footnotes":""},"categories":[11668],"tags":[],"class_list":["post-27029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo generar gr\u00e1ficas de bases de datos MySQL con PHP - DreamHost<\/title>\n<meta name=\"description\" content=\"Crear gr\u00e1ficas hermosas es f\u00e1cil cuando extraes informaci\u00f3n de las bases de datos de MySQL a trav\u00e9s de PHP. \u00a1Te ayudamos con el paso a paso!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo generar gr\u00e1ficas de una base de datos MySQL usando PHP\" \/>\n<meta property=\"og:description\" content=\"Crear gr\u00e1ficas hermosas es f\u00e1cil cuando extraes informaci\u00f3n de las bases de datos de MySQL a trav\u00e9s de PHP. \u00a1Te ayudamos con el paso a paso!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-19T17:00:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T00:12:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/MySQL-DreamHost.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"526\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DreamHost\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DreamHost\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo generar gr\u00e1ficas de bases de datos MySQL con PHP - DreamHost","description":"Crear gr\u00e1ficas hermosas es f\u00e1cil cuando extraes informaci\u00f3n de las bases de datos de MySQL a trav\u00e9s de PHP. \u00a1Te ayudamos con el paso a paso!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/","og_locale":"en_US","og_type":"article","og_title":"C\u00f3mo generar gr\u00e1ficas de una base de datos MySQL usando PHP","og_description":"Crear gr\u00e1ficas hermosas es f\u00e1cil cuando extraes informaci\u00f3n de las bases de datos de MySQL a trav\u00e9s de PHP. \u00a1Te ayudamos con el paso a paso!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2016-05-19T17:00:52+00:00","article_modified_time":"2025-01-17T00:12:02+00:00","og_image":[{"width":900,"height":526,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/MySQL-DreamHost.jpg","type":"image\/jpeg"}],"author":"DreamHost","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"DreamHost","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/"},"author":{"name":"DreamHost","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/46d16fd5c5cafab6b32df1c79391f17e"},"headline":"C\u00f3mo generar gr\u00e1ficas de una base de datos MySQL usando PHP","datePublished":"2016-05-19T17:00:52+00:00","dateModified":"2025-01-17T00:12:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/"},"wordCount":855,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/MySQL-DreamHost.jpg","articleSection":["Tutoriales"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/","name":"C\u00f3mo generar gr\u00e1ficas de bases de datos MySQL con PHP - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/MySQL-DreamHost.jpg","datePublished":"2016-05-19T17:00:52+00:00","dateModified":"2025-01-17T00:12:02+00:00","description":"Crear gr\u00e1ficas hermosas es f\u00e1cil cuando extraes informaci\u00f3n de las bases de datos de MySQL a trav\u00e9s de PHP. \u00a1Te ayudamos con el paso a paso!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/MySQL-DreamHost.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2016\/05\/MySQL-DreamHost.jpg","width":900,"height":526},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/generar-graficas-de-base-de-datos-mysql-en-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo generar gr\u00e1ficas de una base de datos MySQL usando PHP"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/46d16fd5c5cafab6b32df1c79391f17e","name":"DreamHost","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2020\/03\/dreamhost-logo-mark-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2020\/03\/dreamhost-logo-mark-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2020\/03\/dreamhost-logo-mark-150x150.jpg","caption":"DreamHost"},"description":"Leaders in web hosting, domain registration, and cloud services for individuals, small businesses, and developers!","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/dreamhost\/"}]}},"lang":"es","translations":{"es":27029},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/27029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1035"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=27029"}],"version-history":[{"count":10,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/27029\/revisions"}],"predecessor-version":[{"id":63655,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/27029\/revisions\/63655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/19777"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=27029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=27029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=27029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}