jqplot with custom tooltip

by bcorn

HTML

<link rel="stylesheet" href="http://www.jqplot.com/src/jquery.jqplot.min.css">
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.pointLabels.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.highlighter.js"></script>
<script src="&quot;https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.cursor.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/jquery.jqplot.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/jquery.jqplot.js"></script>

<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.dateAxisRenderer.js"></script>

<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.cursor.js"></script>

<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.highlighter.js"></script>

<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.categoryAxisRenderer.js"></script>

<script language="javascript" type="text/javascript"...

JavaScript

$(document).ready(function(){
  var line1=[['10/17/2013',21],['1/30/2014',3],['11/1/2013',12],['10/2/2013',3],['11/5/2013',18]];
     
       var line2=[['10/17/2013',41],['1/30/2014',33],['11/1/2013',12],['10/2/2013',63],['11/5/2013',18]];

  


  var chSeries = [{
        color: '#436277'
        }];

  var plot1 = $.jqplot('linegraph1', [line1,line2],{
      seriesDefaults: {
        lineWidth: 1,
         markerOptions: {
            show: true,             // wether to show data point markers.
            style: 'filledCircle',  // circle, diamond, square, filledCircle.
            size: 2            // size (diameter, edge length, etc.) of the marker.
        }},
        axes:{
          xaxis:{
            renderer:$.jqplot.DateAxisRenderer,
           
              tickOptions:{
                formatString:'%b&nbsp;%#d',
            showGridline: false
              }
          },
          yaxis:{min:0,numberTicks:25,
            tickOptions:{
                
            showGridline: false
              }
          }
        },
        legend :
        {
            "show" : true,
            location: 'se'
        },
        series : [
            {
                label : "line1",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Blue: %s <br/>custom tooltip<span></div>"}
               
            },
            {
                label : "line2",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Orange: %s <br/>custom tooltip<span></div>"},
                 
            }
        ],
       highlighter: {
          show: true,
           sizeAdjust: 25.5,
           tooltipLocation: 's'
        }
      });
      
      
 });