ChartDirector Ver 5.0 (C++ Edition)

Using ChartDirector with QT


This section describes how to use ChartDirector with QT.

QT Sample Programs

ChartDirector comes with a number of QT sample programs in the "ChartDirector/qtdemo" subdirectory.

Project NameDescription
helloworldThe "Hello World" example of using ChartDirector with QT. This is a basic QT project displaying a simple bar chart.
qtdemoThe main QT 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.

ChartDirector is GUI framework neutral and works with any GUI framework and version. However, the QT sample programs are only tested on QT 4.6. They may or may not require modifications with other versions of QT.

The QT ".pro" project files can be opened directly with the QT Creator or the Visual Studio QT Plug-in. You may also use qmake/make to compile the sample programs from the command line.

It is recommended you start with the helloworld project and then the qtdemo project. The qtdemo 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.

Important Note For Mac OS X

By default, on Mac OS X, qmake will create an Xcode project file, not a make file. To create a make file, please use the "-spec macx-g++" flag:

    qmake -spec macx-g++
    make

If you must use Xcode, note that the Xcode project file created by qmake is incomplete. It lacks the post link script (according to QT's web site, it is a known issue as of QT 4.6). The post link script is used to copy "libchartdir.5.dylib" to the application bundle, so that the program can find it at runtime.

To solve the problem, you may copy "libchartdir.5.dylib" to "/usr/lib" so that the executable can find it.

For the qtdemo sample program, if it is executed in Xcode, it may be unable to find the required PNG and GIF files, causing some charts to generate incorrectly. It is because Xcode will build and execute the program in another directory (eg. in the build/Debug directory). To solve the problem, please copy the PNG and GIF files from the qtdemo sample code directory to the directory used by Xcode to execute the program.

The QChartViewer Widget

All ChartDirector QT sample programs uses the QChartViewer widget to display charts and handle mouse interactions. The QChartViewer is a derived class of the QLabel. It is released in source code format.

To use QChartViewer in your own project:

Displaying Charts On Screen

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

     // m_ChartViewer is a QChartViewer widget; myChart is a BaseChart pointer
     m_ChartViewer.setChart(myChart);

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 a QChartViewer widget, one may use:

     m_ChartViewer.setImageMap(myImageMap);

After setting the image map, the QChartViewer widget 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 QChartViewer widget, a QChartViewer.clicked signal will be emitted. The slot that is connected to the signal can use ImageMapHandler to determine which hot spot the mouse has clicked. An example is like:

void CMyDialog::OnChartClicked(QMouseEvent*)
{
    // Get the ImageMapHandler from the QChartViewer that sends the signal
    QChartViewer *viewer = (QChartViewer *)QObject::sender();
    ImageMapHandler *handler = viewer->getImageMapHandler();

    if (0 != handler)
    {
        // Query the ImageMapHandler to see if the mouse is on a clickable
        // hot spot. We consider the hot spot as clickable if its href
        // ("path") parameter is not empty.
        const char *path = handler->getValue("path");
        if ((0 != path) && (0 != *path))
        {
            // In a clickable hot spot - do something ......
            // In the sample code, we just show all hot spot parameters using
            // the HotSpotDialog included in the sample code.
            HotSpotDialog hs;
            hs.setData(handler);
            hs.exec();
        }
    }
}

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.

QChartViewer may change the view port during "drag to zoom", "click to zoom" or "drag to scroll" mouse actions (see QChartViewer.setMouseUsage). When QChartViewer changes the view port, it will emit a QChartViewer.viewPortChanged signal. The slot connected to this signal may then redraw the chart to reflect the updated view port.

QChartViewer also allows external code or widgets (such as scroll bars, sliders, date edit widgets, etc) to change the view port and emit the viewPortChanged signal. You may refer to Zoomable and Scrollable Charts for more information.

Printing Charts On Paper

To print a chart, simply print the QPixmap in the QChartViewer with QPrinter. For example:

    QPrinter printer;
    QPainter painter;
    painter.begin(&printer);
    painter.drawImage(40, 40, m_ChartViewer.pixmap()->toImage());
    painter.end();