Flot Charts - handling multiple flots in a single

2019-03-01 05:16发布

站内问答 / JavaScript
625 1 5

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:

  1. I want to enable selection zooming + double click to reset the display

  2. 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!!

1条回答
放我归山
2楼-- · 2019-03-01 05:29

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)