CODEWITHSUNDEEP
javascriptdygraphs
maikelm
maikelm

Reputation: 403

Dygraph setAnnotations with repeated x values

I am using Dygraph 2.0. I have a csv with repeated x values and when I call setAnnotations function with this x value drawing repeated annotation.

Example csv:

x,val1,val2,val3
0,1,1,3
1,2,3,5
1,3,3,3
2,4,5,5
3,1,2,2

When I set annotation on x = 1, dygraph draw 2 annotation. I need to known if exist any way that say to dygraph that drawing only one annotation

Upvotes: 1

Views: 524

Answers (1)

Lucidio Vacas
Lucidio Vacas

Reputation: 720

I am sure it is not the best option but right now it is the solution I have figured out and maybe it works for you

http://jsfiddle.net/wn43LLv7/1/

$(document).ready(function () {
    
var csv = [[0,1,1,2],[1,2,3,3],[1.0001,4,4,4],[2,2,2,2]];

     var g = new Dygraph(
        document.getElementById('graph'),
        csv,
        {
          labels: ['x', 'val1', 'val2', 'val3' ]
        }
      );
g.ready(function() {
    g.setAnnotations([
    {
      series: "val2",
      x: "1",
      shortText: "A"
    }
    ]);
  });
  })
.thinborder { border-width: 1px; border-spacing: 0px; border-style: solid; border-color: black; border-collapse: collapse; }

.thinborder td, #workarea #independent-series .thinborder th { border-width: 1px; padding: 5px; border-style: solid; border-color: black; }

.dygraph-annotation
{
      font-size: 14px;
    left: 217.5px;
    top: 79.1111px;
    width: 16px;
    height: 16px;
    position: absolute;
    background-color: red;
    border-color: rgb(64, 0, 128);
    color: white !important;
    padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://dygraphs.com/dygraph.js"></script>
<div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>

Upvotes: 3

Related Questions