Flot charts - ativar / desativar uma série
Estabeleci com sucesso meu gráfico de flot, com base emeste post anterior
Quero ativar o visualizador para mostrar / ocultar a série com um clique. Encontrei várias soluções, oficiais e outras, mas nenhuma funcionou para mim. Eu vou explicar:
Ativar / desativar séries oficiais: isso funciona, mas parece muito confuso, pois a lenda é eventualmente duplicada duas vezes (desaparece da lenda oficial quando a série é desativada).Hiddengraphs.js: este é um plug-in que pode ser encontrado no repositório de plug-ins, mas não funciona e interage bem com o Chrome (tentei mais de uma máquina, apenas não funciona).Esta solução é realmente muito bom (não me importo que não haja caixas de seleção para marcar), mas quando o integrei ao meu código, tudo o que consegui foi "pular" para o topo da página e nada acontece.Por fim, encontrei esta solução, que também funciona, apesar de usar outra biblioteca js, chamadaflot.togglelegend.js
. Nesta implementação, encontrei alguns grandes conflitos comflot.cust.js
, e não conseguiu que os dois trabalhassem juntos.Aqui está o meu js atual (escrito em coffeescript)
colorArray = []
colorArray.push "rgba(180, 0, 75, 0.6)"
colorArray.push "rgba(0, 150, 100, 0.6)"
colorArray.push "rgba(0, 0, 255, 0.6)"
colorArray.push "rgba(140, 0, 255, 0.6)"
colorArray.push "rgba(90, 180, 20, 0.6)"
colorArray.push "rgba(255, 236, 0, 0.6)"
colorArray.push "rgba(234, 170, 21, 0.6)"
colorArray.push "rgba(95, 180, 190, 0.6)"
colorArray.push "rgba(214, 92, 63, 0.6)"
colorArray.push "rgba(218, 106, 234, 0.6)"
colorArray.push "rgba(213, 128, 155, 0.6)"
# chart colors default
$chrt_border_color = "#efefef"
$chrt_grid_color = "#DDD"
$chrt_main = "#E24913"
# red
$chrt_second = "#6595b4"
# blue
$chrt_third = "#FF9F01"
# orange
$chrt_fourth = "#7e9d3a"
# green
$chrt_fifth = "#BD362F"
# dark red
$chrt_mono = "#000"
Chart =
generateDataObjects: (all_series, all_series_data) ->
plotData = []
for series, i in all_series
obj =
label: series.replace /__/g, "|"
data: all_series_data[i]
color: colorArray[i]
plotData.push obj
return plotData
togglePlot: (seriesIdx) ->
someData = plot.getData()
someData[seriesIdx].lines.show = not someData[seriesIdx].lines.show
plot.setData someData
plot.draw()
return
getTooltip: (label, xval, yval, flotItem) ->
return 'Build: <span>'+ flotItem.series.data[flotItem.dataIndex][6]+'</span>' +" | Run ID: <strong> #{flotItem.series.data[flotItem.dataIndex][7].toString()}</strong>" + '<br> Result: <span>'+Chart.commify(yval)+'</span>'
commify: (x) ->
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
generateChartOptions: (legend_container, ticks) ->
return (
series:
lines:
show: true
points:
show: true
crosshair:
mode: "x"
legend:
container: $("##{legend_container}")
labelFormatter: (label, series) ->
"<a href=\"javascript:void(0);\" onClick=\"Chart.togglePlot(" + series.idx + "); return false;\">" + label + "</a>"
noColumns: 4
# hideable: true
grid:
hoverable: true
clickable: true
tickColor: $chrt_border_color
borderWidth: 0
borderColor: $chrt_border_color
tooltip: true
tooltipOpts:
content : Chart.getTooltip
#content : "Value <b>$x</b> Value <span>$y</span>",
defaultTheme: false
xaxis:
ticks: ticks
rotateTicks: 30
selection:
mode: "xy"
)
jQuery ->
if $("#normalized_bw_chart").length # render only if the chart-id is present
raw_data = $("#normalized_bw_chart").data('results')
ticks = $("#normalized_bw_chart").data('ticks')
all_series = $("#normalized_bw_chart").data('series')
plot = $.plot($("#normalized_bw_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions('normalized_bw_legend', ticks))
if $("#concurrent_flows_chart").length # render only if the chart-id is present
raw_data = $("#concurrent_flows_chart").data('results')
ticks = $("#concurrent_flows_chart").data('ticks')
all_series = $("#concurrent_flows_chart").data('series')
plot = $.plot($("#concurrent_flows_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions('concurrent_flows_legend', ticks))
if $("#bandwidth_chart").length # render only if the chart-id is present
raw_data = $("#bandwidth_chart").data('results')
ticks = $("#bandwidth_chart").data('ticks')
all_series = $("#bandwidth_chart").data('series')
plot = $.plot($("#bandwidth_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions('bandwidth_legend', ticks))
$("[data-behavior~=chart-selection]").bind "plotselected", (event, ranges) ->
selected_chart = $(this).attr('id')[0...-6] # slicing the name of the selected item
console.log ("zooming in to " + selected_chart)
plot = $.plot($("##{selected_chart}_chart"), plot.getData(), $.extend(true, {}, Chart.generateChartOptions(selected_chart+'_legend', ticks),
xaxis:
min: ranges.xaxis.from
max: ranges.xaxis.to
yaxis:
min: ranges.yaxis.from
max: ranges.yaxis.to
))
return
$("[data-behavior~=chart-selection]").bind "dblclick", (event, pos, item) ->
selected_chart = $(this).attr('id')[0...-6] # slicing the name of the selected item
console.log ("zooming out to " + selected_chart)
plot = $.plot($("##{selected_chart}_chart"), plot.getData(), $.extend(true, {}, Chart.generateChartOptions(selected_chart+'_legend', ticks),
xaxis:
min: null
max: null
yaxis:
min: null
max: null
))
return
aqui está um violino:http://jsfiddle.net/danklein/0tn1uzs9/3/
Muito obrigado!