Charts with Asp.net 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 Asp.net 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: http://www.jqplot.com/ !
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.

asp_mvc_jqplot

[Tags]Asp.net, MVC, jQuery, jqPlot[/Tags]

Clean .Net program install package = ILMerge

I just had to post about this little tool ! I think all people who are busy in software development using .Net, should at least have a look at it ;).

What am I talking about, well, a small tool called ILMerge. It’s available from the research part of Microsoft. So what is it about ?

Best way to explain a tool is by giving an example : Imagine you have several .Net projects that, all of them, create separate dll’s ! This is not uncommon and you probably designed your projects this way, because they reflect some sort of internal business architecture… so no worries here. But on the other hand you probably also have some solutions that incorporate several projects, who have some kind of common link between them. So wouldn’t it be nice if you could get all those projects, that are linked one way or another, inside one dll instead of separated ones ?

Well with ILMerge you can accomplish this ! It will combine several input dll’s into one target dll or even better, combine an exe and several dll’s into just one exe ! Another example is to combine code dll’s together with their resource assemblies !

This procedure is of course only relevant for deployment of your software, so developers don’t have to perform this step and still can program with the complete original dll base ! But before packaging the software, it would be ideal to merge several dll’s to get a cleaner, smaller install package.

On a side note, I received a small update by Scott Guthrie, that there will be an ASPNet_Merge.exe MS Build task with the Visual Studio 2008 release !! But no ILMerge task yet…

Technorati tags: , , , , , ,

Football – stop saying soccer

Ok this post is going to be a bit odd… it involves soccer !!

Not that I’m that big of a fan of the game, although I played it myself for most of my current life, but this little thing just has me hooked.

There is a social network game online, called Hattrick and it is created around the most popular sport in the world soccer. The objective is quit straightforward : manage your own team !

The setup is simple, first you create a free account on Hattrick and after a day you get a team assigned ! You’ll be placed in a small competition and will be able to play against the other teams inside your competition.

Sounds easy and it is, but what strikes my is the level of detail you have at your disposal to manage all kinds of settings ! A small list of things to do :

  • Assign a coach
  • Choose training schemas
  • Hire other staff ( like a doctor )
  • Buy and sell players at a special eBay like trading place
  • Manage the players on the field, choose the right positions and follow their progress
  • Choose different setup formats for each league game
  • Expand your home stadium

And the list just goes on and on ! After reading this you’ll think it to be overwhelming and impossible to manage, but it really is just easy…

What I find even more extraordinary is the fact that everything just runs very smooth and seems to be programmed with the old ASP technology ! You can even follow the games in real time, through text messaging !

Damn I wish I could create something like that !!

Currently listening to: Stereo MC’sWe Belong in This World Together
Del.icio.us tags: , , ,

Attempting recognition

Why do firms, companies or other organisations create a website ? Most of them do not provided webbased services, so a direct ‘client – company’ connection can’t be made ! But still each and everyone of them would love to be ‘online’…

So why are they so eager to commit a part of there communication budget to the internet ? Well mainly to get a face, to get some recognition for the small part they ( could ) play in our day to day life !

Does it work ? Most of the time, I would think that it does… a good visual campaign helps people decide if they should apply their money to the companies service or trade ! I do most of my ‘window shopping’ online, so it makes a difference !

But it isn’t always easy to set up the correct architecture to have the rigth impact ! There is that ‘budget’ factor that has to be incorporated, it draws an invisible wall and sets the maximum reach.

Let me illustrate with a real life example, that involves my own little me 😉 !

I’m a proud member of the WingTsjun organistation, headquarters based in Germany, but with several schools around the world !
So assume you would be looking to have a go at this type of martial art, what would you do ? Well, a good guess would be to search the internet to find a school near to your own current location !

So you would most likely be expecting following thing :

  • A site for your own country ( if possible translated )
  • An overview of all schools ( sorted per region ) for the given country
  • A good information page of the current training hours and location
  • Overall information regarding the style, the teachers, the school infrastructure, etc…

But creating these items, involves manual labour, money and time ! Our current solution offers most of the expected items, but there is still room for improvement ( remember that invisible wall 😉 )…

We currently provide a specific translated site for each country, but they are not home based ! Meaning, not a domain URL for each country… let me be frank here, when I really want to find a website about some firm I need to locate, I use my country specific Google search engine !! So a country specific domain name would make sense !

But does this mean we don’t target the right people now ? No, that isn’t the problem… but the audiance could get bigger by changing some of the current architecture !
Does it mean we have a wrong architecture now ? No, we just have a different approach and use a central starting point, hereby creating a feeling of ‘one’ ! Coming out and saying, ‘we are a team’, not seperate groups…

So sometimes the corporate slogan could have an impact on the outline of the architectural design.

Currently it just fascinates me how I can look at the current end result and wonder why some choices were made and what could change… it just helps me decide for future projects !

Disable Theming and StyleSheet theme for one specific page in Asp.Net 2.0

I recently started using the new Theming features of asp.net 2.0 and I have to say it works like a charm !
Just putting one line inside the Web.Config file to enable a theme and change the look of the complete website is just fabulous…

But what to do when you want to disable everything for one page ? I searched the internet for a solution but found none ( maybe I didn’t look very good ? 😉 ) !

I know there are 2 page directives that help setting the themes, but to disable them I only found one !

<%@ Page Language="C#" Theme="OrangeTheme" StyleSheetTheme="GreenTheme" %>
<%@ Page Language="C#" EnableTheming="false" %>

But the EnableTheming will only effect the choosen theme and will not effect the StyleSheet theme !!

Even our friend the intellisence didn’t offer me any clues… When you type Theme=”, it will show you a list of available themes, so you can choose one from it.

So I was stuck and needed this feature for the default.aspx page of a small website I was building. But like many other solutions, this one also came by accident !

When I was trying every combination of theme and stylesheet, I just ( for the fun of it ) entered 2 empty string sequences, to see what the result would be… And tadaaaaa, what did I get, a default.aspx page ‘without a theme and stylesheet theme’ !!!

So people when you want NO theme and NO stylesheet theme just use following code :

<%@ Page Language="C#" Theme="" StyleSheetTheme="" %>