Flot Charts - 在单个 html 页面中处理多个 flot
I have a display I implemented to a single chart and wan to extend the solution so that 3 charts will have same properties.
specifically:
I want to enable selection zooming + double click to reset the display
I want the legend of the series will be clickable so that the series will turn on/off with each click. I was successfully able to implement them based on previous posts
Here's a fiddle with 3 chart in a single page
Here's my original code (written in 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
What would be the most efficient way to implement this (while trying to avoid code-duplication)?
Thanks!!
解决方案Create an array of your plots / charts
plotNames = ["bandwidth", "normalized_bw", "concurrent_flows"]
extend your togglePlot function to work with one plot
togglePlot: (plotName, seriesIdx) ->
someData = this.plot[plotName].getData()
someData[seriesIdx].points.show = not someData[seriesIdx].points.show
this.plot[plotName].setData someData
this.plot[plotName].draw()
return
and use an jQuery each function to create the different plots and bind their events
jQuery.each plotNames, (index, name) ->
if $("#"+name+"_chart").length
Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.generateDataObjects(all_series, raw_data), Chart.generateChartOptions(name+"_legend"))
$("#"+name+"_legend").on 'click', 'a.legendtoggle', (event) ->
Chart.togglePlot(name, $(this).data('index'))
return false
$("#"+name+"_chart").bind "plotselected", (event, ranges) ->
Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.plot[name].getData(), $.extend(true, {}, Chart.generateChartOptions(name+'_legend'),
xaxis:
min: ranges.xaxis.from
max: ranges.xaxis.to
yaxis:
min: ranges.yaxis.from
max: ranges.yaxis.to
))
return
$("#"+name+"_chart").bind "dblclick", (event, pos, item) ->
Chart.plot[name] = $.plot($("#"+name+"_chart"), Chart.plot[name].getData(), $.extend(true, {}, Chart.generateChartOptions(name+'_legend'),
xaxis:
min: null
max: null
yaxis:
min: null
max: null
))
return
See this fiddle for the full code.
相关文章