Three.js labels on x,y and z axis are misplaced

I am trying to plot a curve on a grid using three.js. I have followed this nice article on how to create a grid, add labels to it etc which you can see in this fiddle.

https://jsfiddle.net/3tw3dt1u/5/

Now here I have a couple of problems. First of all the labels are not displayed on proper place with grid axis. I believe its all about the x,y and z position of the text sprites but having very less knowledge of javascript or three.js I am unable to figure out the actual problem. I want to add labels with the axis and have them rotate with the grid when the grid is rotated just like it is happening in the article I am following.

Also, I am not sure how to plot the curve on the grid according to the value sin the realData array.

Any help in mimicking the example in bocoup.com article I mentioned above into my fiddle will be highly appreciated.