We Keep Coding

how to add a line by data received in real time in d3.js?

Before reading this question, you should know that I had asked a similar question, but by the advice of this community I was asked to do it again being a little more specific.
I have 7 sensors represented by a radio button each. in my real project I'm constantly receiving a web service, and I make filters for each sensor. the user is only interested in seeing the information by sensor. I am simulating the web service with a setinterval This is an example of the structure of the web service that I can receive. Do not worry about scale or values. the value 400 in the third data(data2) becomes a peak, is a dummy value for this test.
[{"id":"sensor1_ciclo1","sensor":1,"ciclo":"ciclo1","values":
[
{"voltaje":0,"corriente":11.175}
]
oData is the simulation of my webservice.. oData[0],oData1 and oData2
cont=0;
intervalo=setInterval(function(){
if(cont<=2){
reloadPoints(oData[cont]);
cont++;
}
},3000)
the "sensor" key represents the sensor number. I have 7 input radios to represent each sensor.the key "ciclo", is a property of the sensor. I can filter for this property. Although, in this case, all my data are using "ciclo": "ciclo1". In the line chart I draw the points using the keys "corriente" and "voltaje".
In my real project, I get the data according to a n amount of time, for this case I am simulating them with a setInterval of 3 seconds. I want to paint the data that corresponds to the selected sensor with an animation. if the sensor1 is selected, I only want to put the sensor1 data.
If I change sensor, I would like to see the data that has been accumulated, and this is the main function of my function reloadPoints the accumulated values are in oDataSensores. The display function is responsible for drawing the data, and if the limit is greater than 250 or -250 on the y-axis, the chart is rescaled.
I do not know how to fix it. The really strangest thing is that if I comment this line,
Array.prototype.push.apply(oDataSensores[data[i].id].content.values, data[i].values);
it apparently works. But I need to accumulate the values by sensor so I can not delete this line. How can I solve that?
To reproduce the error, wait 9 seconds, and when the third line in sensor1 is added and the chart is rescaled (>250), this problem occurs.
look the gif please.
I do not know how to fix it. The really strangest thing is that if I comment this line,
Array.prototype.push.apply(oDataSensores[data[i].id].content.values, data[i].values);
it apparently works. But I need to accumulate the values by sensor so I can not delete this line. How can I solve that?
that second time that I click on sensor 1, is not correct..
To reproduce the error, wait 9 seconds, and when the third line in sensor1 is added and the chart is rescaled (>250), this problem occurs.
so is the process that I want to achieve when a new point is added
This is my code:
http://plnkr.co/edit/z5It4hiOy3i7YOE5phnd?p=preview
so that you understand a little my project. I have 7 sensors. I will constantly be consuming a web service with the structure of my data. each time they are going to paint the lines for each sensor, according to the attribute "ciclo" (in this case all are "ciclo1"). while I am getting data and showing it in real time, I can change the sensor to display the data accumulated up to that point.

Omit ballon at specific value on AmCharts

I am creating a Step Line Chart with AmCharts v3.
Take a look at this chart for example.
(Apparently the community loves JSFiddle more than CodePen, but the later
handle ajax calls easier)
This chart represents the price of a product and how it changes among the time. It is possible that the product may be unavailable at a moment so its value is considered as zero.
I want to omit the balloon which displays the value on hover, only if the price is equal to zero.
I want to see if is possible to do it, but I couldn't find anything about it on the documentation.
EDIT:
I remembered something about gaps, I don't know how they work actually. But if I could set all moments when price = 0 as gaps, maybe that could be a workaround.

Highcharts error when add and shift data to hidden series

So there seems to be an error when dynamically adding data to a hidden series in Highcharts.
Say I have two series on a chart that both update on the same interval of time. Say also that I'd like to ensure that neither of the two series have more than a certain number of points, therefore leading me to use the optional shift boolean during a series.addPoint() operation.
The problem I run into is that, if one of the series is toggled and made invisible for some time, when re-toggling that series, much of the data that should've been shifted is still present.
I've made an example fiddle of this (just toggle data1 in the chart legend for a few seconds and then re-toggle)
http://jsfiddle.net/mmuelle4/c00cLfs5/ (change funcToTest to see how various fixes don't quite give the "shift" look)
I'm using the latest version at the time of this post (Highcharts JS v4.0.4).
I think what I've uncovered is still an error that will need to be addressed by Highcharts, but I figured I'd ask the question - is there a better way to perform series length checking and data adding/shifting for multiple series than in the linked fiddle that would get around this issue? I can think of some clunky ones off the top of my head, but I thought I'd come to SO for some elegance :)
Link to bug on Github (for tracking): https://github.com/highslide-software/highcharts.com/issues/3420

You can workaround this issue by managing shift on your own. Simply store in some array all points and shift them there. Then call series.setData(array_of_points,redraw,animation) instead of series.addPoint(points,redraw,animation, shift).
In short:
when series is hidden use series.setData()
when series is visible use series.addPoint() with shift-param set to true|false

Is there a way to get around 'setData' on a highcharts area chart?

I have a working highcharts area chart, I initialize it with almost no data in its series, just 4 series with one point each. Then I call:
function(output){
var chart = $('#mychart').highcharts();
chart.series[0].setData(output[0]);
chart.series[1].setData(output[1]);
chart.series[2].setData(output[2]);
chart.series[3].setData(output[3]);
}
That works perfectly fine. Later on, the data gets changed and I call that very same function again, and it works, but the problem lies in the amount of time it takes.
I set up logging to log the amount of time that this single function took. The first time it runs it takes about 140ms, the following times when it updates, it takes an average of 2 seconds.
Why does it take so long? Is there a way to speed this up or get around it?

Sorry to post this question, but I will leave this answer here for anyone who encounters the same problem:
The problem was the data I was using. In the first iteration, I was using a simple array:
[123,912]
The rest of the time, I was using an array of objects:
[{y: 123},{y: 912}]
For some reason, that equates to having a different load speed. From now on, if a fast performance is required, it seems you have to do your part to help highcharts. I hope this helps somebody else who comes across this problem.

ajax data - replacing html vs updating value attributes

An app I am working on has a 50 row x 100 col grid, where each cell is a div containing 1 textbox, with one outer div containing the entire grid to handle scrolling. Exact dimensions can vary, but that it a typical max size. So, that works out to about 5000 divs, each with its own textbox, for a total of 10,000 elements.
The contents of the grid need to be updated via ajax calls to load data for different periods.
My question is, which of these 2 approaches would be more efficient:
1) Have the ajax call return the full formatted HTML for the grid, and simply set the innerHtml of the containing div to the new contents.
2) Have ajax cal return JSON or similar, then use javascript/jquery to loop through and update the values of each grid cell in the existing divs. Might need to add or delete a few columns in this case, but number of rows will remain constant.
For smaller grids/tables, returning the complete html works great, and requires very little client JS code, but I have heard about performance issues when manipulating large numbers of DOM elements. With the huge number of attributes and properties associated with each element, I can see where it could add up to a lot of overhead to create/destroy 1000s of them. So, I thought I would ask for advise here before deciding which way to go on this. Thanks.

I've been through the very same situation. For tables of a certain size and complexity, it is much faster to render pregenerated HTML over and over again than to hunt for and update the data, but you wind up with a server communication lag to contend with.
The key here is "manipulate". If you're just painting the grid, it's not very costly in terms of time unless there are a lot of events that fire on complete, like event bindings and so forth. Even those aren't too bad. At some point, there is a diminishing return and single cell updates becomes more tolerable.
It really depends on what the users do with the grid. If they are updating many rows / cells, you might want a bulk update function for applying changes to multiple selected rows at once so they don't have to wait for each individual cell change to refresh. This was our solution for large tables as individual cell updates when making lots of changes were too time consuming and reloading the whole table from the server was not too bad if you're only doing it once per batch of updates.