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

Idiomas más hablados por número de hablantes nativos
Barras horizontales
IdiomaHablantes 
Mandarín845 millones
Español329 millones
Inglés328 millones
Hindi-Urdu240 millones
Árabe232 millones
Bengalí181 millones
Portugués178 millones
Ruso144 millones
Japonés122 millones
Punyabí109 millones
Total:  2,708 millones 

 

Barras verticales
IdiomaHablantes 
    Mandarín845 millones
    Español329 millones
    Inglés328 millones
    Hindi-Urdu240 millones
    Árabe232 millones
    Bengalí181 millones
    Portugués178 millones
    Ruso144 millones
    Japonés122 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($total0'.'',') . ' 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 == '<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($total0'.'',') . ' 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;
?>