Telerik blogs

In the previous blog post, I outlined some criteria to keep in mind when deciding on whether to use a control suite or a reporting solution, as well as demonstrated a scenario where a control suite should be chosen. In this blog post, we will continue on the medical theme and demonstrate where a reporting solution should be used. In this case, when you have requirements for printing support and for offline information sharing.

A REPORTING SCENARIO – OFFLINE DATA SHARING

Going back to our example of medical monitoring from part 1, it is quite common that a patient has multiple doctors that interact with him or her. The ability to communicate patient information between doctors is very beneficial. Information sharing can lead to more accurate diagnoses, signal health issues, and identify problematic prescribed drug interactions. In this scenario, we would like the medical monitoring application to generate a PDF document of the medical readings over the last hour. With the report being in PDF format, it is ready for emailing to all of John Smith’s physicians.

clip_image002[8]
Figure 1 – A medical report ready for sharing

We will use Telerik Reporting in this case. If you haven’t installed it, go ahead and do so. To create a report, open Visual Studio, and simply add a new item to the project, and select the Reporting -> Telerik Report. This will create a report class.

clip_image004[8]
Figure 2 – Creating a new Telerik Report

Once the report is created, cancel out of the Wizard. Delete the page header and page footer sections of the report. Then, in the MedicalInfoRepository class, add a method to generate one hour of medical data as follows:

public List<MedicalInfo> GetPastHourOfData(DateTime start)

{

    //3600 seconds of readings

    List<MedicalInfo> retvalue = new List<MedicalInfo>();

 

    for (int i = 0; i < 3600; i++)

    {

        Random r = new Random(DateTime.Now.Millisecond);

        MedicalInfo toAdd = new MedicalInfo();

        toAdd.TimeOfMeasurement = start;

        start = start.AddSeconds(-1);

        toAdd.HeartRate = r.Next(60, 100);

        toAdd.SystolicBloodPressure = r.Next(110, 130);

        toAdd.DiastolicBloodPressure = r.Next(70, 85);

        retvalue.Add(toAdd);

    }

 

    return retvalue;

}

Figure 3 – Generating and hour of medical data

Build the project, so that this method is now available to us to use as a data source for our report. Drag and drop an instance of ObjectDataSource from the toolbox on to your report design surface. Then select the MedicalInfoRepository as the business object.

clip_image005[8]
Figure 4 – Selecting the repository as our ObjectDataSource business object

Click Next, then select the Choose data source member radio button and select GetPastHourOfData from the list below.

clip_image006[8]
Figure 5 – Selecting the GetPastHourOfData as the data member

For the next two steps in the wizard, set the data source parameter and design parameter to the expression =Now() . Once the wizard is finished, rename the object data source to medicalInfo.

Select the design surface of your report, and modify the PageSettings property. Set the Orientation to Landscape and set the margins to ¼ inch.

clip_image007[8]
Figure 6 – Setting PageSettings for the report

Using your mouse, extend the detail section width to 10.5 inches. Now we will create a graph showing the average heart rate of our patient over the last hour. Drag an instance of the Graph Wizard to the details section of the report. First select medicalInfo (the object data source) as the data source, then click next. We will want this graph to be a line chart. For categories, we will want to expand the TimeOfMeasurement field and select the Minute component, and drag that over to the Categories box. Next we want to drag the HeartRate field to the Values box and change the function applied from Sum to Avg, then click the Finish button.

clip_image009[8]
Figure 7 – Heart Rate graph fields

In the designer move the graph to the upper left corner and extend it the width of the report (10.5 inches), make the height around 2.5 inches. In the heart rate graph properties, drill into the CategoryGroups property. Change the sortings and label values as follows:

clip_image009[8]
Figure 8 – Heart Rate graph Category Group properties

With the graph still selected, enter the CoordinateSystem properties, and expand the XAxis item, set the label angle to 90 and set the title value to Time. Expand the YAxis item and set the Title property to Average Heart Rate. Again with the graph selected, enter the Titles collection, and change the graph title to Average Heart Rate for John Smith. Then in the Series collection, change the Legend value for the series to Heart Rate (adding a space between Heart and Rate). Save the report, then select the preview tab.

clip_image013[8]
Figure 9 – the Heart Rate graph

