Telemetry Chart

I created a very simple line plot for displaying my data using the JavaScript library Chart.js, it has less bells and whistles than a library like D3.js but it has proven to be very easy to use. Even so, I ended up taking a course to introduce myself to JavaScript; with CodeSchool and their JavaScript Road Trip. I liked the course format with video tutorials and code quizzes; I always learn better through doing (and breaking things) and their browser hosted code editor was well done.

I did have one notable issue with previous charts being cached and showing through when I would mouse over certain data points. Luckily this was a fairly well known issue and there was a simple solution, using the destroy() method.

chart.destroy();

I am still working on a few more controls, I've provided controls for entering specific start times and selecting the number of samples to display:

var start = document.getElementById("tbTime").value;

As you can see this is still a work in progress. Next thing I want to work on is a listview to select multiple data streams from the given table, connecting to (ftp) online data sources and updating my database automatically (differential updates) so I can collect data from different sources online. This may take me a while to complete (what with coding full time at work) but that's the plan.

You can see the completed code below:

And here is a screenshot of the completed single line plot, if the controls are empty it defaults to all data:

Simple time-based plot

Next on the agenda is to collect data from local and online resources (ftp); and then make the source user configurable as well as allowing them to select the stream.

So far I have the ftp request method running: