Using ChartDirector with Qt Widget

ChartDirector comes with a lot of Qt examples in the "ChartDirector/qtdemo" directory. They are packages into the following Qt projects. The Qt ".pro" project files can be opened with the Qt Creator.

helloworld: This is a basic Qt project that just displays a simple bar chart.
qtdemo: This project includes all ChartDirector chart types. It demonstrates various advanced features such as tooltips with rich formatting, clickable chart objects, programmable track cursors, zooming and scrolling, realtime charts, contour cross section, 3D chart rotations, PDF reports and huge dataset support.

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

To use QChartViewer in your own project:

Include "qchartviewer.h" and "qchartviewer.cpp" in your project.
Add the line following line to your code:

#include "qchartviewer.h"
Add a QChartViewer widget to your user interface.

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);

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 QChartViewer control, 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. For clickable hot spots, it will also change the mouse cursor into a "hand" shape.

When the mouse clicks on the QChartViewer widget, a QChartViewer.clicked signal will be emitted. The signal handler can use ImageMapHandler to determine which hot spot has been 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();
        }
    }
}

In ChartDirector, track cursors can be created by drawing them on a "dynamic layer" when the mouse moves on the chart. For example, drawing a horizontal line and a vertical line will create a crosshair cursor that tracks the mouse. Other things, such as legend entries, data labels and axis labels, can also be drawn, allowing them to update as the mouse moves over the chart.

QChartViewer will emit QChartViewer.mouseMovePlotArea signals when the mouse moves over the extended plot area. The track cursor drawing code can be implemented in the handler of this signal.

A viewport 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 viewport showing 10% of the underlying surface.

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

QChartViewer supports using mouse click and drag to control the viewport (see QChartViewer.setMouseUsage). When the viewport is changed by mouse actions, QChartViewer will emit a QChartViewer.viewPortChanged signal. The signal handler can then redraw the chart to reflect the updated viewport.

QChartViewer also includes methods for changing the viewport programmatically. This allows external controls (such as scroll bars, mouse wheel, sliders, date picker, etc) to manipulate the viewport.

The QViewPortControl is a Qt widget introduced in ChartDirector 6.0. It allows user to visualize and control the QChartViewer viewport.

In typical usage, the QViewPortControl will display an "overall chart" that shows the full data range. Once the QViewPortControl is associated with the QChartViewer, it will draw a rectangle on the overall chart to represent the QChartViewer viewport, and dim out the region outside the rectangle. If the viewport changed, such as if the user zooms in the chart, the rectangle will automatically update.

The user can drag the rectangle to move the QChartViewer viewport (equivalent to scrolling). The user can also resize the viewport by dragging the border of the rectangle (equivalent to zooming), or drag a new rectangular region on the overall chart to be used as the new viewport, or click on a point on the chart to center the viewport at that point. In all these cases, as the viewport has changed, the QChartViewer.viewPortChanged signal will be emitted.

The steps to use QViewPortControl in your own project is similar to that of QChartViewer:

Include "qchartviewer.h" and "qchartviewer.cpp" in your project.
Add the line following line to your code:

#include "qchartviewer.h"
Add a QViewPortControl widget to your user interface.

The QViewPortControl requires an "overall chart" on which the viewport rectangle is drawn. It also requires connection to a QChartViewer so as to visualize and control its viewport. The code to do this is:

// m_ViewPortControl is a QViewPortControl; myOverallChart is a BaseChart pointer
m_ViewPortControl->setChart(myOverallChart);

// m_ChartViewer is the QChartViewer to be associated with the QViewPortControl
m_ViewPortControl->setViewer(m_ChartViewer);

ChartDirector can output the charts in PDF, SVG, PNG, JPG, GIF and BMP format to a file using BaseChart.makeChart, or to memory using BaseChart.makeChart2. For example, to save the chart in a QChartViewer to a file, the code is:

// m_ChartViewer is a CChartViewer object which contains the chart to save. The
// format is determined by the file extension in pathname.
m_ChartViewer->getChart()->makeChart(pathname);