Does jquery.flot.dashes.js support plothover and plotclick?

Question

I have a workable tooltip system set-up with my normal graphing options (not using dashes) by using the plothover event, but the plot is not hoverable when I switch to my "black and white" mode (using dashes). Is there any way to keep the graph hoverable and clickable when using dashes? Or a way to make a decent looking plot in black and white without dashes?

Example series: {data: data, dashes:{show: true, dashLength: 2}, color: "black", label: "Series 1"}

My current graphing options:

options = {
      yaxis: {max: maxValue, min: minValue},
      grid: {hoverable: true, clickable: true},
      legend: {show: false},
      xaxis: {tickFormatter: null}
  };

I use plothover event for tooltips like this:

$(this).bind("plotclick", function (event, pos, item){ //tooltip code here }

Stopgap

Define "decent looking plot in black and white". You can change the colors flot uses, either per series or globally. – Ammonify

By "decent looking plot in black and white," I mean is there a way that I can make a black and white plot that you can distinguish multiple series from each other without using jquery.flot.dashes.js? I'll post pictures of color mode and black and white (dashed) mode. – Stopgap

Here is a fiddle using different shades of grey. Note that I did specify the colors globally. If there are more data series than colors, flot will generated additional colors by varying the defined colors. – Ammonify

Answer 1

See this issue filled against the jQuery.flot.dashes plugin.

Regarding the hover issue, there's a function called "findNearbyItem" in jquery.flot.js that performs the search only if the plot is showing lines, points or bars. If you only have "dashes" showing, then it won't perform the search.

Two choices:
- Modify the jquery.flot.js file in the following line: if (s.lines.show || s.points.show) to something like if (s.lines.show || s.points.show || s.dashes.show)
- Show points with 0 radius in the series you show dashes: (from the example in comment #41)
{ label: "sin(x)", data: d1, dashes: { show: true, steps:true }, points: {show: true, radius:0 }}

I agree with the poster that the second solution is a better idea. I've also tried it out in this fiddle and is works well.

Olgaolguin

Thank you! I tried what you did in the fiddle, and the hovering and clicking both work; however the radius of 0 creates a new problem with my project (highlighting points). I will create a new question if I cannot figure it out, as it is a different matter, and I will post a link on here if you would like to take a look. – Stopgap

I was able to make adjustments to the jquery.flot.js source code to account for the 0 radius with the drawPointHighlight method. Thank you for everything! – Stopgap

I was able to keep the hover effect by adding lines:{show: true, lineWidth: 0} and changing points to show false. I will test in windows firefox, and let you know the results of that as well. – Stopgap