StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAdding dynamic irregular data to area chart causes it to shift
text
Body
copied!<p>Background: We have intraday data that we display to a user in a highstock chart. We only want to show 'trading hours' from 8AM to 4:30PM on our chart, so we create static tickPositions on the chart (every 2 hours during those hours). We show the user either 2 or 5 days worth of data. We load the chart with all of the data up to the current date/time and it displays properly. </p> <p>Issue: We dynamically are adding data to the chart, but on charts that are not very active (don't have ticks every minute) when we add a point, the chart data shifts. I have captured this in a video:</p> <p><a href="http://screencast.com/t/gPbrtpHHGN" rel="nofollow">http://screencast.com/t/gPbrtpHHGN</a></p> <p>Do you know what would be causing this? On the xAxis, we set the min, max, and tickPositions. We also set plotLines for a 'divider' between days.</p> <p>I'm attaching a jsfiddle <a href="http://jsfiddle.net/jdrozd/t99Zk/" rel="nofollow">http://jsfiddle.net/jdrozd/t99Zk/</a> to show what is going on.</p> <p>If you click on 'Add Data (+1 minute)' it works fine (regular data interval).</p> <p>If you click on 'Add Data (+10 minute) - Wrong' it does not behave as expected (shifts graph).</p> <p>If you click on 'Add Data (+10 minute) - Right' it behaves as expected. To get this to work, I added 'null' data points to make the data 'regular'. I want to avoid having to do this. I would assume that positioning the ticks and adding the data, would allow the data to line up correctly.</p> <p>Here's the code to add the data inserting null values:</p> <pre><code>function addDataFixed (delay) { for(i=1; i<= delay;i++){ var val = null; var minutesToAdd = maxMinutes + i; if(i === delay){ val = getRandomArbitary(102.95,103.4); } var date = new Date(2013,1,11); date.setHours(14); date.setMinutes(minutesToAdd); var pointData = [date.getTime(),val]; chart.series[0].addPoint(pointData,false); } chart.redraw(); maxMinutes += delay; }; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload