How come the div containing the Flot graph returns empty on an ajax callback from my form. I attach an ajax callback on my radio elements to retrieve a new set of data depending on the radio chosen.

Comments

Bimble’s picture

I have the same problem, did you find a solution?

Etroid’s picture

Issue summary: View changes

This is an old issue, but I thought I'd give my two cents after encountering this issue myself. By default the javascript to plot the chart does not get run on ajax callback. In order to achieve this you have to write some custom code. I ended up writing my own custom flot chart function which is using "Drupal.behaviors" and runs on ajax callbacks as well. The code below requires some modifications of the flot module, but it should give you an idea of how to go about it. You are always welcome to pm for more information.

Hope this will help someone out in the future!

The JS code:
--------------

(function($) {
    Drupal.behaviors.flot = {
        attach: function (context, settings) {
            $.each($(".flot-chart", context).not(".flot-chart-processed"), function(idx, value) {
                var chart_id = $(value).attr("id");

                if (Drupal.settings.flot[chart_id] != undefined) {
                    var chart_data = Drupal.settings.flot[chart_id]['data'];
                    var chart_options = Drupal.settings.flot[chart_id]['options'];

                    //Plot data
                    var plot = $.plot('#' + chart_id, chart_data, chart_options);
                    plot.getData();
                    
                    $(value).addClass('flot-chart-processed');
                }
            });
        }
    };
})(jQuery);

Php code
----------

function template_preprocess_flot_graph(&$variables) {
  ...
  //Asign unique ID to the flot container -- I used UUID module to do this
  $flotchart_id = 'flot-chart-' . _uuid_generate_php();

  //Put the flot data & options in an array
  $flotchart_config = array();
  $flotchart_config['data'] = $data;
  $flotchart_config['options'] = $options;

  //Pass flot data & settings to JS
  drupal_add_js(array("flot" => array($flotchart_id => $flotchart_config)), "setting");

  //Render array
  $variables['options'] = $options;
  $variables['element'] = array(
    'graph' => array(
      'style' => $variables['element']['style'] . 'min-width:200px; min-height:200px;',
      'class' => isset($variables['element']['class']) ? array($variables['element']['class']) : array(),
      'id' => $flotchart_id,
    ),
    'legend' => $legend,
  );
}