Compatibility issue with Charts and Graphs module [#1121770]

Hello! I'm using Charts and Graphs module to display Bluff chart on my pages. Unfortunately it uses jQuery dependent inline JS and therefore does not work with JABjs turned on.

<script type="text/javascript">
        var ChartsAndGraphs = ChartsAndGraphs || {};

        ChartsAndGraphs.init = function() {
          var g = new Bluff.Line("bluffchart-2-graph", "600x354");
          
	g.marker_font_size = 20;
	g.hide_legend = true;
	g.hide_title = false;
	g.sort = false;
	g.title_font_size = 32;
	g.tooltips = true;
	g.minimum_value = -0;
	g.set_theme({
        colors: ['#059BD8'],
        marker_color: '#aea9a9',
        font_color: '#000000',
        background_colors: ['#FFF', '#FFF']
      });
	g.data_from_table("bluffchart-2", false);

          g.draw();

          var g_labels = ["\u0422\u0418\u0426"];
          var legend = ["<ul class=\"bluff-legend\">"];

          for (var i = 0, j = 0, color; i < g_labels.length; i++, j++) {
            if (g.colors[j]) {
              color = g.colors[j]
            }
            else {
              g.colors[(0)];
              j = 0;
            }
            legend.push("<li>");
            legend.push("<div style=\"background-color: " + color + "\"><\/div>" + g_labels[i]);
            legend.push("<\/li>");
          }

          legend.push("<\/ul>");

          $("#bluffchart-2-graph")
            .parent("div.bluff-wrapper")
            .append(legend.join(""))
            .css({height: "auto"});
        }

        $(window).load(ChartsAndGraphs.init);

        Drupal.behaviors.ChartsAndGraphs_init = function(context) {
          ChartsAndGraphs.init();
        }
      </script>

How can this be fixed? How the LABjs.queue() should be used here?

Comments

Comment #1

jcisio CreditAttribution: jcisio commented 9 April 2011 at 16:16

If we wrap that JS code in $LAB.queue(), it should work. This issue is somewhat lied to #1117746: grab script tags even if they don't have the cdata escape string

Comment #2

Georgii CreditAttribution: Georgii commented 11 April 2011 at 13:43

jcisio, yes, that was my first thought. I've wrapped the code with $LAB.queue() like it is always done in jQuery:

<script type="text/javascript">
$LAB.queue(function () {
var ChartsAndGraphs = ChartsAndGraphs || {};
...
Drupal.behaviors.ChartsAndGraphs_init = function(context) {
          ChartsAndGraphs.init();
        }
});
</script>

But unfortunately with no luck. Did I do wrapping incorrectly?

Comment #3

jcisio CreditAttribution: jcisio commented 11 April 2011 at 14:34

I think the code should be changed a little: remove/change the "var" keywords. The problem may be at variable scope. If you are not sure, the best way is to wrap them in "Drupal" like: Drupal.ChartsAndGraphs = xyz...