Integrate Dundas Charts into an Iron Speed Designer page in several simple steps. For this example, I am using Iron Speed Designer Version 6.2, Dundas Charts ASP.NET VS2008 and Visual Studio 2008.
First create a web application. This allows us to grab the required .aspx code that is created when we drag and drop a Dundas Chart control onto the VS design surface. We will copy that code into our Iron Speed Designer application later.
Create a new ASP.NET web site application.
Make sure you are in Design mode.
Open your toolbox (View-Toolbox if not present). If you have installed Dundas Charts on your workstation, you should see groups present in the Toolbox. Navigate to the Dundas group, and expand it if necessary:
Drag and drop the Dundas Chart Enterprise entry onto the design surface. The Dundas Charts Wizard should now appear.
Select a simple column bar chart to start. Click the Next button to continue. There are a series of questions the wizard will ask as part of configuring the chart. Select Series Data from the menu on the left.
Click the Chart Data drop down and either select a data source or configure one.
I selected the Southwind database on SQL Server, and selected by Total Sales by Category view. See below for the T-SQL code I used to create this view.
Or you can substitute your own database.
Click Next and then Finish. Clicking the Preview Data button will return some rows of data:
This data is sufficient to produce a chart for this exercise. Click the Finish button, and you will be returned to the design surface in Visual Studio. Note the smart tag on the Dundas Chart control below. We will use this button to finish the configuration.
Click into the center of the chart to set the data series. Note the little square white bars on top of each bar. This tells us we have selected the correct area. Click the smart tag, and the following context menu will appear:
Click the Value Member X drop down and select CategoryName. Click the Value Member Y drop down. For some reason, this drop down did not display any fields for me, so I typed in ProductSales into the Value Member Y drop down box.
I closed the Chart editor and ran the report, which produced the following:
I did it! I created a chart using Dundas Charts! But we are not done yet, as we want to get this chart working in Iron Speed Designer.
I created a simple application in Iron Speed Designer V6.2, using the Southwind database in SQL Server. I selected a standard set of pages to create my view of “Total Sales by Category”. At this point, I could easily point an Iron Speed Designer button toward the .aspx page I built in Visual Studio. But it will really look great if I can embed my chart below my table of data, and then use the power of Iron Speed Designer to manipulate the chart.
Doing this requires a bit of work in HTML. Switch back to Visual Studio and select Source mode:
Once in Source mode, you can see the generated code for the chart below:
Highlight everything within the comments to the clipboard. Use right-click Copy, or Ctrl-C, your preference. Now switch back to Iron Speed Designer. Click into Design Mode on the Show Table page called ShowTotal_Sales_By_CategoryTable.aspx.
Now click the table icon in the Page Panel Wizard, and right click...
Select Blank Panel from the list:
I can insert a new panel either below or above the existing panel. I will insert mine below. Select a blank panel from the list and complete the wizard.
Select any cell in the new blank panel. Now click into the Cell Editor, and insert the copied .ASPX code from the Visual Studio page into this cell. Iron Speed Designer V6.X will save and use any embedded HTML that is put here.
I am almost there. One more step and then I can preview my results. Switch back to Visual Studio, and move to the top of the .aspx page. Note the register tag line below:
Highlight this line only and copy it into the clipboard. Now switch back to Iron Speed Designer and move to the top of the HTML page. Paste this line just after the DOCTYPE declaration line:
The last step is to copy the requisite Dundas Chart .DLL’s over to the bin directory in our Iron Speed Designer application. Navigate in Windows Explorer to the Dundas installation directory:
And copy DundasWebChart.dll to:
The last step is to copy my connection string from the web.config file of the sample application in Visual Studio over to the web.config in my application:
The web.config file for the Iron Speed Designer application does not have a connection string area therefore we need to copy the connection string and the XML element <connectionStrings>. Before the copy and paste operation, you will see:
And after...
Click the Save button to save our changes. Click the Live Preview button in Iron Speed to view the final result.
One of the things we may want to do is have the chart reflect any changes in the data as a result of filtering. To do that, we need to first retrieve the dataset from the Iron Speed Designer table and then set the data source in our Dundas Chart to it.
To make this work, use the Code Customization "Set Field Value When Another Field Changes". Modify the code generated by the customization wizard to suit. Change the Category Name filter from a drop down to a multiple selected list box. Review the application as a whole to see everything, but the main portion is shown below:
Pull all the selected values from the Category list box, and then construct a simple SQL where clause to filter the dataset. Dundas requires a dataview to be assigned as a DataSource.
Using Iron Speed Designer, I can modify the data source for Dundas Charts at runtime. Simply, copy and paste HTML directly inside a panel using the Iron Speed Designer Cell Editor. Surround the chart in adjacent cells with accompanying HTML, other Iron Speed Designer panels, or even another chart control depending on the project requirements. The combination of these two products is very powerful and I highly recommend them for your next charting project.
Download the sample application and database.
Miles Gibson
Consultant and Principal of Milestone Consulting
Miles is a senior consultant and principal of Milestone Consulting and has been providing his clients with the right solutions for over twenty three years. He was the first person to offer formal Iron Speed Designer training, and has been coaching and mentoring Iron Speed users for over three years. Miles is an Iron Speed MVP who loves to help clients finish their projects. He is an experienced data modeler who believes in strong database architecture.
Process
First create a web application. This allows us to grab the required .aspx code that is created when we drag and drop a Dundas Chart control onto the VS design surface. We will copy that code into our Iron Speed Designer application later.
Create a new ASP.NET web site application.
Make sure you are in Design mode.
Open your toolbox (View-Toolbox if not present). If you have installed Dundas Charts on your workstation, you should see groups present in the Toolbox. Navigate to the Dundas group, and expand it if necessary:
Drag and drop the Dundas Chart Enterprise entry onto the design surface. The Dundas Charts Wizard should now appear.
Select a simple column bar chart to start. Click the Next button to continue. There are a series of questions the wizard will ask as part of configuring the chart. Select Series Data from the menu on the left.
Click the Chart Data drop down and either select a data source or configure one.
I selected the Southwind database on SQL Server, and selected by Total Sales by Category view. See below for the T-SQL code I used to create this view.
| SELECTdbo.Categories.CategoryName, SUM(dbo.[Order Details Extended].ExtendedPrice) AS ProductSales FROMdbo.Categories INNER JOIN dbo.Products INNER JOIN dbo.Orders INNER JOIN dbo.[Order Details Extended] ON dbo.Orders.OrderID = dbo.[Order Details Extended].OrderID ON dbo.Products.ProductID = dbo.[Order Details Extended].ProductID ON dbo.Categories.CategoryID = dbo.Products.CategoryID GROUP BY dbo.Categories.CategoryName |
Or you can substitute your own database.
Click Next and then Finish. Clicking the Preview Data button will return some rows of data:
This data is sufficient to produce a chart for this exercise. Click the Finish button, and you will be returned to the design surface in Visual Studio. Note the smart tag on the Dundas Chart control below. We will use this button to finish the configuration.
Click into the center of the chart to set the data series. Note the little square white bars on top of each bar. This tells us we have selected the correct area. Click the smart tag, and the following context menu will appear:
Click the Value Member X drop down and select CategoryName. Click the Value Member Y drop down. For some reason, this drop down did not display any fields for me, so I typed in ProductSales into the Value Member Y drop down box.
I closed the Chart editor and ran the report, which produced the following:
I did it! I created a chart using Dundas Charts! But we are not done yet, as we want to get this chart working in Iron Speed Designer.
I created a simple application in Iron Speed Designer V6.2, using the Southwind database in SQL Server. I selected a standard set of pages to create my view of “Total Sales by Category”. At this point, I could easily point an Iron Speed Designer button toward the .aspx page I built in Visual Studio. But it will really look great if I can embed my chart below my table of data, and then use the power of Iron Speed Designer to manipulate the chart.
Doing this requires a bit of work in HTML. Switch back to Visual Studio and select Source mode:
Once in Source mode, you can see the generated code for the chart below:
Highlight everything within the comments to the clipboard. Use right-click Copy, or Ctrl-C, your preference. Now switch back to Iron Speed Designer. Click into Design Mode on the Show Table page called ShowTotal_Sales_By_CategoryTable.aspx.
Now click the table icon in the Page Panel Wizard, and right click...
Select Blank Panel from the list:
I can insert a new panel either below or above the existing panel. I will insert mine below. Select a blank panel from the list and complete the wizard.
Select any cell in the new blank panel. Now click into the Cell Editor, and insert the copied .ASPX code from the Visual Studio page into this cell. Iron Speed Designer V6.X will save and use any embedded HTML that is put here.
I am almost there. One more step and then I can preview my results. Switch back to Visual Studio, and move to the top of the .aspx page. Note the register tag line below:
Highlight this line only and copy it into the clipboard. Now switch back to Iron Speed Designer and move to the top of the HTML page. Paste this line just after the DOCTYPE declaration line:
The last step is to copy the requisite Dundas Chart .DLL’s over to the bin directory in our Iron Speed Designer application. Navigate in Windows Explorer to the Dundas installation directory:
And copy DundasWebChart.dll to:
The last step is to copy my connection string from the web.config file of the sample application in Visual Studio over to the web.config in my application:
The web.config file for the Iron Speed Designer application does not have a connection string area therefore we need to copy the connection string and the XML element <connectionStrings>. Before the copy and paste operation, you will see:
And after...
Click the Save button to save our changes. Click the Live Preview button in Iron Speed to view the final result.
One of the things we may want to do is have the chart reflect any changes in the data as a result of filtering. To do that, we need to first retrieve the dataset from the Iron Speed Designer table and then set the data source in our Dundas Chart to it.
To make this work, use the Code Customization "Set Field Value When Another Field Changes". Modify the code generated by the customization wizard to suit. Change the Category Name filter from a drop down to a multiple selected list box. Review the application as a whole to see everything, but the main portion is shown below:
Pull all the selected values from the Category list box, and then construct a simple SQL where clause to filter the dataset. Dundas requires a dataview to be assigned as a DataSource.
Conclusion
Using Iron Speed Designer, I can modify the data source for Dundas Charts at runtime. Simply, copy and paste HTML directly inside a panel using the Iron Speed Designer Cell Editor. Surround the chart in adjacent cells with accompanying HTML, other Iron Speed Designer panels, or even another chart control depending on the project requirements. The combination of these two products is very powerful and I highly recommend them for your next charting project.
Download the sample application and database.
About the Author
Miles Gibson
Consultant and Principal of Milestone Consulting
Miles is a senior consultant and principal of Milestone Consulting and has been providing his clients with the right solutions for over twenty three years. He was the first person to offer formal Iron Speed Designer training, and has been coaching and mentoring Iron Speed users for over three years. Miles is an Iron Speed MVP who loves to help clients finish their projects. He is an experienced data modeler who believes in strong database architecture.
Miles, great post! Thanks.
ReplyDelete