Using Flot Graphing with a Simple ASP.NET Web Form Application

I was asked to create a Web application of some sort that could display graphs. I did some research on the Internet and quickly discovered there are many, many, many different approaches.

One approach that seemed promising was to use a very simple ASP.NET Web Form application (in C#), running on IIS, together with the Flot graphing library (which uses JavaScript). See the image at the bottom of this post.

My most important design guideline when creating anything, is keep it as simple as possible. I was more or less constrained to using Microsoft technologies, otherwise, instead of using ASP.NET for the base page, I might have used PHP running on IIS (or possibly Apache), plus the Flot library.

Anyway, first I set up IIS, which was not entirely trivial. I wrote an earlier blog post on that task. Next, I launched Visual Studio, running in Administrator mode (required when making a new Web site), which also wasn’t completely trivial because I was using the mildly developer-hostile Windows 8.1 operating system.

Next, I created a new C# Empty Web Site. I find ASP.NET quite irritating in some situations. When creating a Web-Something, you can go File | New | Project | Visual C# | ASP.NET Web Application. Or, you can go File | New | Web Site | Visual C# | ASP.NET Empty Web Site. The two approaches yield entirely different systems and the differences are complex. They’re explained at Creating an Empty Web Site is the simplest approach. I named mine TestEmptyWebSite. (Note: File | New | Web Site | Visual C# | ASP.NET Web Forms Site requires a version of SQL Server — just freaking crazy.)



After the empty Web site was created, I right-clicked on the bolded Web site name in the Visual Studio Solution Explorer window, and selected Add | Add New Item | Web Form and accepted the default name of Default.aspx for the form.


In the Visual Studio editor window, I added a message and made sure my Web app / page could display.


To add graphing capability, I downloaded the Flot graphing library. It’s all JavaScript. I created a sub-directory named Include in the TestEmptyWebSite and then copied all the Flot files into the Include directory. I could have put the Flot files in a root directory so they’d be available to other Web applications.

Finally, I added some simple JavaScript code to test the Flot graphing with hard-coded data in an array. To read data from a text file or SQL database, I’d add some ADO.NET C# code, then transfer the data into a JavaScript array.


This entry was posted in Miscellaneous. Bookmark the permalink.