It was time to throw an update on the ChartAPI for FusionCharts. The first package which was originally released was beta because of the lag of time for testing and because it was fairly incomplete. I managed to complete and include the single series charts completely into the download. There have been the doughnut and area charts missing. I also fixed some bugs on the pie charts and included a fifth example application just to show the area and doughnut charts. Head over the the ChartAPI blogpost and download the new package.

Since there is a need in the multi series charts which I need to implement for some sites, I hopefully will soon complete the ChartAPI with all the charts. Stay tuned and enjoy.

Here we go with the DarkBlog theme for the latest BlogEngine 1.4.5 version. In fact it’s not really a 1:1 portion of the theme. What I did, since I liked the colors and look, is to take the BlogEngine standard/default theme by Mad Kristensen and to update it to the colors of the DarkBlog theme adopted by RTur.net.

If you like it, then use it ;) Just unzip the content into your Themes directory of your BlogEngine installation.

DarkBlog.zip (6,18 kb)

Those of you who work with the Intelligencia UrlRewrite module may have encountered the following bug:

"Cannot use a leading .. to exit above the top directory"

I faced a similar problem and couldn't find any solution to fix this. In fact it seems most approaches head to the wrong direction. Here is a short list of what you should take care of

Replace the .. in links with ~/ so the following line

   1: <asp:HyperLink ID="HyperLink1" NavigateUrl="../MyTest.aspx" runat="server" />

should be replaced using:

   1: <asp:HyperLink ID="HyperLink1" NavigateUrl="~/MyTest.aspx" runat="server" />

Avoid placing Images in the asp:HyperLink Control. If you want the following:

   1: <asp:HyperLink ID="HyperLink1" NavigateUrl="http://www.dgrigoriadis.net" ImageUrl="~/Images/bild1.jpg" runat="server" />

just rewrite the code to:

   1: <asp:HyperLink ID="HyperLink2" NavigateUrl="http://www.dgrigoriadis.net" runat="server">

   2:     <asp:Image ID="Image1" ImageUrl="~/Images/bild1.jpg" runat="server" />

   3: </asp:HyperLink>

While I was trying to find a solution on the web I realized that most solutions didn't work for me and/or went a way which didn't even had to do with the actual problem. So I took the time to split down the entire page where the error occured and finally noticed that in my case the second solution above was the cause of the error message. I had a DataList on my site which retrieved the Image url from the database and a link to another site and so I put a HyperLink control on the ItemTemplate and filled the ImageUrl property. After rewriting that part with the solution above everything went right.

Sometimes big problems are resolved using the most easy way ;)

Hahaha, not really. The site www.codejdm.net went online on August 1st 2008 as I promised exactly 3 weeks before on the Superstreetonline website. A site that hopefully will unite the European clubs to one big community. I planned long before starting something like this, and I also planned long before using a ready to use CMS for the website. I was pending between LDU and some of the ASP.NET starter kits. After some time passed I decided that LDU is not really what I wanted to use not because it is developed with PHP and MySQL but because I started of thinking how it would be to use a starter kit and extend it myself. This would be an easy task in ASP.NET. Looking for the desired components like a gallery module and all those CMS stuff I could not really find a gallery module that works with the CMS available with ASP.NET. So I decided to write my own CMS.

I bet 98% of the people reading this article now roll with their eyes thinking "Oh fuck another idiot developing another CMS which will be the next 5 years beta. Aren't there already enough well working CMS?". Come on be honest. Maybe the words will vary but the essence of your thoughts is to 100% what I've written above.

And to answer your question yes it's necessary to develop my own CMS in ASP.NET and yes it was great fun and it was done in exactly 21 days. And the result can be viewed here at www.codejdm.net. And of course most of you will look for bugs, errors or things that doesn't work and I can understand that people try to make others work bad but that's ok for me. The only reason why I did do this CMS was to learn the single parts of a portal and I did and still do. The past three weeks were a learning process for me. I had to work on so many different parts that it was pure fun.

Here is a short list of what I did:

• custom membership provider for the user objects in my database
• custom role provider for the different roles in my application
• a forum allowing the usual functionality with administration
• a private messages module to allow users within this application to send messages
• a news section for writing news articles with thumbnails using FCKeditor for user input
• an articles section for writing articles for various article categories and assigning picture galleries
• an event section for allowing users to enter events and show them on the calendar (Control was taken from the ASP.NET Club starter kit )
• an user rides section where users can create a ride profile and enter a description and pictures for their rides. Other users can rate and comment those rides.

