Ajouter une autre série à l'intrigue existante avec flot

Question

J'ai besoin de savoir comment je peux facilement ajouter une autre série à un tracé existant en utilisant Flot.

Voici comment je conspire actuellement une seule série:

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

Vous pouvez simplement ajouter un autre jeu de résultats:

// 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 
}); 

Answer 2

à un haut niveau, le résultat de votre appel en itor_PerfQuery.pl devra être élargi pour inclure les données de séries supplémentaires. Vous devrez ensuite faire de votre variable "results" un tableau multidimensionnel pour prendre en charge les données supplémentaires et vous devrez mettre à jour la boucle xml "find" actuelle qui remplit les résultats en conséquence. Le reste du code devrait rester le même que flot devrait être en mesure de tracer l'ensemble de données étendu. Je pense qu'un examen du flot example va vous aider. Bonne chance.