Flot Charts - обработка нескольких лотов на одной странице html

Question

У меня есть дисплей, который я реализовал на одной диаграмме и увеличил решение, чтобы 3 диаграммы имели одинаковые свойства.

именно:

1. Я хочу, чтобы включить выбор зуммирование + двойной щелчок, чтобы сбросить дисплей на

2. Я хочу легенда серии будет кликабельна, так что серия будет включать/выключать с каждым щелчком. я успешно смог их реализовать на основе previous posts

Here's a fiddle with 3 chart in a single page

Вот мой исходный код (написанный в 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 

Что бы наиболее эффективный способ реализации этого (при попытке избежать дублирования кода)?

Спасибо!

Answer 1

Создать массив ваших графиков/диаграмм

plotNames = ["bandwidth", "normalized_bw", "concurrent_flows"] 

расширяющие вашу функцию togglePlot работать с одним участком

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 

и использовать JQuery каждую функцию для создания различных графиков и связать их события

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 

См. fiddle для получения полного кода.