Last updated June 7, 2014. Created on February 28, 2009.
Edited by acabouet, Anthony Gaudino, silverwing, mabhobs. Log in to edit this page.

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>

AttachmentSize
graph1.png53.44 KB
graph1_thumb.png20.97 KB

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

gopagoninarsing’s picture

Is there any documentation which gives brief explanation about sending options to the graph.

max5555’s picture

I've got an empty output instead of the plot and Firebug reveals the following error: $.plot is not a function. Does anybody know what is the problem?

bkudrle’s picture

I had a similar issue at first. I used the code in the above explanation and put it in the contents of a page, and set the Input Format to PHP code. There was an empty display. After reading the README file, then I added the flot javascript library at /sites/all/modules/flot/flot and then the graph was displayed.

bkudrle’s picture

As an equivalent example of how to use flot in a custom module, you can use something like the following.

function myflot_graph() {

  $element = array(
    'id' => "placeholder",
  );

  $d2[] = array(0, 3);
  $d2[] = array(4, 8);
  $d2[] = array(8, 5);
  $d2[] = array(9, 13);

  $d3[] = array(0, 12);
  $d3[] = array(7, 12);
  $d3[] = null;
  $d3[] = array(7, 2.5);
  $d3[] = array(12, 2.5);

  $d1 = array($d2, $d3);

  return theme_flot_graph($element, $d1 );
}

sus’s picture

I have installed the Flot module
Downloaded Flot from Goggle code and installed in /sites/all/modules/flot/flot
Created a new page and inserted the code
Set Input format to PHP

I get nothing. Firebug shows the div but it is empty.

Any pointers please?

keith_k’s picture

Here's a "Flot Charts" style plugin and field handler for Drupal View's module:
http://groups.drupal.org/node/121269
https://github.com/rj-steinert/flot_charts-for-views

acrollet’s picture

This example shows new nodes of a specific content type over the past 30 days:

<?php
$dates
= array();

$query = 'SELECT created FROM {node} WHERE type = "page"';
$query .= 'AND created > UNIX_TIMESTAMP(DATE_SUB(CURDATE(), INTERVAL 30 DAY))';

$result = db_query($query);
if (
$result) {
  while (
$data = db_fetch_array($result)) {
   
$dates[] = $data['created'];
  }
}

$dates_day = array();

foreach (
$dates as $date) {
 
// We have to add milliseconds for javascript-style timestamps.
 
$dates_day[] = strtotime(date("Y-m-d", $date)) * 1000;
}

$tickets = array_count_values($dates_day);

$data = array();
foreach(
$tickets as $key => $val) {
 
$data[] = array($key, $val);
}

// Now we make the graph.
$output[] = theme('flot_graph', array('style' => 'width:250px;height:125px'), array($data), array(
 
'xaxis' => array('mode' => 'time'),
 
'series' => array('points' => array('show' => 'true')),
 
'grid' => array('borderwidth' => 1),
  )
);

print(
$output[0]);
?>
longphant’s picture

How do I make custom ticks for the graph? I've tried the following and it does not show anything in the x-axis:

$d1 = new flotData(array(array("4.1", 1), array(0, 8), array(8, 5)));
    $d2 = new flotData(array(array(0, 8), array(3, 5), array(8, 0.5)));
    $variables = array(
        'data' => array($d1, $d2),
    'element' => array(
          'id' => 'flot-example-normal',
          'class' => 'flot-example',
          'style' => "width:600px;height:400px",
    ),
'options' => array(
    'xaxis' => array(
        'min' => '0',
'max' => '1',
'tickDecimals' => '0',
'ticks' => array(array(0 => "foo"), array(1 => "bar")),
    ),
),
  );
m.puccetti’s picture

I have just installed chart module and related for drupal, so i need some informations:

Which kind of graph can i do?
Is it possible to do more than two axis graph? (left and right axis representing two different informations?)
Which is the property i have to set to do this?

To generate the graph i have only to create a new php content and place the code like the above posted?

Thank you!
Marco

m.puccetti’s picture

I have just installed chart module and related for drupal, so i need some informations:

Which kind of graph can i do?
Is it possible to do more than two axis graph? (left and right axis representing two different informations?)
Which is the property i have to set to do this?

To generate the graph i have only to create a new php content and place the code like the above posted?

Thank you!
Marco