Добавить еще одну серию к существующему графику с флотом

Мне нужно знать, как легко добавить еще одну серию к существующему графику с помощью Flot.

Вот как я сейчас рисую одну серию:

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
                }

            });

javascript jquery flot
person Mark Cheek    schedule 06.08.2010    source источник
comment
Не могли бы вы исправить отступ вашего кода? Очень трудно читать с пробелами и скобками повсюду.   -  person Scharrels    schedule 06.08.2010

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете просто добавить еще один набор результатов:

// 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
});
person Scharrels    schedule 06.08.2010
comment
Вы были правы насчет части results.push, используя нотацию JSON (я думаю, что это так). Я только что сделал массив результатов глобальным. Мой запрос возвращает данные только для одной серии за раз, но у меня получилось, спасибо! - person Mark Cheek; 06.08.2010

arrow_upward
0
arrow_downward

На высоком уровне результат вашего вызова itor_PerfQuery.pl необходимо будет расширить, чтобы включить дополнительные данные серии. Затем вы захотите сделать свою переменную «результаты» многомерным массивом для поддержки дополнительных данных, и вам нужно будет обновить текущий цикл поиска xml, который соответствующим образом заполняет результаты. Остальная часть кода должна остаться прежней, так как флот должен иметь возможность отображать расширенный набор данных. Я думаю, вам поможет обзор flot. . Удачи.

person Ben Griswold    schedule 06.08.2010