flot graph, use legend para activar/desactivar la serie

Question

Quiero ser capaz de usar la leyenda de un gráfico flot para activar/desactivar la serie de mi gráfico. Encontré los ejemplos en el sitio de flot y utilicé el Turning series on/off y Labelformatter de la API para construir lo que tengo ahora. Puedo poner casillas de verificación al lado de los elementos de leyenda y agregarles un evento de clic y sus incendios. Pero eso llama a la función de trazado de nuevo y restablece los valores de mi casilla de verificación. He incluido la función jquery completa, lo siento es un poco largo.

<script id="source"> 
var jsonPath = "JsonPriceHistory/" + getParameterByName("CardId") 



$(function() { 
    $.getJSON(jsonPath, function (results) { 

     results = [{ "label": "A", "data": [[1290115114240, 0.7000], [1289396258877, 0.7000], [1289394738247, 0.7000], [1288482602563, 0.7000], [1288479321830, 0.7000], [1288464257267, 0.7000], [1288463414413, 0.7000], [1268440264933, 1.0000], [1268434766653, 1.0000], [1268059707567, 1.0000], [1265934534340, 1.0000]] }, { "label": "B", "data": [[1290115102033, 6.0000], [1289395956947, 6.0000], [1289394743117, 6.0000], [1288482613967, 6.0000], [1288479332767, 6.0000], [1288464270420, 6.0000], [1288463427313, 6.0000], [1268440276413, 6.0000], [1268434778203, 6.0000], [1268059732683, 6.0000], [1265934545390, 6.0000]] }, { "label": "C", "data": [[1290115034640, 0.3000], [1289397347113, 0.3000], [1289396593083, 0.3000], [1289395047560, 0.3000], [1288484556080, 0.3000], [1288482794357, 0.3000], [1288465863503, 0.3000], [1288465248087, 0.3000], [1288464674300, 0.3000], [1268470601960, 0.6000], [1268469438957, 0.6000], [1268468281610, 0.6000], [1268440646800, 0.6000], [1265984810360, 0.8000], [1265955747730, 0.8000]] }, { "label": "C", "data": [[1290115031727, 0.1200], [1289397678960, 0.1200], [1289397337040, 0.1200], [1289396577510, 0.1200], [1289395024607, 0.1200], [1288484550417, 0.1200], [1288482780457, 0.1200], [1288465846327, 0.1200], [1288465231287, 0.1200], [1288464658213, 0.1200], [1268470586860, 0.2000], [1268469423697, 0.2000], [1268468266277, 0.2000], [1268440631390, 0.2000], [1265984774793, 0.2000], [1265955732580, 0.2000]] }, { "label": "D", "data": [[1290114958773, 0.0500], [1289397467207, 0.0500], [1289396747243, 0.0500], [1289395166640, 0.0500]] }, { "label": "E", "data": [[1290114933540, 0.6500], [1289397579447, 0.6500], [1289397242333, 0.6500], [1289396486657, 0.6500], [1289395003947, 0.6500], [1288484568590, 0.6500], [1288482784747, 0.6500], [1288465893750, 0.6500], [1288465278320, 0.6500], [1288464705170, 0.6500], [1268470629373, 0.6500], [1268469467810, 0.6500], [1268468309513, 0.6500], [1268440674610, 0.6500], [1265984889857, 0.6500], [1265955775453, 0.6500]] }, { "label": "F", "data": [[1290114885570, 0.1100], [1289396731507, 0.1100], [1289395170397, 0.1100]]}]; 

     var options = { 
      legend: { 
       show: true, 
       container: $("#overviewLegend"), 
       labelFormatter: function (label, series) { 
        var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label; 
        return cb; 
       } 
      }, 
      series: { 
       points: { show: true }, 
       lines: { show: true } 
      }, 
      grid: { hoverable: true }, 
      xaxis: { 
       mode: "time", 
       minTickSize: [1, "day"], 
       max: new Date().getTime() 
      }, 
      yaxis: { 
       mode: "money", 
       min: 0, 
       tickDecimals: 2, 
       tickFormatter: function (v, axis) { return "$" + v.toFixed(axis.tickDecimals) } 

      } 
     }; 

     var i = 0; 
     $.each(results, function (key, val) { 
      val.color = i; 
      ++i; 
     }); 

     var choiceContainer = $("#overviewLegend"); 

     function plotAccordingToChoices() { 
      var data = []; 
      alert('hi'); 

      choiceContainer.find("input:checked").each(function() { 
       var key = $(this).attr("name"); 
       if (key && results[key]) 
        data.push(results[key]); 
      }); 

      $.plot($("#placeholder"), results, options); 
      choiceContainer.find("input").click(plotAccordingToChoices); 
     } 



     var previousPoint = null; 
     $("#placeholder").bind("plothover", function (event, pos, item) { 
      $("#x").text(pos.x.toFixed(2)); 
      $("#y").text(pos.y.toFixed(2)); 

      if (item) { 
       if (previousPoint != item.datapoint) { 
        previousPoint = item.datapoint; 

        $("#tooltip").remove(); 
        var x = item.datapoint[0].toFixed(2), 
       y = item.datapoint[1].toFixed(2); 

        showTooltip(item.pageX, item.pageY, item.series.label + " $" + y); 
       } 
      } 
      else { 
       $("#tooltip").remove(); 
       previousPoint = null; 
      } 
     }); 

     function showTooltip(x, y, contents) { 
      $('<div id="tooltip">' + contents + '</div>').css({ 
       position: 'absolute', 
       display: 'none', 
       top: y + 5, 
       left: x + 15, 
       border: '1px solid #fdd', 
       padding: '2px', 
       'background-color': '#fee', 
       opacity: 0.80 
      }).appendTo("body").fadeIn(200); 
     } 

     plotAccordingToChoices(); 
    }) 



}); 