Drag another instance of the Graph Wizard to the design surface below the heart graph. This will be a graph showing us the blood pressure values of the patient. We will be using the same data source as before, but this time select the Column graph as the graph type. The categories field will again be the TimeOfMeasurement Minute component. For values, drag both the DiastolicBloodPressure and SystolicBloodPressure fields to the Values box. Change the function on both of these values to be Avg instead of Sum, just as you did in the Heart Rate chart.

clip_image015[8]
Figure 10 – setting up the blood pressure graph

Arrange the graph below the heart rate graph, make it the same dimensions, 10.5 inches wide, 2.5 inches high. In the CategoryGroups property of the graph, set the same properties as you did in Figure 8. Next access the CoordinateSystem collection of the graph, and in the XAxis, set the label angle to 90, and set the Title property to Time. In the YAxis, set the Title to mm Hg. In the Series collection for the graph, set the legend titles to Diastolic and Systolic. Finally in the Titles collection of the graph, set the graph title to Average Blood Pressure Readings for John Smith.

clip_image017[8]
Figure 11 – display of both the blood pressure and heart rate chart

I’ve added some additional formatting to the report so that it looks like what is shown in Figure 1. The final report is available in the source code download of this post.

INTEGRATING THE REPORT WITH OUR APPLICATION

Add a new form to your solution and name it HourlyReportDisplay. Set the width and height of the form to 1033 and 611 respectively. Set the form Text property to Hourly Report Display. Drag an instance of the Telerik ReportViewer control to the form, it should automatically fill the form. Select the ReportViewer control, set the ReportSource property to the Type of our Patient24HourReport.

clip_image018[8]
Figure 12 – Setting the report source for the viewer

Next implement the Load event of the form as follows:

private void HourlyReportDisplay_Load( object sender, EventArgs e)

{

    this .reportViewer1.RefreshReport();

    this .reportViewer1.ZoomPercent = 90;

}

Figure 13 – Hourly Report Display Form Load event handler

Save and close the HourlyReportDisplay form. Return to the Form1 design surface. To implement the showing of the ReportViewer form, I implemented the click event of one of the pictures of the form, I decided to use the History folder image. The click event of this picture is implemented as follows:

private void pictureBox2_Click( object sender, EventArgs e)

{

    HourlyReportDisplay reportForm = new HourlyReportDisplay ();

    reportForm.Show();

 

}

Figure 14 – Code for dsplaying the Hourly Report when the folder image is clicked

Save and run the application. Click the History image to display the report. The Save button on the ReportViewer toolbar will allow the doctor to save the hourly report as PDF, a nice offline format made for sharing. The doctor can then email the PDF document to any physician necessary.

clip_image020[8]
Figure 15 – The hourly report displayed from the WinForms application

CONCLUSION

Reporting and control suites are both very compelling data presentment solutions, each powerful in its own way. It is important to note that you are not limited to choosing one solution over the other, as you can see from this example, it is also quite common to use a mixture of both solutions in a project.

Another thing to keep in mind when deciding between a control suite or reporting solution for a feature is the development approach. By using a control suite, you are expected to have to write code to implement the look and behavior you desire, this approach also gives you more granular control over the outcome of the final project. Live data can be updated and presented using controls that support things like animations to make the application end-user experience more pleasurable and engaging. Using a control suite also gives you the ability to develop CRUD applications giving the user a way to add, delete and edit data.

Alternatively by using a reporting solution, development is a very visual activity. We didn’t write any code implementing the scenario in this blog post. Using Telerik Reporting also gives end-users the ability to create new reports or edit existing reports as they desire using the stand-alone Telerik Report Designer tool . Using a control suite also typically targets only one technology, be it Windows Forms, WPF, or ASP.Net. By implementing a reporting solution, you can implement the reports once, and use them in all those technologies

 

DOWNLOAD SOURCE

 

Telerik DevCraft Q2 2013 Webinar Week


About the Author

Carey Payette

Carey Payette is a Senior Software Engineer with Trillium Innovations (a Solliance partner), an ASPInsider, a Progress Ninja, a Microsoft Certified Trainer and a Microsoft Azure MVP. Her primary focus is cloud integration and deployment for the web, mobile, big data, AI, machine learning and IoT spaces. Always eager to learn, she regularly tinkers with various sensors, microcontrollers, programming languages and frameworks. Carey is also a wife and mom to three fabulous boys.

Comments

Comments are disabled in preview mode.