ChartDirector Ver 4.1 (C++ Edition)

Using ChartDirector with MFC


This section describes how to use ChartDirector in Windows programs using MFC.

Even if you are not using MFC, it would be useful to try the MFC sample code that comes with ChartDirector. They can act as references on using ChartDirector in other GUI frameworks. The next section Using ChartDirector with Other GUI Frameworks will contain more details on how to use ChartDirector with other GUI frameworks.

MFC Sample Programs

ChartDirector comes with a number of MFC sample programs in the "ChartDirector/mfcdemo" subdirectory. If you are using Visual Studio, you may open the workplace file "mfcdemo.dsw", and it will open the workplace with the sample projects.

Project NameDescription
helloworldThe "Hello World" example of using ChartDirector with MFC. This is a basic MFC project displaying a simple bar chart.
mfcdemoThe main MFC sample program, containing a chart browser for browsing over 100 sample charts.
financedemoAn interactive financial chart will comprehensive technical indicators support.
realtimedemoA sample program to demonstrate a real time chart that updates itself once 250 ms to 2 sec.
zoomscrolldemoA sample program to demonstrate a zoomable and scrollable chart.
zoomscrolldemo2Another sample program to demonstrate how to create a zoomable and scrollable chart.

For compatibility with older versions of Visual Studio, the workplace file is in Visual Studio 6.0 format. If you are using later versions of Visual Studio, it will prompt you to upgrade the workplace. You may press "Yes to All" to upgrade all files.

To try a sample program, simply set the corresponding project as the active project, then compile and run the program.

It is recommended you start with the helloworld project and then the mfcdemo project. The mfcdemo project contains over 100 sample charts illustrating various chart types and how to use ChartDirector in general. The charts are from simple to sophisticated, and are designed for use as tutorials.

Note: For the realtimedemo, zoomscrolldemo and zoomscrolldemo2 sample programs, if you are using a slow computer, it is recommended you try the programs in "Release" mode and run it using "Start without Debugging" (or using "Execute" in earlier versions of Visual Studio). It is because for graphics programs, using "Debug" mode or running with debugging may slow down the program by up to 90% (thus a 1GHz computer will look like a 100MHz computer). This may affect the smoothness of the GUI for charts that needs to update at a fast rate.

The CChartViewer MFC Control

All ChartDirector MFC sample programs uses the CChartViewer control to display charts and handle mouse interactions. The CChartViewer is a derived class of the MFC CStatic control. It is released in source code format in the MFC sample programs.

To use CChartViewer in your own project:

Displaying Charts On Screen

To display a chart using the CChartViewer, only one line of code is needed:

     //ChartViewer1 is a CChartViewer control, c is a BaseChart pointer
     ChartViewer1->setChart(c);

Handling Hot Spots Mouse Interactions

Hot spots are special regions in on the chart that are usually used to represent chart objects, such as data representation objects (sectors for pie chart, bars for bar charts, etc). One can display tool tips when the mouse is over the hot spots, and/or to make the hot spots clickable with mouse cursor feedback.

In ChartDirector, hot spots for the charts are defined using standard HTML image maps (text strings containing HTML tags). The BaseChart.getHTMLImageMap method can be used to generate image maps automatically for a chart. To set the image map to the CChartViewer control, one may use:

     ChartViewer1->setImageMap(myImageMap);

After setting the image map, the CChartViewer control will display the tool tips defined in the image map when the mouse is over the hot spots It will also change the mouse cursor into a "hand" shape for clickable hot spots.

When the mouse clicks on the CChartViewer control, a BN_CLICK will be sent to the parent container. The parent container may handle this message and use the ImageMapHandler to determine if the mouse has clicked on a hot spot or just a blank point.

The MFC documentation contains the details on how to handle BN_CLICK messages. In brief, the steps are:

Handling View Port Interactions

A view port can be imagined as a window to an underlying surface. For example, a data series with 10 years of data can be imagined as a long surface. If only 1 year of data is displayed, we may consider this as the view port showing 10% of the underlying surface.

Scrolling can be handled as moving the view port, while zooming in and out can be handled as changing the view port size.

CChartViewer may change the view port during "drag to zoom", "click to zoom" or "drag to scroll" mouse actions (see CChartViewer.setMouseUsage). When CChartViewer changes the view port, it will send a CVN_ViewPortChanged custom control notification message to its parent container. The parent may handle this message and redraw the chart to reflect the updated view port.

The CChartViewer control also allows external code or controls (such as scroll bars, slide bars, calendar controls, etc) to change the view port and trigger the CVN_ViewPortChanged message. You may refer to Zoomable and Scrollable Charts for more information.

The MFC documentation contains the details on how to handle the custom control notification messages. In brief, the steps are:

Printing Charts On Paper

ChartDirector can output charts in BMP or DIB (Device Independent Bitmap) format. The easiest method to print the chart is to blit the DIB directly to the printer device context. For example:

    // Output the chart as BMP
    MemBlock bmp = c->makeChart(Chart::BMP);

    // The BITMAPINFOHEADER is 14 bytes offset from the beginning
    LPBITMAPINFO header = (LPBITMAPINFO)(bmp.data + 14);

    // The bitmap data
    LPBYTE bitData = (LPBYTE)(bmp.data) +
        ((LPBITMAPFILEHEADER)(bmp.data))->bfOffBits;

    // The scaling factor to adjust for printer resolution
    // (pDC = CDC pointer representing the printer device context)
    double xScaleFactor = pDC->GetDeviceCaps(LOGPIXELSX) / 96.0;
    double yScaleFactor = pDC->GetDeviceCaps(LOGPIXELSY) / 96.0;

    // Output to device context
    StretchDIBits(pDC->m_hDC,
                  (int)(40 * xScaleFactor),
                  (int)(40 * yScaleFactor),
                  (int)(header->bmiHeader.biWidth * xScaleFactor),
                  (int)(header->bmiHeader.biHeight * yScaleFactor),
                  0, 0, header->bmiHeader.biWidth, header->bmiHeader.biHeight,
                  bitData, header, DIB_RGB_COLORS, SRCCOPY);

Note that charts are grey scale images. Their printing resolution requirements are more demanding than black and white text. A printer driver will use multiple printer dots to emulate the grey levels of one pixel. For example, if a printer driver uses 8 x 8 dots to emulate 1 grey level pixels (supporting 65 possible grey levels), a 600 dpi printer can only output at 75 pixels per inch. The exact achieved resolution depends on your printer brand and driver. In general, to produce screen quality image output, one needs at least 600 dpi printer.