RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Use Transformations to Draw Your Own Great Graphs : Page 3

Use .NET to build your own graphing control that displays bar, line, and point data either on its own surface, in a printout, or in an image file.

Pretty Previews, Interesting Images
The GreatGraph control's DrawToGraphics method can draw on any Graphics object. The control's Paint event handler uses it to draw on the control's surface but it can use the same method to draw on a print preview or bitmap.

Figure 2. Print Preview: The DataSeries object can easily draw its data in a print preview.
Figure 2 shows a print preview dialog displaying three images produced by the GreatGraph control. The two in the upper left and at the bottom were drawn by the same control shown on the left in Figure 1. The drawing on the upper right was drawn by the second control in Figure 1.

To display the print preview shown in Figure 2, the main program uses a PrintDocument component added to its form at design time. Listing 1 shows the PrintDocument object's PrintPage event handler, which draws the graphs.

To draw the upper left graph, the code calls the GreatGraph1 control's DrawToGraphics method, passing in the Graphics object representing the print preview page and the device coordinate bounds where it should draw. The DrawToGraphics method draws the graph's data on the Graphics object just as it would draw on the control's surface. The PrintPage code then draws a blue border around the graph to make it look nice and delineate the drawing.

Next, the PrintPage code repeats the same steps, passing a different rectangle to draw the large graph at the bottom of the preview.

The code calls the GreatGraph2 control's DrawToGraphics method to make it draw the second graph in the preview's upper right corner. It finishes by setting e.HasMorePages to False to tell the PrintDocument not to draw any more pages.

This simple example draws only three graphs on a single page, but you could easily modify the code to add text and other items on the print preview. For example, you could fill the page with report text and add a graph at an appropriate location.

To draw a graph onto a bitmap you follow steps similar to those used to draw onto a print preview. When you open the example program's File menu and select the Save command, the program executes the following code, which creates a 600 x 600 pixel Bitmap object and a Graphics object to draw on it. It clears the Bitmap and calls the GreatGraph1 control's DrawToGraphics method, passing it the Bitmap's Graphics object and the Bitmap's bounds so the control draws its data on the Bitmap.

The code finishes by saving the Bitmap in a JPEG file:

   ' Save an image of the graph in a Bitmap.
   Private Sub mnuFileSave_Click(ByVal sender As System.Object, _
      ByVal e As System.EventArgs) Handles mnuFileSave.Click
      ' Make the Bitmap.
      Const BM_WID As Integer = 600
      Const BM_HGT As Integer = 600
      Using bm As New Bitmap(BM_WID, BM_HGT)
Figure 3. Drawing Graphs as Images: The GreatGraph control can draw its data into an image file, such as the JPG file shown here opened in Microsoft Paint.
' Make the control draw on the Bitmap. Using gr As Graphics = _ Graphics.FromImage(bm) gr.Clear(Color.White) GreatGraph1.DrawToGraphics( _ gr, 0, BM_WID - 1, 0, BM_HGT - 1) End Using ' Save the Bitmap. Dim file_name As String = _ Application.StartupPath If file_name.EndsWith("\bin\Debug") Then _ file_name = file_name.Substring( _ 0, file_name.Length - 10) If Not file_name.EndsWith("\") Then _ file_name &= "\" file_name &= "Graph.jpg" bm.Save(file_name, _ Imaging.ImageFormat.Jpeg) MessageBox.Show("Saved file " & file_name) End Using End Sub
Figure 3 shows the resulting JPEG file opened in Microsoft Paint.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date