CODEWITHSUNDEEP
javascriptjquery
user970117
user970117

Reputation: 265

populating variable for dynamic Jquery Graph

I have the script below for a graphing system named flot, available to download. Basically what would be the best way to dynamically change the content of the array VAR data?? so I have a table of users and depending on the user I click on it populates that array with values, maybe when the page is first loaded i gather the data from php for all the users in the table (maybe 20 users max) then an onclick event which populates the var data variable and changes the graph. Just not sure how to go about doing it?? or even if I can.

Any help would be great thanks.

  <div id="placeholder" style="width:600px;height:300px"></div>
  <p><input id="clearSelection" type="button" value="Clear selection" />

  <input id="setSelection" type="button" value="Select year 1994" /></p>
  <p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p>

<script type="text/javascript">
$(function () {
var data = [
    {
        label: "United States",
        data: [[1990, 40.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3]]
    }
];

var options = {
    series: {
        lines: { show: true },
        points: { show: true }
    },
    legend: { noColumns: 2 },
    xaxis: { tickDecimals: 0 },
    yaxis: { min: 0 },
    selection: { mode: "x" }
};

var placeholder = $("#placeholder");

placeholder.bind("plotselected", function (event, ranges) {
    $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));

    var zoom = $("#zoom").attr("checked");
    if (zoom)
        plot = $.plot(placeholder, data,
                      $.extend(true, {}, options, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                      }));
});

placeholder.bind("plotunselected", function (event) {
    $("#selection").text("");
});

var plot = $.plot(placeholder, data, options);

$("#clearSelection").click(function () {
    plot.clearSelection();
});

$("#setSelection").click(function () {
    plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
});

});

Upvotes: 0

Views: 411

Answers (1)

Allen Tellez
Allen Tellez

Reputation: 1211

If your user data on page load looked something like this

var users = [
    {
        name: "User1",
        label: "United States",
        data: [[1990, 40.9], [1991, 18.7], [1992, 18.4], [1993, 19.3]]
    },
    {
        name: "User2",
        label: "Germany",
        data: [[1990, 40.6], [1991, 18.2], [1992, 18.9], [1993, 19.4]]
    },
    {
        name: "User3",
        label: "Mexico",
        data: [[1990, 30.6], [1991, 28.2], [1992, 38.9], [1993, 29.4]]
    }
];

You could then dynamically write some clickable content . . .

for(var i = 0; i < users.length; i++) {
    $('body').append('<div class="user">' + users[i].name + '</div>');

    //store the data on the element itself
    $('.user:last').data.user_data = users[i];
}

//set up the click events
$('.user').each(function() {
    $(this).click(function(evt) {
        //set your data object using some of the user data
        data = $(this).data.user_data.data;

        //redraw the graph
    });
});

One thing to note is the data object you are using needs to be in a context/scope accessible from within the click event. I shortened the data sets just to demonstrate.

Upvotes: 1

Related Questions