CODEWITHSUNDEEP
dygraphs
Justine
Justine

Reputation: 25

add additional data to legend Dypraphs

I saw this post about adding extra data into current data. Is there any way to show this additional data in the label/legend together with the numeric data?

Upvotes: 0

Views: 239

Answers (1)

Lucidio Vacas
Lucidio Vacas

Reputation: 720

Your code was wrong because you was trying to use the code from the other post in the same way without realizing the differences. Next time, try to debug a little more your code, doing some effort in looking for the failures.

You say that you get undefined when you plot auxiliary[x.idx]. If you simply do console.log(x), you will notice that x is the timestamp value, an integer, so you can´t obtain a correct index to look for in the array for the additional data.

If you see the dygraphs API, there is a function getRowForX(xVal) that you can use to find the row number corresponding to a x-value. So I have used that funcion in the value formatter to get the correct index to access the additional data in the array.

I have modified your code and I think it is working the way you need. Below you have the snippet jsfiddle. I hope this would be useful for you.

var auxiliary = [
			'ID1',
		  'ID2', 
      'ID3', 
		  'ID4',
      'ID5', 
      'ID6'
		];


new Dygraph(
document.getElementById("container"),
    [
        [new Date("2016/2/3"), [1,3,6], [4,4,4]],
        [new Date("2016/3/3"), [1,3,6], [3,3,3]],
        [new Date("2016/4/3"), [1,3,6], [1,1,1]],
        [new Date("2016/5/3"), [1,3,6], [2,2,2]],
        [new Date("2016/6/3"), [1,3,6], [6,6,6]],
        [new Date("2016/7/3"), [1,3,6], [5,5,5]]
    ],
{
    labels: [ "Date", "SD" , "Scatter"],
    showRangeSelector: true,
    customBars: true,
    drawPoints: true,
    series: {
        "SD" : {

        },
        "Scatter" : {
            customBars: false,
            strokeWidth: 0.0
        }
	},
    axes: {
        x: {
			valueFormatter: function() {
        index = this.getSelection();
				return auxiliary[index];
			}
		},
	includeZero: true
	}

}
);
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined-dev.js"></script>
<div id="container" style="width:600px; height:300px;"></div>

Upvotes: 1

Related Questions