that was a short "features" list. Technical tricks like caching and other ASP.NET techniques are also used and a complete administration for all the points above was also created.

The good and bad thing is that I'm not finished. You are never finished with something which grows big. So I'm not.

I'm very proud of what I did and therefore I thought it would be cool to write these lines here to inform my regular two readers of this blog.

On June 22nd 2004 I launched my site G-Productions. This site provided mainly game programming stuff, the "famous" DirectX Devpak for Dev-Cpp and the PrinterDLL, a library which allows Lotus Notes to print in landscape mode. Soon the site established and I got a very high visitor-rate per day. The greatest thing for a developer is when people honor your work with a comment, an email or just with linking to your site.

I used LDU from http://www.neocrome.net/, an easy to install and easy to use CMS with many features. All I wanted was to give community something back (I know: same violin every day but really I wanted to help community).

I'm 32 years old and a programmer since the good old Amstrad CPC times (in other words for over 15 years now). What I never understood was the work of hackers. Skilled developers who prefer to destroy instead of create something. Who prefer to intrude instead of secure a network and so on...

And exactly that is the case why I don't understand why they still try to hack my sites. Especially the site G-Productions was hacked successfully more than once and only with security updates and a strict user validation things calmed down. Log files show that hackers still try to fuck my things up, but not only the G-Productions site. This blog was also hacked but the people at www.dotnetblogengine.net released very soon a fix for that.

Nevertheless I have to say a big thanks to all hackers who try to hack my sites.

Why this? Because I'm a professional software developer, and because of YOU (with you I talk to the hackers) I additionally secure the sites of my customers. Because of YOU I went more into the security stuff, no matter what is used (PHP, ASP, ASP.NET). Because of YOU I improved my skills in securing a website, a database application.... Because of YOU I install daily backups on web servers. Because of YOU I learned so much and use so much of my lately obtained knowledge.

So if you are a hacker and read this article please take a second to leave a comment. I would be very pleased about it, and never mind about the G-Productions site. Keep trying because of YOU my google hits got more than double as much as they have been before what puts more money in my pocket. Also thank you for that ;)

One of the greatest chart components I could find on the web is the FusionCharts free v2. This chart component contains 22 type of charts with all the features you could imagine a chart control component to have. The best thing on this chart component is that it is free for private and commercial use.

Another great thing on this component is that it is easy to implement. Easy also for ASP.NET applications which is an important fact.

Here are quick facts on FusionCharts free v2

• free for private and commercial use
• over 22 types of charts
• multi-platform support (ASP, PHP, JSP, ASP.NET, ColdFusion, Ruby on Rails)
• easy to use

While there are some good tutorials for ASP.NET which ships with the download of FusionCharts free and the documentation is more than good but I found it kind of unhandy for daily use so I decided to write my own API for this. The result is seen here on this post.

My intention was to provide a manager class which handles all the charts created for the current application without having to take much care on this. On the other hand to get fast and adequate results I also wrapped up all the chart types and provided methods and properties to build fast and easily charts needed for the desired application.

Features

At current the ChartAPI comes with the following features:

• support of single series charts including
  • Column 2D and 3D charts
  • Pie 2D and 3D charts
  • Line 2D charts
  • Bar 2D charts
  • Area 2D charts
  • Doughnut 2D charts
• full access to all chart properties via integrated methods
• easy integration and handling
• simplified data binding

Requirements

• .NET Framework 2.0 as minimum requirement
• ChartAPI available on this website
• FusionCharts free v2 available at InfoSoft Global

Getting started

If you don't have the FusionCharts free download it here. Then download the ChartAPI (link can be found at the bottom of this page).

If you didn't install the FusionCharts free package follow the steps as described here otherwise proceed to the next step.

1. Unpack the content of the FusionCharts package to a temporary folder
2. Open your web application in Visual Web Developer (here we will create an empty sample application). Follow the steps in this video or read the documentation of FusionCharts on how to integrate FusionCharts into your application.
3. Unpack the content of the ChartAPI into a temporary folder and the the dll to the Bin folder of your web application. Now you are ready to go

