Programación

PHP

Gráfica de barras

Última actualización: 15-11-2017 05:55

Notas

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:
https://blog.esl-idiomas.com/blog/esl-es/los-idiomas-mas-hablados-en-el-mundo/

Resultado del 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

Idiomas más hablados por número de hablantes nativos
Barras horizontales
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

Barras verticales
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

Código PHP


<?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>&nbsp;</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:&nbsp;&nbsp;</td>'
                    . '<td>' . number_format($total, 0, '.', ',') . ' millones</td>'
                    . '<td>&nbsp;</td>'
                . '</tr>'
            . '</tfoot>';
    $xc .= '</table>';
    $xc .= '<p>&nbsp;</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>&nbsp;</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('&nbsp;', 3) . '</span>'
                            . '&nbsp;'
                            .  $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:&nbsp;&nbsp;</td>'
            . '<td>' . number_format($total, 0, '.', ',') . ' millones</td>'
            . '<td>&nbsp;</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;
?>

Política de Privacidad

Última actualización: 23 de diciembre de 2024

Tu privacidad es importante para nosotros. En esta política de privacidad, explicamos qué información recopilamos cuando visitas nuestro sitio web y cómo utilizamos esa información.

1. Información que recopilamos

Este sitio no recopila información personal de los usuarios, excepto cuando un usuario elige voluntariamente comunicarse a través del formulario de contacto. En ese caso, los datos proporcionados (como tu nombre y correo electrónico) se utilizarán únicamente para responder a tu consulta.

2. Uso de Cookies

Este sitio web utiliza una única cookie esencial llamada PHPSESSID.

¿Qué hace esta cookie? La cookie PHPSESSID se utiliza exclusivamente en la página de contacto para gestionar el funcionamiento del CAPTCHA. Esto garantiza que el formulario de contacto funcione correctamente y evita envíos automáticos o maliciosos.
¿Por qué usamos esta cookie? Esta cookie es estrictamente necesaria para proteger la página de contacto contra actividades no deseadas. No recopila ni almacena datos personales del usuario. Además, se elimina automáticamente cuando cierras el navegador.
Uso de variables de sesión Este sitio también utiliza variables de sesión de PHP para saber si ya se ha mostrado el aviso de las políticas de privacidad al usuario. Esta información solo se utiliza con el propósito de garantizar que el aviso no se muestre más de una vez por sesión.

No usamos cookies de análisis ni de seguimiento.

3. Seguridad de los datos

Adoptamos medidas técnicas y organizativas razonables para proteger cualquier información que compartas con nosotros contra el acceso no autorizado, pérdida o alteración.

4. Enlaces a sitios de terceros

Nuestro sitio web puede contener enlaces a otros sitios web. No somos responsables de las prácticas de privacidad ni del contenido de dichos sitios.

5. Cambios en esta política de privacidad

Nos reservamos el derecho de actualizar esta política de privacidad en cualquier momento. Cualquier cambio será publicado en esta misma página e incluirá la fecha de la última actualización.

6. Contacto

Si tienes preguntas o inquietudes sobre esta política de privacidad, puedes comunicarte con nosotros a través de la página de contacto disponible en este sitio web.

7. Cumplimiento con Normativas Internacionales de Privacidad

Nuestro sitio web cumple con las principales regulaciones internacionales de protección de datos personales para garantizar la privacidad y seguridad de los usuarios. Esto incluye, pero no se limita a, las siguientes leyes:

Reglamento General de Protección de Datos (GDPR) de la Unión Europea
Más información sobre el GDPR de la UE
California Consumer Privacy Act (CCPA)
Más información sobre la CCPA
Declaración Universal de Derechos Humanos de las Naciones Unidas
Ver la declaración
EU-U.S. Privacy Shield Framework (para transferencias de datos entre la UE y EE. UU.)
Más información sobre el Privacy Shield Framework
Ley General de Protección de Datos Personales en Posesión de los Particulares (México)
Más detalles sobre esa ley mexicana
Lei Geral de Proteção de Dados (LGPD) - Brasil
Ver detalles de la LGPD brasileña

Si tienes preguntas o dudas sobre el cumplimiento de estas leyes, no dudes en ponerte en contacto conmigo a través de la página de contacto de este sitio web.