title: Programmatically set the marker on a plot
body: <p>I would like to know if it is possible to programmatically highlight the marker on a plot.</p>
  
  <p>I have a line graph and a separate data grid.</p>
  
  <p>Clicking a marker within the line chart will highlight the relevant row in the data grid, and clicking a row in the data grid will highlight the relevant marker in the line chart.</p>
  
  <p>In the example below I can do the first requirement. <code>$('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data)</code> returns the data point which I can use to find the relevant data grid row.</p>
  
  <p>But I'm stuck on the reverse.</p>
  
  <p>In my example I have replaced the datagrid with a button for simplicity.</p>
  
  <p>Is there a <code>SetSelectedMarker</code> or some similar method I don't know?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
     &lt;title&gt;jqPlot examples&lt;/title&gt;   
    &lt;!--[if lt IE 9]&gt;&lt;script language="javascript" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/excanvas.min.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
    &lt;!-- jQuery runtime minified --&gt;
    &lt;script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
        &lt;style type="text/css"&gt;        
     ul.tooltip
     {
      list-style-type:none;
      padding:0px;
      margin:0px;
     }        
        &lt;/style&gt;
  
      &lt;script class="include"  type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/jquery.jqplot.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.canvasTextRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.highlighter.js"&gt;&lt;/script&gt;
  
        &lt;script type="text/javascript"&gt;
          // We use a document ready jquery function.
            $(document).ready(function () {
  
                // Some simple loops to build up data arrays.
                var cosPoints = [];
                for (var i = 0; i &lt; 2 * Math.PI; i += 0.4) {
                    cosPoints.push([i, Math.cos(i)]);
                }
  
                var plot3 = $.jqplot('chartdiv', [cosPoints],
                  {
                      highlighter: {
                          show: true
                          , showTooltip: true
                          , tooltipLocation: 'ne'
                          , tooltipAxes: 'xy'
                          , useAxesFormatters: null
                          , formatString: '&lt;div&gt;&lt;ul class="tooltip"&gt;&lt;li&gt;%.4f&lt;/li&gt;&lt;li&gt;%.6f&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;'
                      },
                      title: 'Line Style Options',
                      // Series options are specified as an array of objects, one object
                      series: [
                        {
                            // Change our line width and use a diamond shaped marker.
                            lineWidth: 2,
                            color: 'red',
                            markerOptions: { style: 'dimaond', color: 'black' }
                        },
                        {
                            // Don't show a line, just show markers.
                            // Make the markers 7 pixels with an 'x' style
                            showLine: false,
                            markerOptions: { size: 7, style: "x" }
                        },
                        {
                            // Use (open) circlular markers.
                            markerOptions: { style: "circle" }
                        },
                        {
                            // Use a thicker, 5 pixel line and 10 pixel
                            // filled square markers.
                            lineWidth: 5,
                            markerOptions: { style: "filledSquare", size: 10 }
                        }
                    ]
                    , cursor: { show: true, showTooltip: true }
                  }
                );
  
  
                $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
                    alert(data);
                });
  
                $('#button').bind("click", function () {
                    DoSomeThing(plot3);
                });
            });
  
            function DoSomeThing(plot) {
               // *** highlight point in plot ***
            }
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!--plot container--&gt;
  &lt;div id="chartdiv" style="height:400px;width:600px; "&gt;&lt;/div&gt;
  &lt;input id="button" type="button" value="click"/&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>