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>