Highlighting, Dragging, Cursor and Trend Line
5/23/08
5/24/08
5/25/08
5/26/08
$0.00
$1.00
$2.00
$3.00
$4.00
$5.00
$6.00
$7.00

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function () {
 
  $.jqplot.config.enablePlugins = true;
 
  s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08', 6]];
 
  plot1 = $.jqplot('chart1',[s1],{
     title: 'Highlighting, Dragging, Cursor and Trend Line',
     axes: {
         xaxis: {
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: {
                 formatString: '%#m/%#d/%y'
             },
             numberTicks: 4
         },
         yaxis: {
             tickOptions: {
                 formatString: '$%.2f'
             }
         }
     },
     highlighter: {
         sizeAdjust: 10,
         tooltipLocation: 'n',
         tooltipAxes: 'y',
         tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
         useAxesFormatters: false
     },
     cursor: {
         show: true
     }
  });
});

The charts on this page depend on the following files:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jqplot.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.dragable.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.trendline.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />