By mabhobs on

It took me a little while to figure out how to use flot ( http://drupal.org/project/flot ) with drupal. I want to post the following example to make it easier for others interesting 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.

<?php   
theme_flot_graph('placeholder');
$(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 ]); });

?>

⋅ Categories: Drupal 6.x

Comments

mabhobs’s picture

mabhobs commented

Well displaying the code correctly did not work as intended and I did not preview :-/.

New try:

<?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>
vm’s picture

vm commented

consider creating a handbook page for the documenatation area "contrib modules" would be a good place where this won't fall to the bottom of the lake.

bkudrle’s picture

bkudrle commented

I have been working with the flot module and have discovered some pointers about its use that I wanted to document for the possible use of others. I hesitate to create official documentation pages at this time, because I think that some of these issues will be fleeting. But it might be helpful to put something about them here until the next version comes out.

So this is from working with the flot version 6.1.0 from March 9, 2009. Let's assume that we are working with the final call like this. 

theme('flot_graph', array(), array($d1), $o1, false );

$d1 contains the data, as per the example that is included in the module's readme file. Note that for the label for a given set of data, you can use this: 

$d1->label = "My Label";

before making the theme call.

However, the $o1 that represents the optional parameters (e.g., for optional parameters like "points : {show:true}" or "grid {backgroundColor: #ffff0ff} ) does not work with Drupal as given above. Playing around with the source code, I found that the following DOES work in an HTML file: 

if (Drupal.jsEnabled) {      
      $(document).ready(function() {
        Drupal.flot.flot_auto_identifier_1 = $.plot($("#flot-auto-identifier-1"), [ { "data": [ [ "7", "12.36" ], [ "7.5", "14.8" ], [ "8", "11.7" ] ], label: "My Data" } ], { lines: {show: true}, "points" : { show: true }, grid: { backgroundColor: "#3390cc"}, legend: { margin: -30,  position: "se", }  } );
      });
    }

However, the problem is that when Drupal generates the calls in the drupal_to_js() call that is used in the flot module, then quotes are put around the bracketed part, like this (which DOES NOT WORK) : 

<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (Drupal.jsEnabled) {      
      $(document).ready(function() {
        Drupal.flot.flot_auto_identifier_1 = $.plot($("#flot-auto-identifier-1"), [ { "data": [ [ "7", "12.36" ], [ "7.5", "14.8" ], [ "8", "11.7" ] ], "lines": {  }, "bars": {  }, "points": "{ show:true }" ], {  });
        
      });
    }
//--><!]]>
</script>

The problem is the quotes (") around the bracketed parts like "{show:true}". These need to not have quotes around them if they are to work. I am not familiar enough with jQuery and Drupal at this point to know how to get around that, but if anyone does, then the optional parameters should become functional as well.

One more small point, and that is that the labels look funny using the default Garland theme, but that is just a CSS issue. If the Garland css is commented out, then the labels look as they do in the flot examples.

Hope that this helps someone. This module has a lot of potential, as you don't have to contend with whether graph services are working well are not (for example, in the case of Google graphs). And the integration with jQuery should make it the de facto graphing standard for Drupal, I would think, as this module becomes mature. Good work.

vood002’s picture

vood002 commented

I don't know if flot was changed to solve your problem, but the quotes generated by drupal_to_js do not break the options array I pass to flot. Here is a usage example:

<?php

	$series = array('points' => array('show' => TRUE), 'lines' => array('show' => TRUE)  );
	$options = array('series' => $series);	

	return theme('flot_graph', array(), array($d1),$options);

?>

This works fine

SonOfGrey’s picture

SonOfGrey commented

Hi,

I'm pretty new to Drupal module development and I need charts. I wanted to use flot and tried adding the code you showed above the my module, but I can't get it to work :/

Where in a typical module do you have to put the code you posted? I was adding it to the $func_content variable that returns from the function called when accessing one of the menu items in my module, but I guess I'm missing something?

I also want to be able to use data I read from a database to fill the data arrays for the flot chart.

Please if someone can give me some advice, I would really appreciate it!
Thanks!