Charts with MVC and jQuery through jqPlot

Asp.Net MVC is a great way to get dynamic data presented inside a web browser and thanks to the great integration of jQuery now in Visual Studio, we have many programming tools right at hand!

To show of the possibilities, I’ll give an example on how to get data from MVC into your client jQuery code. This example will also use jqPlot to draw a dynamical graph from the given data.

First up, you’ll need to download the jqPlot plugin for jQuery from the jqPlot site: !
I have to say, this graph plugin just looks stunning and is easy enough to use with much tweaking options!!
When this is done, create your MVC project inside Visual Studio.

To get jqPlot working in your MVC project, make sure to create a subfolder jqPlot inside your Scripts folder and copy all .js files from the jqPlot download inside this subfolder!
After that, just add following inside your Site.Master page to get the correct reference to your jqPlot plugin.

Small side note, when you need to edit js files inside Visual Studio and you like to have intellisense for jQuery, be sure to add following line on top of each js file!

Next thing you’ll need to do is add a new controller inside the Controllers section. Inside this controller we will have all calls needed to get a new webpage and also for retrieving data. You add a new controller by right clicking on the Controlles folder and selecting Add>Controller! Give it a meaningful name and click OK.( in this example GraphController.cs )

Add following code inside the controller, this will give us the new web page.

Add following code inside the controller, this will present a JSON data stream back to the client. This data stream represents all markers that will be used by the jqPlot graph to draw lines ( in this example. You can also draw bar or pie charts and many other )

The class used here is called GraphData, it’s created inside the Models section and only contains 2 properties.

Now that the code is in place, right click on the HearthRate() method and select Add View. This will create a new view inside the Views section.

Edit this newly added View ( this example Views>Graph>HearthRate.aspx ) and add following code inside the asp:Content tag! This div will be used by the jqPlot, it indicates where the graph needs to be visible.

The other line is a reference to a new js file that we need for processing the JSON data and presenting it correctly to the jqPlot plugin.

Now the only thing left to do is create the js file with all the jQuery code that will process the JSON stream and draw the line chart.

With all this in place, you can start up your website and browse to the http://localhost/Graph/HearthRate site. If everything goes well, you should get following image.


[Tags], MVC, jQuery, jqPlot[/Tags]

Polar ProTrainer 5 – Average speed readout

Now that I’m using my Polar RS800cx during my cycling tours, I’m of course am using the Polar ProTrainer 5 software to get nice overviews on the registered data!
It’s a great tool to keep track of your trainings.

But also with this software there are some things that are a bit awkward. One of them it the average speed readout. Let me show you through an example.

Recently I rode from the seashore back to my home, this trip would take up some 150km. So overall a long ride! During this I was using both my Trek speed sensor and my Polar RS800cx. When I got home, I uploaded the Polar data to my pc, to take a look at it in ProTrainer 5.

First thing I mostly do, is taking a look at the overall ride in the graph mode. This mode has all data plotted in a big line graph ( default setting ), like the heart rate, speed, cadence and temperature. It will also give you a good overview of all the totals underneath the graph, like total riding time, max and average speed and others… This overview pointed out that I rode an average speed of 25.3 km/h!
Just take a look at it here:
graph overview

But before you can see the actual graph overview, you first get a smaller window with also some detailed data already available! The weird thing here is that the given average speed here is only 23.7 km/h!
Just take a look at it here:
Small overview

So I was a bit confused on how this was possible! Because what is the actual average speed now? Through some calculations of my own, it seems that the average speed on the small overview is the correct one, because the total registered time is 6hours 30minutes and the total distance is 154.1 km. Using this, you would get the 23.7 km/h for an average speed!
So how would the 25.3 km/h be possible? This got me thinking and thanks to my Trek speed sensor I’m able to interpret this. Because my Trek sensor gave following data:
Total distance: 152.4 km ( ok slightly of but on such a distance, nothing to worry about )
Total time: 6hours 2minutes ( hey that is much less than on my Polar!! )
Average speed: 25 km/h ( look the 25 figure is comming back )

So we can have following conclusion: Polar does keep track of the average speed calculated on the total time, total distance basis, BUT it will also give you the actual riding average speed!! Meaning that the 25.3 km/h is the average speed while the speed sensor was registering data!! All the time I was standing still is omitted! ( like how other speed sensor, like the Trek, work! )
But because I didn’t pause on every occasion that we had to stop during the ride, my Polar has a longer total time registered! Resulting in the lower 23.7 km/h average speed given in the smaller overview.

To summarise, I actually don’t mind that these 2 readouts are available in the software! To be honest, I’m glad it gives this, but I don’t like the fact that there is no indication in the software that this data could be different and also any explanation is missing!!
The other thing that bothers me is that the graph data does indeed give me the average speed for the actual riding time, but doesn’t present my what the actual riding time was!! Very annoying.

[Tags]Polar, ProTrainer5, RS800cx, Cycling[/Tags]

Polar RS800cx PTE – IrDA problem

Only after a few usages ( I only have my Polar RS800cx for a few months ) my Polar IrDA usb device just stopped working.
Well actually, it didn’t stop… when I plugged it in the usb port, Windows detected it and the IrDA device started flashing red! But I couldn’t make any connection with other infra red devices, so also not with my Polar RS800cx! A real problem because my training sessions were filling up the memory on the watch!

I didn’t see any other option then to drive up to the Polar Service center here in Belgium. At the center they had the same ‘problem’ as I had and they just gave my a new usb device!
All is working well again now, but it worries me that the usb device just stopped working so fast. I hope it was just a bad unit, but looking at the Polar support forum, it seems I’m not the only one with IrDA problems!

For the record, I was also using the Black model with the grey tip and also got this model again as replacement.

[Tags]Polar, RS800cx, IrDA[/Tags]