Para diversos casos hace falta de vez en cuando el poder generar gráficas de barras de forma dinámica.
Existen muchas formas de generar gráficas. Varias de ellas utilizando librerías Javascript, PHP o mezcla entre ellas.
También se ha visto pasar por ahí un ejemplo que se basa en etiquetas CSS para dibujar las gráficas.
Lo que aquí se expone es PHP que genera HTML a partir del contenido de un arreglo.
[ 2017-10-22 ] Fuente de datos utilizados en el ejemplo:
| Idioma | Hablantes | |
| Mandarín | 845 millones | |
| Español | 329 millones | |
| Inglés | 328 millones | |
| Hindi-Urdu | 240 millones | |
| Árabe | 232 millones | |
| Bengalí | 181 millones | |
| Portugués | 178 millones | |
| Ruso | 144 millones | |
| Japonés | 122 millones | |
| Punyabí | 109 millones | |
| Total: | 2,708 millones |
| Idioma | Hablantes | |||||||||||
| Mandarín | 845 millones | |||||||||||
| Español | 329 millones | |||||||||||
| Inglés | 328 millones | |||||||||||
| Hindi-Urdu | 240 millones | |||||||||||
| Árabe | 232 millones | |||||||||||
| Bengalí | 181 millones | |||||||||||
| Portugués | 178 millones | |||||||||||
| Ruso | 144 millones | |||||||||||
| Japonés | 122 millones | |||||||||||
| Punyabí | 109 millones | |||||||||||
| Total: | 2,708 millones |
<?php
$data = array (
array('language' => 'Mandarín', 'quantity' => 845, 'color' => '2685CB'),
array('language' => 'Español', 'quantity' => 329, 'color' => '4AD95A'),
array('language' => 'Inglés', 'quantity' => 328, 'color' => 'FEC81B'),
array('language' => 'Hindi-Urdu', 'quantity' => 240, 'color' => 'FD8D14'),
array('language' => 'Árabe', 'quantity' => 232, 'color' => 'CE00E6'),
array('language' => 'Bengalí', 'quantity' => 181, 'color' => '4B4AD3'),
array('language' => 'Portugués', 'quantity' => 178, 'color' => 'FC3026'),
array('language' => 'Ruso', 'quantity' => 144, 'color' => '7DB8FF'),
array('language' => 'Japonés', 'quantity' => 122, 'color' => '6ADC88'),
array('language' => 'Punyabí', 'quantity' => 109, 'color' => 'FEE45F')
);
$total = 0;
for ($i = 0; $i < count($data); $i++)
$total += $data[$i]['quantity'];
for ($i = 0; $i < count($data); $i++)
$data[$i]['percent'] = floor($data[$i]['quantity'] * 1.0 / $total * 100);
$xc = '';
$xc .= '<h5>Idiomas más hablados por número de hablantes nativos</h5>';
$xc .= '<h6>Barras horizontales</h6>';
$xc .= '<table width="100%" cellpadding="5">';
$xc .= '<thead style="background-color:#333; color:#FFF;">'
. '<tr>'
. '<td>Idioma</td>'
. '<td>Hablantes</td>'
. '<td> </td>'
. '</tr>'
. '</thead>';
$xc .= '<tbody>';
for ($i = 0; $i < count($data); $i++)
$xc .= '<tr>'
. '<td width="20%">' . $data[$i]['language'] . '</td>'
. '<td width="20%">' . $data[$i]['quantity'] . ' millones</td>'
. '<td>'
. '<div style="width:100%; height:24px; display:block; background-color:#EEE;">'
. '<div style="width:' . $data[$i]['percent'] . '%; height:100%; display:block; background-color:#' . $data[$i]['color'] . ';"></div>'
. '</div>'
. '</td>'
. '</tr>';
$xc .= '</tbody>';
$xc .= '<tfoot style="background-color:#333; color:#FFF;">'
. '<tr>'
. '<td align="right">Total: </td>'
. '<td>' . number_format($total, 0, '.', ',') . ' millones</td>'
. '<td> </td>'
. '</tr>'
. '</tfoot>';
$xc .= '</table>';
$xc .= '<p> </p>';
$xc .= '<h6>Barras verticales</h6>';
$xc .= '<table width="100%" cellpadding="5">';
$xc .= '<thead style="background-color:#333; color:#FFF;">'
. '<tr>'
. '<td>Idioma</td>'
. '<td>Hablantes</td>'
. '<td> </td>'
. '</tr>'
. '</thead>';
$xc .= '<tbody>';
for ($i = 0; $i < count($data); $i++)
$xc .= '<tr>'
. '<td width="20%">'
. '<span style="background-color:#' . $data[$i]['color'] . ';">'
. str_repeat(' ', 3) . '</span>'
. ' '
. $data[$i]['language']
. '</td>'
. '<td width="20%">' . $data[$i]['quantity'] . ' millones</td>'
. ($i == 0 ? '<td valign="top" rowspan="' . count($data). '">~REPLACE_WITH_CHART~' . '</td>' : '')
. '</tr>';
$xc .= '</tbody>';
$xc .= '<tfoot style="background-color:#333; color:#FFF;">'
. '<tr>'
. '<td align="right">Total: </td>'
. '<td>' . number_format($total, 0, '.', ',') . ' millones</td>'
. '<td> </td>'
. '</tr>'
. '</tfoot>';
$xc .= '</table>';
$chart = '<table width="100%"><tr>';
for ($i = 0; $i < count($data); $i++)
{
$chart .= '<td title="' . $data[$i]['language'] . "\r\n" . $data[$i]['quantity'] . ' millones">'
. '<div style="width:100%;; height:330px; display:block; background-color:#' . $data[$i]['color'] . ';">'
. '<div style="width:100%; height:' . (100 - $data[$i]['percent']) . '%; display:block; background-color:#EEE;"></div>'
. '</div>'
. '</td>';
}
$chart .= '</tr></table>';
$xc = str_replace('~REPLACE_WITH_CHART~', $chart, $xc);
echo $xc;
?>