Question

I ve got a javascript 101 question.

I m using a nice graphing library (flot), and plotting multiple graphs on a single page. Each graph is a div, with a attribute set that tells the graph where to grab it s data from. For example, the HTML might be:

<div class="line-chart" data-src= /revenue.js ></div>
<div class="scatter-chart" data-src= /users/byweek.js ></div>
<div class="scatter-chart2" data-src= /apps/byweek.js ></div>

Where I ve got two types of charts here, a scatter and line. Ideally I d be able to iterate over the classes, and simply grab the appropriate data. However, I m confused by the context of the callback, and not knowing which div I m actually in, so instead I m doing this hack in my JS:

$(document).ready(function() {

    $( .line-chart ).each(function() {
        $.getJSON($(this).attr( data-src ),
        function(data) {
            $.plot($( .line-chart ), [data], { xaxis: { mode: "time" }});
        });
    });

    $( .scatter-chart ).each(function() {
        $.getJSON($(this).attr( data-src ),
        function(data) {
            $.plot($( .scatter-chart ), [data], { xaxis: { mode: "time" },
                                                  lines: { show: false },
                                                  points: { show: true }
            });
        });
    });

    $( .scatter-chart2 ).each(function() {
        $.getJSON($(this).attr( data-src ),
        function(data) {
            $.plot($( .scatter-chart2 ), [data], { xaxis: { mode: "time" },
                                                  lines: { show: false },
                                                  points: { show: true }
            });
        });
    });
});

I m sure I can clean this up, I m just not clear on how to go about doing it. The main problem is that the $.plot needs to apply to the specific chart that the getJSON was called a against, not the first one it finds.

Answer 1

If you are unsure about the context of the callback, it will probably be cleaner not to use that context anyway. You can use the context of your each() loop instead:

$( .line-chart ).each(function() {
  var self = $(this);
  $.getJSON(self.attr( data-src ),
    function(data) {
        $.plot(self, [data], { xaxis: { mode: "time" }});
    });
});

Answer 2

$(function() {
      function plotChart(selector, options) {
        $(selector).each(function() {
          var $this = $(this);
          $.getJSON($this.attr( data-src ), function(data) {
            $.plot($this, [data], options);
          });
        });
      }

      plotChart( .line-chart , { xaxis: { mode: "time" });
          plotChart( .scatter-chart , {
              xaxis: {
                mode: "time"
              },
              lines: {
                show: false
              },
              points: {
                show: true
              });

            plotChart( .scatter-chart2 , {
                xaxis: {
                  mode: "time"
                },
                lines: {
                  show: false
                },
                points: {
                  show: true
                });

            });

is quite a bit cleaner.

友情链接