Creating your first chart

Creating the first chart is quite easy with ChartAPI. In this example we will create a column 2D chart. Let's take a look at the code needed to provide this chart:

   1: String xmlData = "";

   2:  

   3: ChartAPI.ChartColumn2D chart = new ChartAPI.ChartColumn2D("Column2D", "FusionCharts");

   4:  

   5: chart.Width = 800; chart.Height = 600;

   6: chart.SetTitles("This is our first column 2D chart", "We all love FusionCharts", "Month", "Salary");

   7: chart.SetNumberFormat("", "", false, true, ",", ".", 0);

   8:  

   9: xmlData = "";

  10: xmlData += "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>";

  11: xmlData += "<set name='Jan' value='462' color='AFD8F8' />";

  12: xmlData += "<set name='Feb' value='857' color='F6BD0F' />";

  13: xmlData += "<set name='Mar' value='671' color='8BBA00' />";

  14: xmlData += "<set name='Apr' value='494' color='FF8E46'/>";

  15: xmlData += "<set name='May' value='761' color='008E8E'/>";

  16: xmlData += "<set name='Jun' value='960' color='D64646'/>";

  17: xmlData += "<set name='Jul' value='629' color='8E468E'/>";

  18: xmlData += "<set name='Aug' value='622' color='588526'/>";

  19: xmlData += "<set name='Sep' value='376' color='B3AA00'/>";

  20: xmlData += "<set name='Oct' value='494' color='008ED6'/>";

  21: xmlData += "<set name='Nov' value='761' color='9D080D'/>";

  22: xmlData += "<set name='Dec' value='960' color='A186BE'/>";

  23: xmlData += "</graph>";

  24:  

  25: if (chart.CreateChartData(xmlData) == false)

  26:     Response.Write("could not load data");

  27: else

  28:     Response.Write(chart.RenderChart(true));

Cool isn't it? That's all you need. I think that's easy for everyone, and I think it has some advantages. The main advantage is with referencing your object you see directly what methods and properties you have. Only the properties you really set are taken for the final chart so you don't have to fuck with the reference of FusionCharts. Makes it quite easy.

Here is the sample program for this first tutorial

Binding to a data source

For this tutorial we will use our first tutorial as base again.

   1: ChartColumn2D chart = new ChartColumn2D("Column2D", "FusionCharts");

   2:  

   3: chart.Width = 800; chart.Height = 600;

   4: chart.SetTitles("This is our first column 2D chart", "We all love FusionCharts", "Company", "Salary");

   5: chart.SetNumberFormat("", "", false, true, ",", ".", 0);

   6:  

   7: if (chart.CreateChartData(ClassData.GetCompanySalaryData()) == false)

   8:     Response.Write("could not load data");

   9: else

  10:     Response.Write(chart.RenderChart(true));

Let's take a closer look at line 7. What we see here is that the method GetCompanySalaryData() from the class ClassData is called.

Here is the source code for this method:

   1: public static List<DataPair> GetCompanySalaryData()

   2: {        

   3:     OleDbCommand cmd = null;

   4:     OleDbDataReader dr = null;

   5:     List<DataPair> list = new List<DataPair>();

   6:  

   7:     Connect();

   8:  

   9:     cmd = new OleDbCommand("SELECT ID, CompanyName, Salary FROM tbl_Company", _conn);

  10:     cmd.CommandType = CommandType.Text;

  11:  

  12:     dr = cmd.ExecuteReader();

  13:  

  14:     while (dr.Read())

  15:     {

  16:         DataPair pair = new DataPair();

  17:         pair.name = (dr["CompanyName"] is DBNull) ? String.Empty : dr["CompanyName"].ToString();

  18:         pair.value = (dr["Salary"] is DBNull) ? 0 : Convert.ToInt32(dr["Salary"]);

  19:  

  20:         list.Add(pair);

  21:     }

  22:     dr.Close();

  23:  

  24:     Disconnect();

  25:  

  26:     return list;

  27: }

Take a look at line 5. A list of the object DataPair is created. This DataPair struct comes from the ChartAPI. Currently it has two properties as you see above. The property name and the property value. Of course the naming is not that good but it does its job. This DataPair struct will carry the data into your chart. In our loop we read the data from every single datarow and pass the complete list into the chart method CreateChartData(). That's all.

