flot tooltips q

http://stackoverflow.com/q/25870691/312208

by danklein

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.flot.tooltip/0.7.1/jquery.flot.tooltip.min.js"></script>
<div id="concurrent_flows_chart"></div>

<div id="concurrent_flows_legend"></div>

CSS

#concurrent_flows_chart {
    width:100%;
    height:400px;
}

CoffeeScript

raw_data = [[0,371144,"20140206_000030-std",375],[1,373141,"20140328_230027",343],[2,374196,"20140401_230051",436],[3,374734,"20140401_230051_2",460],[4,374394,"20140401_230051_3",484],[5,376029,"20140401_230051_4",508]]
all_series = ["PLATFORM_A__CONFIG_B","PLATFORM_B__CONFIG_NONE",'long title 2','long title 3','long title 4','long title 5']
tick_labels = []
for series, i in all_series
    if i % 2
        tick_labels.push [i,series]
    else
        tick_labels.push [i,'']

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][0],all_series_data[i][1]]]
                color: colorArray[i]

            plotData.push obj
        return plotData
    
    generateChartOptions: (legend_container) ->
        return (
            series:
                lines:
                    show: true
                
                points:
                    show: true
            legend:
                container: $("##{legend_container}")
                labelFormatter: (label, series) ->
                    "<a...