A Pen by allenyang.

flot-js-line-chart.markdown

flot js line chart

A Pen by allenyang on CodePen.

License.

index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/excanvas.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.stack.min.js"></script>

<div id="flot-placeholder"></div>

script.coffee

data1=for num in [1..50]
  [num,Math.floor(Math.random()*100)]

data2=for num in [1..50]
  [num,Math.floor(Math.random()*100)]

dataSet=[
    label:'line1'
    data: data1 
  ,
    label:'line2'
    data: data2 
]
console.dir dataSet
options=
  series:
    #堆疊
    stack:false
    lines:
      show:true
      fill:true
    points:
      radous:3
      show:true
  legend:
    backgroundOpacity:0.35
  grid:
    hoverable: true
    borderWidth:2
    backgroundColor:
      colors: ["#ffffff", "#cccccc"]
  shadowSize:5 
console.dir options

$.fn.UsetTooltip=()->
  $(this).bind 'plothover',(event,pos,item)->
  if item
      console.dir arguments
    return;

$(()->
  $.plot $("#flot-placeholder"), dataSet, options
  
  $(this).bind "plothover",(event, pos, item)-> 
    if item
      #console.dir item.series
      if $(this).data('previousPoint') != item.dataIndex || $(this).data('previousLabel') != item.series.label
        
        $(this).data('previousPoint',item.dataIndex)
        $(this).data('previousLabel',item.series.label)  
        #console.log "CHANGE"
        $(".tooltip").remove();
        
        x=item.datapoint[0]
        y=item.datapoint[1]
        color = item.series.color
        
        content="""
<strong>#{item.series.label}</strong><br/>
<strong>#{y}</strong>
"""
        showTooltip item.pageX,item.pageY,color,content
)

showTooltip=(x, y, color, contents)->
  console.log 'showTooltip:'+contents
  tooltip=$('<div class="tooltip">' + contents + '</div>')
  
  tooltip.css 
    'background-color':"#ff0000"
    position: 'absolute',
    display: 'none',
    top: y - 10
    left: x + 10
    border: '2px solid ' + color,
    padding: '3px',
    'font-size': '9px',
    'border-radius': '5px',
    'background-color': '#fff',
    'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
    opacity: 0.9
    
  tooltip.appendTo 'body'
  tooltip.fadeIn 'fast'

  console.log $(".tooltip").size()

style.scss

@import "compass";
#flot-placeholder{width:800px;height:200px;}