All geek questions in one place

Programmatically set marker on plot

I would like to know if it is possible to select a marker on a chart programmatically.

I have a line graph and a separate data grid.

Clicking a marker in a line chart will highlight the corresponding row in the data grid, and clicking a line in the data grid will highlight the corresponding marker in the line chart.

In the example below, I can fulfill the first requirement. $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) returns a data point that I can use to find the corresponding row of the data grid.

But I'm stuck on the back.

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

Is there a SetSelectedMarker or some similar method that 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>

Thanks for any help

+2
source share
3 answers

I came up with some kind of answer. I think @Mark might know the best option if he knows how to pop up tokens. Since I know how to get the corresponding position that you are after, Iā€™m just not sure how to call a marker to draw in these coordinates.

Here is my answer.

I just get the grid coordinates in pixels. Then grab the canvas selection and draw a circle there, previously calling replot() to have a fresh plot. Try using the button several times to see how it passes through each data point. If you know how to improve it, for example, how to avoid re-sharing every time, then please let me know.

+5
source

you can simply implement the drawing function that is used in the selection plugin as shown here. Another option may be to change the plugin itself and create a new event or set the drawing function, etc.

The highlighted marker will change as soon as you hover over another marker in the line chart, but this can be expected.

It would be nice to show a tooltip when the marker is set to highlight.

 function DoSomeThing(plot) { var hl = plot.plugins.highlighter; var s = plot.series[0]; var smr = s.markerRenderer; var mr = hl.markerRenderer; mr.style = smr.style; mr.lineWidth = smr.lineWidth + hl.lineWidthAdjust; mr.size = smr.size + hl.sizeAdjust; var rgba = $.jqplot.getColorComponents(smr.color); var newrgb = [rgba[0], rgba[1], rgba[2]]; var alpha = (rgba[3] >= 0.6) ? rgba[3]*0.6 : rgba[3]*(2-rgba[3]); mr.color = 'rgba('+newrgb[0]+','+newrgb[1]+','+newrgb[2]+','+alpha+')'; mr.init(); mr.draw(s.gridData[3][0], s.gridData[3][1], hl.highlightCanvas._ctx); }
+1
source

If you want to change the color, try changing the parameter bar with the new colors of the series, because this function returns only the click point. But you have to manually change the color manually.

0
source

Source: https://habr.com/ru/post/1501458/

More articles:


All Articles