Gráficos de Flot - lidando com vários flots em uma única página html
Eu tenho uma exibição que implementei em um único gráfico e pretendo estender a solução para que três gráficos tenham as mesmas propriedades.
especificamente:
Desejo ativar o zoom de seleção + clique duas vezes para redefinir a exibição
Quero que a legenda da série seja clicável para que a série seja ativada / desativada a cada clique. Consegui implementá-los com sucesso com base empostagens anteriores
Aqui está um violino com 3 gráficos em uma única página
Aqui está o meu código original (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]
# obj = (
# label: series
# console.log "pushing series #{series}"
# data: all_series_data[i]
# color: colorArray[i]
# console.log "pushing color #{color} to #{series} series"
# )
plotData.push obj
return plotData
togglePlot: (seriesIdx) ->
console.log "seriesIdx is: #{seriesIdx}"
someData = this.plot.getData()
someData[seriesIdx-2].lines.show = not someData[seriesIdx-2].lines.show
someData[seriesIdx-2].points.show = not someData[seriesIdx-2].points.show
this.plot.setData someData
this.plot.draw()
return
getTooltip: (label, xval, yval, flotItem) ->
return '<span class="label bg-color-teal txt-color-white">'+label+'</span>'+'<br>Build: <span>'+ flotItem.series.data[flotItem.dataIndex][2]+'</span>' +"<br>Run ID: <strong> #{flotItem.series.data[flotItem.dataIndex][3].toString()}</strong>" + '<br>Result: <span>'+Chart.commify(yval)+'</span>'
commify: (x) ->
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
generateChartOptions: (legend_container, ticks) ->
this.legendindex = 0
return (
series:
lines:
show: true
points:
show: true
crosshair:
mode: "x"
color: "#FF9900"
legend:
container: $("##{legend_container}")
labelFormatter: (label, series) ->
"<a href=\"javascript:void(0);\" class=\"legendtoggle\" data-index=\"" + Chart.legendindex++ + "\">" + label + "</a>"
# 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')
Chart.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')
Chart.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')
Chart.plot = $.plot($("#bandwidth_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions('bandwidth_legend', ticks))
$('body').on 'click', 'a.legendtoggle', (event) ->
Chart.togglePlot($(this).data('index'))
return false
$("[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
$("#normalized_bw_chart").bind "plotselected", (event, ranges) ->
# ranges.xaxis.to = ranges.xaxis.from + 0.0005 if ranges.xaxis.to - ranges.xaxis.from < 0.0005
# ranges.yaxis.to = ranges.yaxis.from + 0.0005 if ranges.yaxis.to - ranges.yaxis.from < 0.0005
plot = $.plot($("#normalized_bw_chart"), plot.getData(), $.extend(true, {}, Chart.generateChartOptions('normalized_bw_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
$("#normalized_bw_chart").bind "dblclick", (event, pos, item) ->
plot = $.plot($("#normalized_bw_chart"), plot.getData(), $.extend(true, {}, Chart.generateChartOptions('normalized_bw_legend', ticks),
xaxis:
min: null
max: null
yaxis:
min: null
max: null
))
return
Qual seria a maneira mais eficiente de implementar isso (enquanto tentava evitar a duplicação de código)?
Obrigado!!