jqueryjqplot

Programmatically set the marker on a plot

I would like to know if it is possible to programmatically highlight the marker on a plot.

I have a line graph and a separate data grid.

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.

In the example below I can do the first requirement. $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) returns the data point which I can use to find the relevant data grid row.

But I'm stuck on the reverse.

In my example I have replaced the datagrid with a button for simplicity.

Is there a SetSelectedMarker or some similar method I don't know?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>jqPlot examples</title>   
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/excanvas.min.js"></script><![endif]-->
  <!-- jQuery runtime minified -->
  <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>

      <style type="text/css">        
   ul.tooltip
   {
    list-style-type:none;
    padding:0px;
    margin:0px;
   }        
      </style>

    <script class="include"  type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/jquery.jqplot.min.js"></script>
    <script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="js/jquery.jqplot.1.0.0r1095/dist/plugins/jqplot.highlighter.js"></script>

      <script type="text/javascript">
        // 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 < 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: '<div><ul class="tooltip"><li>%.4f</li><li>%.6f</li></ul></div>'
                    },
                    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 ***
          }

    </script>
</head>
<body>

<!--plot container-->
<div id="chartdiv" style="height:400px;width:600px; "></div>
<input id="button" type="button" value="click"/>

</body>
</html>
Solution

  • I have come up with some answer. I think @Mark might know a better option if he knows how to popup the highlighter. Since I know how to get appropriate position that you are after, just I am not sure how to call the highlighter then to paint at this coordinates.

    Here goes my answer.

    I am simply getting the coordinates of the grid in pixels. Then grabbing highlight canvas and painting a circle there, beforehand always calling replot() to have a fresh plot. Try using the button few times to see how it goes over every point of the data. If you know guys how to improve it, for example, how to avoid reploting each time, then please do let me know.