Pathslider interact with an SVG graph

[rr20eid10]

HI Rob,

I haven't used d3.js but was looking at those, one in particular (sans quantity bars). You can see the "bubble" moving along the path with your mouse, but your pathslider is the customization I'm looking for (slider on a path) and yours can be used on touchscreens.

The behavior I'm looking requires that the data creating the pathslider is positioned on the line graph appropriately dynamically -- like how a line graph will show data. Is this a possibility for enhancement?

I'm probably asking for more complexity than you have time to do or even designed the pathslider to do. My apologies, but many, many thanks for the answers and demos you have already provided. :)

[Mottie]

Hi @rr20eid10!

I plan on adding a drawCanvas callback method which is called inside the drawCurve function. Inside the callback, you can add data or whatever to the canvas.

But after looking at that d3 graph, maybe it would be better if pathslider created an svg instead of drawing on the canvas.. Hmmm.

[rr20eid10]

That's a good idea and would be pretty cool, Rob. The Simple one was the one I was looking at before I found yours (sine only checked, others unchecked) , but I didn't like the vertical line attached to the "circle" on the curves. Many of those are line graphs, but none have a pathslider like yours. Grid lines could be optional (I only want horizontal). A tooltip above the knob would work, too, as a value-added, but that's another enhancement :)

[Mottie]

Ok, v1.0.0-alpha (LOL I just released I labeled the release as v1.0.0-beta) is now available.

A drawCanvas function was added (see docs).

As for adding a tooltip to the grip, you can use the create callback/event to target the grip (slider.$grip) and manipulate it.

I haven't made a plan yet to switch from using canvas to SVG... I'd like to do it, I just need time and to learn a little more about SVGs.

[rr20eid10]

Hi Rob,

Circling back to see if you've made any updates to the slider on a svg graph.

Quote from Mottie 8/19/2016:
But after looking at that d3 graph, maybe it would be better if pathslider created an svg instead of drawing on the canvas.. Hmmm.

To refresh, I need the slider to interact with the svg graph data, like a dynamically created Line Chart here. But instead of a line being displayed plotting the data on the chart, it would your Pathslider interacting with the x and y axis of the chart to show the plotting.

Both the chart and the slider have to interact together as one unit that is dynamically generated.

Thanks. I look forward to your reply.