Small Charts

[User (Legacy)]

Is is possible to create small charts like thumnails? Smaller than 100px by 

100px and actually show something. When I try making the chart that small it 

shows nothing.

[Software FX]

The text sizes remain constant when you reduce the chart size.

You have several options here:

1) Try changing chart setting to something more "thumbnail-like" such as 

maybe no labels, no legend box, etc.

2) Draw the chart into a bitmap and then reduce that bitmap to a smaller 

size. You can use the Paint method for this.

-- 

Francisco Padron

www.chartfx.com

[User (Legacy)]

Nice example you have in the sample application

Challenge #2 - Creating a Representative Thumbnail Automatically

http://galapagos.softwarefx.com/documentation.aspx

As with any web page, sometimes there is not enough screen real estate to

display the charts as desired.  We experienced this in the case of the

animal pages as shown later in this section.  While we could have used a

scalable output such as a Metafile, we were not content with the way the

browser chose to display the charts after being resized.  In addition,

resizing in this fashion does not take advantage of features such as

anti-aliasing which conceals many of the artifacts introduced while resizing

such as jagged edges.

Furthermore, since the dimensions of these thumbnails will vary based on the

context, we needed to provide a way for a representative thumbnail to be

custom generated with the required dimensions.

To resolve this need, a function with the following signature was included

in the ChartConfiguration class.

      public static Image GetImageStream( GalapagosChartTypes chartnumber,

int width, int height )

This function allows us to specify the chart we desire along with the

desired dimensions and returns an Image[14].

Since we already have a centralized way to configure the charts, the

implementation of this function became somewhat trivial using the provided

.NET graphic libraries with the following code:

      01: public static Image GetImageStream( GalapagosChartTypes

chartnumber, int width, int height )

      02: {

      03:       //first configure the chart as it would be displayed on the

page.

      04:       Chart tempChart = new Chart();

      05:       tempChart.Width = 3 * width;     //make temporary chart

large to draw better

      06:       tempChart.Height = 3 * height;   //make temporary chart

large to draw better

      07:       ConfigureChart( chartnumber, tempChart );

      08:

      09:       //Setup a default border for the thumbnail charts

      10:       tempChart.BorderObject = new DefaultBorder(

BorderType.Color, Color.Black );

      11:

      12:       //now take a snapshot of this chart and place it in a memory

stream

      13:       MemoryStream temporaryStream = new MemoryStream();

      14:       tempChart.Export( FileFormat.Png, temporaryStream );

      15:

      16:       //now create a thumbnail of this chart based on the

requested size

      17:       Image chartImage = Bitmap.FromStream( temporaryStream );

      18:       Image finalImage = chartImage.GetThumbnailImage( width,

height, null, IntPtr.Zero );

      19:       chartImage.Dispose();

      20:

      21:       //return this final thumbnail image

      22:       return finalImage;

      23: }

With this function, we are able to produce thumbnails of any chart anywhere

throughout the application with the desired dimensions.

The only thing left to do is actually display the image on the browser.  To

do this, we need to use an HTML image tag (<img .>) wherever we would like

to place the chart.  Since the image is generated on the fly, the image

source must be a dynamic ASPX page.  We decided to call this page

DynamicChartImage.aspx and place it in the image folder of the application.

Notice, when we reference this page with an image tag we specify the desired

width & height the resultant image should be along with the chart ID we are

interested in generating via query string parameters.

      <img src="images/DynamicChartImage.aspx?ChartID=0&w=200&h=150"

border="0" />

Chart FX provides a method out of the box specifically for scenarios such as

these called GetHtmlData.  This method specifically allows for automatically

streaming a chart through the ASP.NET Response object.  It includes all the

plumbing necessary such as setting up mime-type, building the HTTP headers,

etc.

However, since this method is specifically used for regularly sized charts

and was not designed for scalable images, we decided to use one of Chart FX

more advanced features for exporting an image representation of the chart to

a memory stream with these lines:

      12:       //now take a snapshot of this chart and place it in a memory

stream

      13:       MemoryStream temporaryStream = new MemoryStream();

      14:       tempChart.Export( FileFormat.Png, temporaryStream );

//export a PNG

The Export method provides ample flexibility for various other scenarios

such as exporting a binary chart for storing in a database.

To properly deliver an image in this fashion, the DynamicChartImage.aspx

page should generate the proper HTTP headers informing the browser of the

imminent content to follow.  In this case, since Chart FX is exporting a

PNG[15] image, the dynamic image page must specify this by including the PNG

content type prior to sending the binary data down the response stream.

In the code below, we first inform the response object an image formatted as

a PNG will be delivered via the Response's ContentType property followed by

the actually image data.

      private void Page_Load(object sender, System.EventArgs e)

      {

                  // Obtain values from query string

                  int chartID = int.Parse(Request.QueryString["ChartID"]);

                  int width = int.Parse( Request.QueryString["w"] );

                  int height = int.Parse( Request.QueryString["h"] );

                  // Send propert mime/type

                  Response.ContentType = "image/png";

                  //get the chartImage

                  System.Drawing.Image chartImage =

ChartConfigurations.GetImageStream( (GalapagosChartTypes)chartID,

width,height );

                  //send the image to the response stream

                  chartImage.Save( Response.OutputStream,

System.Drawing.Imaging.ImageFormat.Jpeg );

      }

As you can see from one of the animal pages, we can easily generate any size

chart image matching the look & feel of the regular sized chart it

correspondingly represents.