Add another series to existing plot with flot

Question

I need to know how I can easily add another series to an existing plot using Flot. Here is how I currently plot a single series:

function sendQuery(){
var host_name = $('#hostNameInput').val();
var objectName = $('#objectNameSelect option:selected').text();
var instanceName = $('#instanceNameSelect option:selected').text();
var counterName = $('#counterNameSelect option:selected').text();
$.ajax({
        beforeSend: function(){$('#loading').show();},
    type: "GET",
    url: "http://okcmondev102/cgi-bin/itor_PerfQuery.pl?machine="+host_name+"&objectName="+objectName+"&instanceName="+instanceName+"&counterName="+counterName,
    dataType: "XML",
    success: function(xml){
        var results = new Array();
        var counter = 0;


        var $xml = $.xmlDOM(xml);
                $xml.find('DATA').each(function(){
                    results[counter] = new Array(2);
                    results[counter][0] = $(this).find('TIMESTAMP').text();
                    results[counter][1] = $(this).find('VALUE').text();
                    counter++;
                });

        plot = $.plot($("#resultsArea"),[ { data: results, label: host_name} ], 
                                                {
                        series: {
                            lines: { show: true }
                        },
                        xaxis: {
                        mode: "time",
                          timeformat: "%m/%d/%y %h:%S%P"
                                                },
            colors: ["#000099"],
                        crosshair: { mode: "x" },
                        grid: { hoverable: true, clickable: true }

                    });

Answer 1

At a high-level, the result of your call into itor_PerfQuery.pl will need to be extended to include the additional series data. You'll then want to make your "results" variable a multi-dimensional array to support the additional data and you'll need to update the current xml "find" loop which populates results accordingly. The remainder of the code should stay the same as flot should be able to plot the extended dataset. I think a review of the flot example will help you out. Best of luck.

Answer 2

You can just add another results set:

// build two data sets
var dataset1 = new Array();
var dataset2 = new Array();

var $xml = $.xmlDOM(xml);
$xml.find('DATA').each(function(){
  // use the time stamp for the x axis of both data sets
  dataset1[counter][0] = $(this).find('TIMESTAMP').text();
  dataset2[counter][0] = $(this).find('TIMESTAMP').text();
  // use the different data values for the y axis
  dataset1[counter][1] = $(this).find('VALUE1').text();
  dataset2[counter][2] = $(this).find('VALUE2').text();
  counter++;
});

// build the result array and push the two data sets in it
var results = new Array();
results.push({label: "label1", data: dataset1});
results.push({label: "label2", data: dataset2});

// display the results as before
plot = $.plot($("#resultsArea"), results, {
  // your display options
});