Warning message

Documentation is currently being migrated into the new system. Some pages might be temporarily missing, and some guides might appear empty. Thank you for your patience while we are improving Drupal.org documentation.

HowTos

Flot Usage Example

Last updated on
November 1, 2016 - 16:31

It took me a little while to figure out how to use flot ( http://drupal.org/project/flot ) with drupal. I post the following example to make it easier for others interested in using the flot api with drupal. The following code produces the sample graph displayed at http://people.iola.dk/olau/flot/examples/basic.html in a drupal page. The flot module needs to be installed first, obviously. I hope this is helpful.

<?php   
theme_flot_graph('placeholder');
?>

<div id="placeholder" style="width:600px;height:300px;"></div>

<script id="source" language="javascript" type="text/javascript">
$(function () {

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
    $.plot($("#placeholder"), [ d2, d3 ]);
});
</script>

This next example uses PHP to create the Flot Chart and JS for hover tooltip and custom CSS for legend.

It uses Drupal 7 and the newest Flot Module and Library (2012/05/02).
The data is acquired from a custom node.
You can copy and pasted it in a page's body after enabling PHP input.
This code was from a Brazillian intranet, so some texts are in PT.

<?php
print("<p>Mova o mouse sobre os pontos do gráfico abaixo para obter informações referentes à produtividade.</br>".
"Faça uma seleção no gráfico ou sua miniatura, clicando e arrastando com o mouse para dar zoom em uma região do gráfico.</p>"
);

    $query = new EntityFieldQuery();
    $query->entityCondition('entity_type', 'node')
            ->entityCondition('bundle', 'produtividade')
            ->propertyCondition('status', 1);
    $result = $query->execute();

    $js_data;
    $filtered_items;

    if (isset($result['node'])) {
        $news_items_nids = array_keys($result['node']);
        $news_items = entity_load('node', $news_items_nids);

        $data = array();
        $data2 = array();
        

        // Remove unneded data and set date as key.
        foreach ($news_items as $record)
        {
            $filtered_items[strtotime(date("Y-m", $record->field_data['und'][0]['value'])) * 1000] = array(
                "field_receita_liquida" => $record->field_receita_liquida['und'][0]['value'],
                "field_despesa_total" => $record->field_despesa_total['und'][0]['value'],
                "field_classe_1" => $record->field_classe_1['und'][0]['value'],
                "field_classe_2" => $record->field_classe_2['und'][0]['value'],
                "field_classe_3" => $record->field_classe_3['und'][0]['value'],
                "field_classe_4" => $record->field_classe_4['und'][0]['value'],
            );
        }

        foreach ($filtered_items as $key=>$record)
        {
            $data[] = array($key, $record["field_receita_liquida"]);
            $data2[] = array($key, $record["field_despesa_total"]);
        }

        $d1 = new flotData($data);
        $d1->label = 'Receita Bruta';
        $d1->points = new flotPoint(array('radius' => 5));
        $d1->lines = new flotLine(array('fill' => true));
        $d1->color = "#008a00";

        $d2 = new flotData($data2);
        $d2->label = 'Despesas';
        $d2->points = new flotPoint(array('radius' => 5));
        $d2->lines = new flotLine(array('fill' => true));
        $d2->color = "#D6121F";

        $style = new flotStyle();
        $style->xaxis->mode = 'time';
        $style->xaxis->tickSize = array(1, "month");
        $style->yaxis->ticks = 15;
        $style->grid->labelMargin = 5;
        $style->legend->position = "ne";
        
        // Configure graph
        $produtividade_data = array(
            'element' => array(
                'id' => 'flot-produtividade',
                'class' => 'flot-produtividade',
                'style' => 'width:940px;height:300px'
            ),
            'data' => array($d1, $d2),
            'options' => $style,
            'legend' => TRUE,
            'zoom' => TRUE,
        );
          
        // Now we show the graph.
        print theme('flot_graph', $produtividade_data);
    }
?>




<script>
jQuery(document).ready(function($){
    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #E1E1E1',
            padding: '4px',
            'background-color': '#fff',
            'border-radius': '6px',
            'box-shadow': '0 0 10px #999999',
        }).appendTo("body").fadeIn(200);
    }

    var data = <?php echo json_encode($filtered_items); ?>;

    var previousPoint = null;
    $("#flot-view-zoomable-0").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();

                var produtividade;
                var x = item.datapoint[0].toString();
                var y = item.datapoint[1].toFixed(2);

                produtividade = gep(parseFloat(data[x]["field_receita_liquida"]),
                        parseFloat(data[x]["field_despesa_total"]),
                        parseFloat(data[x]["field_classe_1"]),
                        parseFloat(data[x]["field_classe_2"]),
                        parseFloat(data[x]["field_classe_3"]),
                        parseFloat(data[x]["field_classe_4"]));

                var xpos = item.pageX;

                if (item.pageX > 800)
                {
                    xpos = 700;
                }

                showTooltip(xpos, item.pageY,
                            "<table>" +
                            "    <tbody>" +
                            "       <tr>" +
                            "           <td style=\"color: green;\">Receita Bruta:</td>" +
                            "           <td>R$ " + parseFloat(data[x]["field_receita_liquida"]).toFixed(2) + "</td>" +
                            "       </tr>" +
                            "       <tr>" +
                            "           <td style=\"color: red;\">Despesas:</td>" +
                            "           <td>R$ " + parseFloat(data[x]["field_despesa_total"]).toFixed(2) + "</td>" +
                            "       </tr>" +
                            "       <tr>" +
                            "           <td style=\"color: blue;\">Receita Líquida:</td>" +
                            "           <td>R$ " + (parseFloat(data[x]["field_receita_liquida"]) - parseFloat(data[x]["field_despesa_total"])).toFixed(2) + "</td>" +
                            "       </tr>" +
                            "    </tbody>" +
                            "</table>" +
                            "<table class=\"iba_borders sticky-enabled tableheader-processed sticky-table sticky-header\">" +
                            "   <thead>" +
                            "       <tr>" +
                            "           <th>Classe</th>" +
                            "           <th>Valor Bruto</th>" +
                            "       </tr>" +
                            "   </thead> " +
                            "   <tbody>" +
                            "       <tr class=\"even\">" +
                            "           <td>4</td>" +
                            "           <td>R$ " + produtividade[0].toFixed(2) + "</td>" +
                            "       </tr>" +
                            "       <tr class=\"odd\">" +
                            "           <td>3</td>" +
                            "           <td>R$ " + produtividade[1].toFixed(2) + "</td>" +
                            "       </tr>" +
                            "       <tr class=\"even\">" +
                            "           <td>2</td>" +
                            "           <td>R$ " + produtividade[2].toFixed(2) + "</td>" +
                            "       </tr>" +
                            "       <tr class=\"odd\">" +
                            "           <td>1</td>" +
                            "           <td>R$ " + produtividade[3].toFixed(2) + "</td>" +
                            "       </tr>" +
                            "    </tbody>" +
                            "</table>");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });

    function gep(receita, despesa, qtd_gp_1, qtd_gp_2, qtd_gp_3, qtd_gp_4) {
        // Many calculation later...

        var result = new Array();
        result[0] = 10;//grupo4;
        result[1] = 20;//grupo3;
        result[2] = 30;//grupo2;
        result[3] = 40;//grupo1;

        return result;
    }



    //CSS
    $(window).bind('load', function() {
        $('div.legend > div').css({
            'width': '108px'
        });

        $('div.legend > table, div.legend > table > tbody').css({
            'width': '105px'
        });

        $('div.legend > div, div.legend > table').css({
            'top': '5px',
            'right': '6px'
        });

        $('div.legend > table').css({
            'margin': '0'
        });

        $('div.legend > table > tbody').css({
            'border': 'none'
        });

        $('div.legend > table > tbody > tr > td').css({
            'padding-left': '0',
            'padding-right': '0'
        });

        $('div.legend > table > tbody > tr > td > div').css({
            'width': '14px'
        });
    });
});
</script>