Using the chart manager

Let's take a look how to use the chart handler. The chart handler is an integrated manager class which simplifies the whole chart creation, data binding and rendering stuff. Here is a simple example. We are creating two charts and add them to the chart handler class:

   1: ChartColumn2D chart1 = new ChartColumn2D("firstChart", "FusionCharts");

   2: ChartColumn2D chart2 = new ChartColumn2D("secondChart", "FusionCharts");

   3:  

   4: chart1.Width = chart2.Width = 400;

   5: chart1.Height = chart2.Height = 300;

   6: chart1.SetTitles("This is our first chart", "We all love FusionCharts", "Company", "Salary");

   7: chart2.SetTitles("This is our second chart", "We all love FusionCharts", "Company", "Salary");

   8: chart1.CreateChartData(ClassData.GetCompanySalaryData());

   9: chart2.CreateChartData(ClassData.GetCompanySalaryData());

  10:  

  11: ChartHandler.CreateChart(chart1);

  12: ChartHandler.CreateChart(chart2);

  13:  

  14: Response.Write( ChartHandler.RenderChart( "firstChart", true ));

  15: Response.Write( ChartHandler.RenderChart("secondChart", true));

Now this is nothing important but let's continue to show how powerful this chart handler is. Here is the code:

   1: ChartHandler.CreateChart(new ChartColumn2D("firstChart", "FusionCharts"));

   2: ChartHandler.CreateChart(new ChartColumn2D("secondChart", "FusionCharts"));

   3:  

   4: ChartHandler.CreateChartData( "firstChart", ClassData.GetCompanySalaryData() );

   5: ChartHandler.CreateChartData( "secondChart", ClassData.GetCompanySalaryData() );

   6:  

   7: Response.Write( ChartHandler.RenderChart( "firstChart", true ));

   8: Response.Write( ChartHandler.RenderChart("secondChart", true));

This is really cool isn't it? We minimize the lines of code with a simple trick -> just taking advantage of C# language ;) What if we want to play with those values like set the titles and the size of the chart? Here is a more complete example:

   1: // create a basic column chart and add it to the chart handler

   2: ChartHandler.CreateChart(new ChartColumn2D("chart1", "FusionChart"));

   3:  

   4: // set some properties directly to the chart and set its data

   5: ChartHandler.GetChart("chart1").Width = 400;

   6: ChartHandler.GetChart("chart1").Height = 300;

   7: ChartHandler.GetChart("chart1").CreateChartData(ClassData.GetCompanySalaryData());

   8:  

   9: // now we want to modify or set some values like the titles:

  10: ChartColumn2D tempChart = (ChartColumn2D)ChartHandler.GetChart("chart1");

  11:  

  12: tempChart.SetTitles("Wonder if this works", "We all love FusionCharts API by DG", "Company", "Salary");

  13:  

  14: // after having finished write back the chart to the ChartHandler

  15: ChartHandler.SetChart("chart1", tempChart);

  16:  

  17: // finally render the chart

  18: Response.Write(ChartHandler.RenderChart("chart1", true));

Wow. What we did here is to use the methods GetChart and SetChart of the ChartHandler class. Since all the charts inherit from a BaseChart object the properties which are the same for all kind of charts can be set directly using the GetChart method. If we want to set more specific values like titles in the example above we just read the desired chart via GetChart into a temporary object, do what we want to do with it and write it back using SetChart.

Download the DGChartAPI

Download DGChartAPI with example applications here:

Here we go with a quickstart with FusionCharts free and ASP.NET. Assuming you are using Visual Web Developer I'll show you in 2 short steps how easy it is to integrate and use FusionCharts free in your web application.

1. Setting up your Visual Studio Web Developer

Open your web project or create a new empty project in Visual Web Developer. For this example we will create a new ASP.NET website like on the image on the right.

If you not already did then download the FusionCharts free v2 package from InfoSoft Global and extract it in a temporary folder or in a folder of your liking (the download link is at the bottom of this article).

Now back to your Visual Web Developer create a folder and name it FusionCharts (or something you like more). Right click on this folder and select "Add Existing Item". Browse to the extracted FusionCharts package and select all the swf files and a JavaScript file called FusionCharts.js which are in the Charts folder in the FusionCharts root directory.