Answer 1

Hay un par de problemas con el código:

Los datos que está utilizando es en forma de una matriz, mientras que la presentada en la demo es un objeto. La distinción es importante aquí porque ha copiado su código, pero no ha cambiado el código para acomodar esto. Las líneas en cuestión son:

if (key && results[key]) 
    data.push(results[key]); 

dentro de la función plotAccordingToChoices(). results[key] en su caso no funcionaría porque key debería ser un valor numérico, pero key aquí es una cadena. La solución es reemplazar esto con un bucle, que busca a través de la matriz de la etiqueta correcta:

for (var i = 0; i < results.length; i++) { 
    if (results[i].label === key) { 
     data.push(results[i]); 
     return true; 
    } 
} 

A continuación, el problema es que usted está Reparcelación los mismos datos una y otra vez, con esta línea:

$.plot($("#placeholder"), results, options); 

results[] nunca cambia - usted debe utilizar data[] aquí en su lugar:

$.plot($("#placeholder"), data, options); 

Entonces, al contrario que en la demo, que ha decidido SetU p las casillas de verificación que utilizan la función formatlabel en la opción legend al trazar el gráfico. El problema con esto es que al volver a copiar el gráfico con datos nuevos que no contienen todos los resultados, las casillas de verificación de las líneas sin trazar no se mostrarán porque flot no trazará las etiquetas de las líneas que no existen.

Esto significa que tendrá que hacer lo que hace la demostración: crear las casillas de verificación por separado. Hacemos esto mediante la adición de las siguientes líneas en el bucle $.each que se utiliza para fijar los colores que utiliza cada línea:

l = val.label; 
var li = $('<li />').appendTo(choiceContainer); 

$('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked" />').appendTo(li); 
$('<label>', { 
    text: l, 
    'for': l 
}).appendTo(li); 

Esto creará una casilla de verificación - conjunto de etiquetas para cada conjunto de datos en la matriz results. Finalmente nos movemos la función para la unión plotAccordingToChoices a cada casilla fuera de la función, por lo que la unión sólo se produce una vez, para evitar que varios enlaces y el desorden resultante:

choiceContainer.find("input").change(plotAccordingToChoices); 

También nos cambiamos a utilizar el evento en lugar de changeclick porque change aquí es más apropiado.

Y, por último, como un bono, el ciclo que recorre la tabla leyenda y tirar de los colores de allí a añadir a la lista de casillas de verificación:

$('.legendColorBox > div').each(function(i){ 
    $(this).clone().prependTo(choiceContainer.find("li").eq(i)); 
}); 

También necesitamos un poco de CSS para que esto funcione:

#overviewLegend li > div { 
    display: inline-block; 
    margin-right: 4px; 
} 

ver el código de trabajo final en directo aquí: http://jsfiddle.net/yijiang/6FLsM/2/