Search code examples
dygraphs

Select drawed point in dygraphs

I'm drawing custom shapes with the drawPointCallback function in Dygraph. Works great, now I would like users to be able to select such a custom drawed shape. They are rectangular areas of contaminated areas, so it would be nice if the user can click on such an area and that it will light up for example.

Is there any way of doing this with Dygraphs? Currently there is only a point I can click in the upper left corner(which was the actual point). Although this works, it's not very intuitive.

Solution

  • The highlightCircleSize option controls how close a click must be to a point to trigger a pointClickCallback. This also controls how large the highlight circles are when you mouse over the chart but, since you're implementing your own drawPointCallback and drawHighlightPointCallback, you can override this behavior.

    g = new Dygraph(div, data, {
                  highlightCircleSize: 10,  // <-- 10px radius click target
                  pointClickCallback: function(e, pt) {
                    alert(JSON.stringify(pt));
                  },
                  drawPoints: true,
                  // Set these to draw whatever custom shape you like:
                  drawPointCallback: Dygraph.Circles.HEXAGON,
                  drawHighlightPointCallback: Dygraph.Circles.HEXAGON
                });

    Here's a snippet :

    g = new Dygraph(document.getElementById("graph"),
                 // For possible data formats, see http://dygraphs.com/data.html
                 // The x-values could also be dates, e.g. "2012/03/15"
                 "X,Y,Z\n" +
                 "1,0,3\n" +
                 "2,2,6\n" +
                 "3,4,8\n" +
                 "4,6,9\n" +
                 "5,8,9\n" +
                 "6,10,8\n" +
                 "7,12,6\n" +
                 "8,14,3\n",
                 {
                     // options go here. See http://dygraphs.com/options.html
                     legend: 'always',
                     animatedZooms: true,
                     title: 'dygraphs chart template',
                     highlightCircleSize: 10,
                     pointClickCallback: function(e, pt) {
                         alert(JSON.stringify(pt));
                     },
                     drawPoints: true,
                     drawPointCallback: Dygraph.Circles.HEXAGON,
                     drawHighlightPointCallback: Dygraph.Circles.HEXAGON
                 });
    /*
Relevant CSS classes include:

Labels on the X & Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2

Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label

The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/
.dygraph-title {
    color: gray;
}
    <script src="http://dygraphs.com/dygraph-dev.js"></script>
<div id="graph"></div>

    Click points to trigger an alert.