jqplot / examples / highlighter3.html

<!DOCTYPE html>

<html lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highlighter Test</title>
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>
  <!-- END: load jquery -->
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
  <!-- END: load jqplot -->

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

function editit(str, si, pi, plot) {
    return "<b><i>NHT: "+plot.targetId+', Series: '+si+', Point: '+pi+', '+str+"</b></i>";

      $.jqplot.config.enablePlugins = true;
   s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08',

    s2 = [3,5,7,4,8];
    s3 = [9,11,15,8,15];
    s4 = [8,7,12,18,4];
    s5 = [13,17,21,19,11];
    l1 = [];
    l2 = [];
    l3 = [];
    for (var i=0; i<100; i++) {

   plot1 = $.jqplot('chart1',[s1],{
       title: 'Highlighting',
       axes: {
           xaxis: {
               renderer: $.jqplot.DateAxisRenderer,
               tickOptions: {
                   formatString: '%b %#d, %Y'
               numberTicks: 4
           yaxis: {
               tickOptions: {
                   formatString: '$%.2f'
       highlighter: {
           sizeAdjust: 10,
           tooltipLocation: 'n',
           useAxesFormatters: false,
           formatString: 'Hello %s dayglow %d',
           tooltipContentEditor: editit
       cursor: {
           show: true,
           zoom: true

<?php include ""; ?>
<div id="chart1" class="plot" style="width:500px;height:300px;"></div>
<div id="chart2" class="plot" style="width:500px;height:300px;"></div>
<div id="chart3" class="plot" style="width:500px;height:300px;"></div>
<div id="chart4" class="plot" style="width:500px;height:300px;"></div>
<div id="chart5" class="plot" style="width:500px;height:300px;"></div>

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.