Last updated May 2, 2012. Created by mabhobs on February 28, 2009.
Edited by Anthony Gaudino, silverwing. 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>| Attachment | Size |
|---|---|
| graph1.png | 53.44 KB |
| graph1_thumb.png | 20.97 KB |
Comments
Sending option
Is there any documentation which gives brief explanation about sending options to the graph.
$.plot is not a function
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?Perhaps flot js is not loaded
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.
Using flot in a custom module
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 );
}
Not working :(
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?
Flot Charts + Views
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
php-only example
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]);
?>
How do I make custom ticks
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")),
),
),
);