Creating Charts Using DNM RAD 1.3 for DotNetNuke

By Ruben Gatt

August 2010

In this tutorial we show you how to create charts using the new DotNetMushroom RAD version 01.30.00.

The new version of DNM RAD provides a simple to use but advanced control to create charts in a DNM RAD application. We walk you through step by step how to create the source tables followed by a line chart, a bar chart and a pie chart.

Creating the Tables

Before we start to create the actual charts we first need to create the tables and fields from where the DotNetMushroom RAD control will get the data necessary to plot the charts.

In this example we will create a chart where we will compare the browsers popularity according to the www.w3schools.com website Click Here for the statistics page


From this data we will create the following table as shown in the screenshot below:


The table which we have named tbl_BrowserPopularity consists of 3 fields:

Month – Text field

Browser Name – Text field

Browser Popularity – Number (decimal_2)

After the above fields have been created we can now create 2 forms, one form will be used to view a list of the data and another form will be used to input the data into the newly created database table as shown in the screenshot below.

Creating a Line Chart

Now that we have sufficient data to plot on our charts we can start by creating a line chart.

Create a new form which named “frm_BrowserPopularity”. We do not need to select a data source for this form unless we are going to display any other data besides the chart.

Next click on the form Templates tab and now we are going to add a control to the Body Template. If you click on the Control Type dropdown you will notice that there is a new control called DNMCHARTS.


Add the new control to the Body Template and press the Save Template button.



Go back to the Properties tab where you should now see the newly created chart control. Click on the control to view its properties. Although it’s relatively easy to set-up a chart with a few clicks the control provides lots of advanced features and is very flexible and customisable.


Select the table we have previously created (tbl_BrowserPopularity) as the Data Source for the Control.

The next step is to select Browser_Name as the Data Text Field and Browser_Popularity as the Data Value Field.

For this example we are only interested in the statistics that correspond to the month of May so in the Data Filter field we use the column name of the month field which is Month in order to filter the data for May i.e Month = ‘May’


Now enter a UNIQUE Chart ID in the Chart ID field under the Charts Data section and give the chart a title e.g. Browser Popularity.


Finally press the Save button. If we add a new DNM RAD module to our page and select the frm_BrowserPopularity form we should now see our Line Chart.


So the above chart only shows the data for the month of May but what if we want to show the data of the month of April along with the data of the month of May, we only need to modify two fields within the chart’s properties.

First go to the form frm_BrowserPopularity and access the properties of the chart control you have created.

Next change the properties of the control under the Drop Down Data tab to look exactly like the screenshot below.


Basically we removed the Data Filter as we want to show the data of the month of May and April since we only have those records in the database. In case we have other months in our database we would modify the Data Filter as follows:
Then we use a Data Group in order for the control to know by which column to Group the data. This will allow the chart to show either multiple lines in case a Line Chart is used or multiple bars in case a Bar Chart is used.

For this example the column Month will be used to group the data by month.

Press the Save button to save the properties of the control and then refresh the page where the chart is being displayed to reload the data.

Creating a Bar Chart

We will now use the previous chart to create a bar chart. The steps to create a bar chart are exactly the same as the steps we followed to create a line chart, the only difference being is that the Chart Type needs to be set to Bar Chart instead of Line Chart.


After the Chart Type is set press the Save button to save the chart properties.

Once we have saved the properties of the chart we can refresh the page and you should now see a bar chart instead of a line chart representing the same information using the same data we inputted in the table tbl_BrowserPopularity.


If the chart bars are too near each other modify the width of the chart as shown in the screenshot below.


You can also modify the width of the bars from within the Bar Chart tab.

Creating a Pie Chart

The steps to create a line chart, a bar chart and a pie chart are practically the same but the difference is that a pie chart’s data cannot be represented the same way as a line and bar chart.

In fact the Data Group field is obsolete when creating a pie chart as the data generated will not be correct for use with a pie chart, and we have to use a Data Filter in some cases in order to get only the required and correct data.

So we modify the previous chart so that the Chart Type is now set to Pie Chart.


Next we need to modify the drop down data properties as follows, so that only data for the month of May is loaded:



Finally press the Save button to save the control properties and refresh the page. The chart should look similar to the chart in the screenshot below.

If you have any problems working with the DNM RAD module you can visit the DotNetMushroom Forums.

Comments