CODEWITHSUNDEEP
jquerydynamicflot
user1908522
user1908522

Reputation: 201

Binding dynamic data to multiple axis Flot Graph

I am working on Flot- dynamic data and multiple axis graph. Having issue with binding of data with Y2-axis, I am able to bind the data to the graph if it is a static graph but when I try to do the binding with dynamic data for some reason data is always binding to default y-axis only and second y-axis is not reflecting anything. Please adivse, how to resolve this problem. Here is my code below.

<div id="placeholder" style="width:600px;height:300px;"></div> 

<script type="text/javascript"> 

var xVal = 0; 

var inputdata = [[], []]; 

var options = { xaxes: [{}], 
yaxes: [{}, { show: 

true, position: "right"}] 
}


var plot = $.plot($("#placeholder"), [{ data: inputdata[0], label: "series 1" }, { data: inputdata[1], label: "series 2", yaxis: 2}], options); 


function getData() { 

// This could be an ajax call back. 

var yVal1 = Math.floor(Math.random() * 11); 

var yVal2 = Math.floor(Math.random() * 11); 

var datum1 = [xVal, yVal1]; 

var datum2 = [xVal, yVal2]; 
inputdata[0].push(datum1);

inputdata[1].push(datum2);


if (inputdata[0].length > 10) { 
inputdata[0] = inputdata[0].splice(1);

inputdata[1] = inputdata[1].splice(1);

}

xVal++;


//alert("inputdata :" + inputdata); 
plot.setData(inputdata);

plot.setupGrid();

plot.draw();


//alert("plot.getAxes() " + plot.getAx ); 
}

setInterval(getData, 1000);

</script>

Upvotes: 1

Views: 2332

Answers (1)

Ryley
Ryley

Reputation: 21226

When you first call flot, you are using the data of:

[{ data: inputdata[0], label: "series 1" }, 
 { data: inputdata[1], label: "series 2", yaxis: 2}
]

In your getData function, you produce data that is just arrays, no labels and no yaxis value. That will overwrite what you've specified for your 2nd data array. Instead, in your getData function, reproduce the whole series object:

function getData() {
   //your code here

   plot.setData(    [{ data: inputdata[0], label: "series 1" }, 
                     { data: inputdata[1], label: "series 2", yaxis: 2}
                    ] 
   );
   plot.setupGrid();
   plot.draw();
}

A working example here: http://jsfiddle.net/ryleyb/hqeGg/

Upvotes: 2

Related Questions