After having added the flash files right click again in your solution explorer and select "Add reference" in the context menu. Switch to the Browse tab and navigate again to the extracted FusionCharts package. Now go through the following directories Code -> CSNET -> bin and select the file FusionCharts.dll. As you might have noticed, the Visual Web Developer created a directory called Bin and included the currently selected file in this directory.

Of course you could just select the Charts folder in your Windows Explorer and drag-and-drop it into your solution explorer. And of course you could do the same with the FusionCharts.dll file but we want to do it like it should be, so hopefully your solution explorer should look like the image on the right.

2. Creating your first chart

If you believe it or not that was the most difficult. Now we come to the easy part of this article. First of all we need data to display in the chart. For simplicity reasons we will take the Data.xml file from the FusionCharts examples. Add therefore the complete Data folder from the FusionCharts package ( should be under Code/CSNET/BasicExample/ ) and add it to your Visual Web Developer.

If you are done with this, open the file Default.aspx in your Visual Web Developer. Add in the head tag the JavaScript file (just drag and drop the file from the solution explorer to the head section of your Default.aspx).

Now here comes the magic. Just add the following line of code within code tags:

   1: 1: Response.Write(InfoSoftGlobal.FusionCharts.RenderChart("FusionCharts/FCF_Column3D.swf", "Data/Data.xml", "", "myFirst", "600", "300", false, false));

You might want to implement some error handling and to prove if flash is installed. You also want to improve your code. A good idea would be to include the following line of code on top of your aspx file:

   1: <%@ Import Namespace="InfoSoftGlobal" %>

I will also loose some words on the function call FusionCharts.RenderChart(....) without going deeper into this. First parameter as you guessed tells FusionCharts what chart type to take by passing the file. The second parameter tells FusionCharts about the data. You pass a xml file or pass here an empty string and then use the third parameter when building the xml data stream manually. The data stream has to meet the FusionCharts specification. For detailed info refer to the documentation included in the download package. The fourth parameter is the chartID, a unique id to define the chart in your application. After that comes the width and the height of the chart. The last two parameters tell FusionCharts if the debug mode should be used and if FusionCharts should register the chart with JavaScript.

That's all for now. A more detailed example ships with the FusionCharts free documentation. So this article here should give you only an overview of how easy FusionCharts is to use.

Try it out for yourself and enjoy...

Resources

• FusionCharts v2 free website
• download example application ChartIntegration.zip (444,83 kb)

A very common method to visualize data is the use of charts. This is also a cool method to enhance every website. While working on a extranet project for a financial company I was looking for a chart control component which is also usable in .NET.

After a bit of research on the www I found different controls which seem to be suitable for my needs. The main aspect of those where usability, flexibility, visualization and of course the price. At least three of those charting controls made it into my favorite list and so here we go with a comparison of the following components:

• Dundas Chart for .NET features
• .netCharting
• fusionCharts

Ok what exactly do we learn from this table? That all tested chart components are really cool, all of them are very easy to implement and thank god all of them are very easy to use. This is one of the most important things since a developer should not invest too much time when implementing a 3rd party component but should be able to use it "out-of-the-box".

After a bit of research and after working with all the evaluation copies of those components I found the following site FusionCharts free. Now this small last word is the most important reason why you should read this article until the end.

Without any further explanation here is the link to a direct comparison of both versions.

Cool isn't it? If you are ok with the features shipped with the free version go and get it. This is a really cool thing of the developers of FusionCharts. I highly recommend you to contribute sample code and or share tips and ideas with other developers on the forums because the developers give a piece of hard work for free and so we should give something back.

If you need more features then one of the above solutions should do a great job. It would be wrong to say that Dundas for example is better than the FusionCharts v3 component or that the .netCharting component is better than the Dundas component. All of the above three chart controls are really good so you should go and find out for yourself which one fits better for you, but if your budget is limited and you don't want to miss a powerful visualization feature of charts than you definitely should use the FusionCharts free component. It's worth.

Yippie the AJAX Control Toolkit for both .NET 3.5 and 2.0 was released. Some cool features made it into this release like visible=true/false property for tab control and many fixes were done. The 20229 release is now available on codeplex. Great work guys thank you very very much.