March 3, 2011

ZapB ZapB
Ant Farmer
1427 posts

Qt Charting Component - Feedback request

Page  
1

Hey forum,

I have started work on a charting/plotting library based on the QGraphicsView framework. I would just like to get some feedback on if there is interest in such a component and if the initial API I have come up with looks reasonable to you guys and gals.

Screenshots of some of the examples I have created can be found here [gallery.theharmers.co.uk]

Although I said it is based upon QGraphicsView it is of course trivial to wrap this in a QWidget. The first example does just this using the provided ZPlotWidget class:

  1. #include <QApplication>
  2.  
  3. #include <zdataseries.h>
  4. #include <zdataset.h>
  5. #include <zplot.h>
  6. #include <zplotwidget.h>
  7.  
  8. using namespace PlotLib;
  9.  
  10. int main( int argc, char *argv[] )
  11. {
  12.     QApplication app( argc, argv );
  13.  
  14.     // Create some data
  15.     QVector<QPointF> data = ( QVector<QPointF>()
  16.         << QPointF( -2.0, 3.96 ) << QPointF( -1.0, 1.0 ) << QPointF( 0.0, 0.0 )
  17.         << QPointF( 1.0, 1.0 )  << QPointF( 2.0, 3.93 ) );
  18.     ZDataSetPtr dataSet( new ZDataSet( data ) );
  19.  
  20.     // Now plot it
  21.     ZPlotWidget w;
  22.     ZDataSeries* series = w.plot()->addDataSeries( dataSet, "Series 1", Point | Line );
  23.     series->setLegendText( "Series 1" );
  24.  
  25.     w.show();
  26.     return app.exec();
  27. }

The above application produces this plot [gallery.theharmers.co.uk]

The line that does most of the work is:

  1. ZDataSeries* series = w.plot()->addDataSeries( dataSet, "Series 1", Point | Line );

This tells the plot to add a new data series (the graphical representation of the data) which we can refer to by the name “Series 1” and that this data series should plot the data as points and connecting lines.

ZDataSetPtr is just a QSharedPointer to a ZDataSet object and ZDataSet is a convenience implementation of an interface I call ZAbstractDataSet. This acts as the interface to the plotting library much as QAbstractItemModel does for the Qt ModelView framework.

Other subclasses of ZAbstractDataSet are possible and in fact I already have one that acts as a adaptor/bridge for QAbstractItemModels. This makes it trivial to plot data contained in your existing models. Such an adaptor can be created and setup like this:

  1. ZModelDataSetPtr dataSet( new ZModelDataSet );
  2. dataSet->setModel( m_model );
  3. dataSet->setDataDescription( TwoDimensional );
  4. dataSet->setVariableMapping( "x", 0 );
  5. dataSet->setVariableMapping( "y", 1 );

This creates a suitable data set and maps column 0 to the “x” variable and column 1 to the “y” variable. The ZModelDataSet can then be plotted just like any other data set. An example using this code to plot data from a table model can be seen here [gallery.theharmers.co.uk]. Not visible in this screenshot is that the points/lines are animated when the table model is edited via the QTableView in the left pane.

There are quite a few features already implemented including:

  1. Plot types
    1. Point
    2. Line
    3. Step line
    4. Spline
    5. Area line
    6. Area step line
    7. Area spline
    8. Pie
    9. Bubble plots (for scalar fields)
    10. Vector plots
    11. More to come including contour and spectrogram (density) plots, bar, column etc
  2. Wide selection of point styles
  3. Basic legend support
  4. Dockable layout for QGraphicsView (not animated yet but you can see it used in examples [gallery.theharmers.co.uk] for legend docker and it allows docking inside or outside for each dimension).
  5. Plotting of data
  6. Plotting of functions (C++ [gallery.theharmers.co.uk] and from QtScript [gallery.theharmers.co.uk] )
  7. Multiple plots [gallery.theharmers.co.uk]
  8. Custom colouring and scaling of vector plots and bubble plots from user supplied functions
  9. Support for theming of plots (still in development)
  10. Animations
  11. Linear and logarithmic axes and scales
  12. Support for QDateTimes (still in development)

Longer term I will also attempt to add in a declarative interface to enable such charts/plots to be used from within QML. I still need to look into how to do this in detail though.

If there is sufficient interest in such a component I will continue to develop it and release it as soon as possible. I realise there is still a great deal I have not yet shown in terms of API but this should be enough to get a discussion going.

All thoughts/flames/comments welcomed.

Many thanks,

Sean

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

64 replies

March 3, 2011

2beers 2beers
Lab Rat
149 posts

Woow. I like those screenshots . Impressive work.

March 3, 2011

ZapB ZapB
Ant Farmer
1427 posts
2beers wrote:
Woow. I like those screenshots . Impressive work.

Thank you for your kind words. Does the basic API I have shown so far look OK to you? I can post more snippets if you want more details for a discussion.

I am also open to feature requests if there is a chart type or something else I am missing.

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

March 4, 2011

2beers 2beers
Lab Rat
149 posts

yes. you can make a video to see the charts in action. My idea was to use QML for some animated eye-candy charts. you can see at this examples by fusioncharts done in flash to make an idea: http://www.fusioncharts.com/demos/blueprint/ and
http://www.fusioncharts.com/demos/

ZapB wrote:

I am also open to feature requests if there is a chart type or something else I am missing.

I didn’t see any pie chart in those pics. It might be useful. 3D pie chart will also be exceptional.

March 4, 2011

ZapB ZapB
Ant Farmer
1427 posts
2beers wrote:
yes. you can make a video to see the charts in action. My idea was to use QML for some animated eye-candy charts. you can see at this examples by fusioncharts done in flash to make an idea: http://www.fusioncharts.com/demos/blueprint/ and http://www.fusioncharts.com/demos/

OK interesting. Thanks for the link. Here’s a short video [theharmers.co.uk] showing one way in which the data can be animated when values change. This example is the one that uses a itemview model as the data source. The animation looks better locally than in the video.

When the dataset is changed (in this case via a signal from the underlying Qt itemview model) the dataset notifies the data series which delegates the task of updating the graphics items to a Behaviour object set on the data series. A user could provide their own custom Behaviour object to customise the animations that take place when data is added/removed/modified. As always there is still work to do on this but it is useable already.

2beers wrote:
I didn’t see any pie chart in those pics. It might be useful. 3D pie chart will also be exceptional.

Ah yes sorry I forgot to post a screenshot of pie charts. These are still in the early stages and I am still playing around with templates to find a way to make them work with custom data types (as long as they provide operator + and operator / of course). Anyway, here’s a screenshot [gallery.theharmers.co.uk].

I have also made a video [theharmers.co.uk] of the pie charts being animated. The animation looks better locally than what recordmydesktop shows in the video.

To do this I just retrieved a pointer for the two pie charts and then used QPropertyAnimation in the usual way. The pie charts are just inherited from QGraphicsObject.

Here is the code snippet used to create the two pie charts shown:

  1.     // Create a new plot
  2.     ZPlot* plot = new ZPlot( page );
  3.  
  4.     // Set a title
  5.     plot->setTitleText( "Revenue by Product Stream" );
  6.  
  7.     // Add plot to the page's layout
  8.     page->layout()->addItem( plot, 0, 0 );
  9.  
  10.     // Use data to create a new dataseries in the "Default" plot area
  11.     ZDataSetPtr dataSet1 = ZDataSetPtr( new ZDataSet( data ) );
  12.     ZDataSeries* series1 = plot->addDataSeries( dataSet1, QString( "Series 1" ), Pie );
  13.  
  14.     ZPieItem* pie = series1->pie();
  15.     pie->setPos( QPointF( -0.4, 0.5 ) );
  16.     pie->setRadius( 180.0 );
  17.     pie->explodeSlice( 4, 0.25 );
  18.  
  19.     // Use data to create a new dataseries in the "Default" plot area
  20.     ZDataSetPtr dataSet2 = ZDataSetPtr( new ZDataSet( data2 ) );
  21.     ZDataSeries* series2 = plot->addDataSeries( dataSet2, QString( "Series 2" ), Pie );
  22.  
  23.     // Customise the pie chart a little
  24.     ZPieItem* pie2 = series2->pie();
  25.     pie2->setRadius( 130.0 );
  26.     pie2->setPos( QPointF( 3.0, 0.0 ) );
  27.     pie2->explodeAll( 0.1 );

where “page” is just a pointer to a QGraphicsItem derived object acting as a container (in this case ZPlotPage which is the blue gradient filled background object).

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

March 4, 2011

ZapB ZapB
Ant Farmer
1427 posts

Oops I forgot to mention, in the above pie chart snippet the second pie chart is given a position of (3.0, 0) to make it appear off the right-hand side of the screen ready to be animated in (see video). The pie chart plots use a coordinate system going from -1 to 1.

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

March 4, 2011

2beers 2beers
Lab Rat
149 posts

It’s an impressive job you done there. Congrats. My suggestion is if you wanna move to QML go directly with qml scene graph so you don’t have to change much once is ready.

Another reason by going with QML is that you can use their already predefined animation effects.

Good luck and let us know about future changes

March 4, 2011

ZapB ZapB
Ant Farmer
1427 posts
2beers wrote:
It’s an impressive job you done there. Congrats. My suggestion is if you wanna move to QML go directly with qml scene graph so you don’t have to change much once is ready.

Thank you. I have been keeping an eye on the scene graph stuff. I would also like to make this charting component available via C++ too in addition to QML so I need to figure out how to best provide capabilities to both approaches. It’s a shame that a scene graph backend to QGraphicsView didn’t work out.

2beers wrote:

Another reason by going with QML is that you can use their already predefined animation effects.

Good luck and let us know about future changes

Agreed, although it is also trivial to do so with QPropertyAnimation etc which is what QML uses under the bonnet I believe.

Thanks for your feedback. I’ll post updates as I add new features and eventually release.

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

March 5, 2011

Andre Andre
Robot Herder
6416 posts

Hi Sean,

Thank you for this very interesting charting component. I look forward to diving into it further. The code you show off here looks fine, though I’d have to take a look at the real requirements to see if this would work out for me in practice. Still, it looks like it could!

I am wondering how these charting components differ from existing ones on the market. Qwt and KDAB’s offerings come to mind. Do you have a different design philosophy from theirs? Also important, of course, is the licence(s) this will be available under.

All in all: it looks impressive and quite slick!

March 5, 2011

ZapB ZapB
Ant Farmer
1427 posts

Hey André,

Andre wrote:
Thank you for this very interesting charting component. I look forward to diving into it further. The code you show off here looks fine, though I’d have to take a look at the real requirements to see if this would work out for me in practice. Still, it looks like it could!

No problem. Thank you for taking the time to check it out. Wrt the API requirements, let me know what sort of thing you would like it to be able to do or feel free to ask for some existing API snippets and I will gladly post them for review.

Much of it of course is still subject to change. For example it is already quite simple to plot a function (either a C++ one or a QtScript one) but I think that I can still make the API simpler for the common cases without loss of generality.

Andre wrote:
I am wondering how these charting components differ from existing ones on the market. Qwt and KDAB’s offerings come to mind. Do you have a different design philosophy from theirs? Also important, of course, is the licence(s) this will be available under.

This is based directly on top of QGraphicsView whereas other competing charting components are (as far as I am aware) based on QWidget. This makes certain things simpler and lighter-weight. For example I have written some custom QGraphicsLayout classes. One of these is used to dock the legend (or any other QGraphicsWidget derived object) to the inside or outside of the plot area. Something like this will dock the legend at the inside top-center of the plot area and make the legend lay it’s items out horizontally:

  1. ZGraphicsDockerWidget* legendDocker = plot1->plotArea()->legendDocker();
  2. legendDocker->setSimplePosition( DockInside, TopCenter );
  3. legendDocker->setHorizontalAnchorSpacing( 0.0 );
  4. plot1->plotArea()->legend()->setOrientation( Qt::Horizontal );

Of course this can be made even simpler by:

  1. making the theme/style aware that the horizontal anchor spacing should be zero when using a centre alignment in the horizontal direction
  2. making some simple forwarding functions on ZPlot that forwards calls onto the default plot area instead of having to have explicit calls to plotArea( const QString& plotAreaName = “default” ) in there.

That is just a little syntactic sugar though. That is just a simple example of the ZGraphicsDockLayout though. Much more is possible with it that I have shown here.

I am also aiming to be able to produce business-like charts (ie for use in dashboards, presentation etc.), production quality charts suitable for scientific publications, and high-performance charts for plotting of real-time data. This should be possible by simply using a suitable chart theme and a sensible choice of data series plot elements. For example it would not make sense to use spline-based curves for a high-performance real-time plotting application but it might for a business presentation/dashboard.

As for licenses I am thinking of a commercial license (with support) plus one or more FOSS licenses. I would like to see it used and if I can earn a little money with it then so much the better as I’ll be able to dedicate some more time into future improvements and some other project ideas I have in mind.

Andre wrote:
All in all: it looks impressive and quite slick!

Many thanks. Still lots more to come!

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

March 7, 2011

kofee kofee
Lab Rat
2 posts

Hi Sean,

I really like it, it looks good and the API seems easy to use.

I would definitely use it right away if it had support for: – QDateTime (I see work in progress, good :) ) – one y axis per data serie (different units/scale) – show/hide data serie (ticking a box in the app triggers it) – select area in the plot that emits first and last x values (why not y as well)

Can’t wait to see what you’ll come up with.

March 7, 2011

emsr emsr
Lab Rat
1 posts

Greetings Sean,

Thank you very much for your effort.

I would like to see polar plot.s I do a lot of 2D gain patterns of antennas and such.

The ability to plot (linear but mostly log) and scale multiple series would be most excellent.

I tried what looked like an add on to Qwt but couldn’t get it to compile.

Thank you again. I would love for this to become a standard component.

Ed

March 7, 2011

Andre Andre
Robot Herder
6416 posts

ZapB wrote:
Hey André,

Andre wrote:
Thank you for this very interesting charting component. I look forward to diving into it further. The code you show off here looks fine, though I’d have to take a look at the real requirements to see if this would work out for me in practice. Still, it looks like it could!

No problem. Thank you for taking the time to check it out. Wrt the API requirements, let me know what sort of thing you would like it to be able to do or feel free to ask for some existing API snippets and I will gladly post them for review.

What I am most interested in, is the API you came up for for your data interface. You said you came up with something that acts like the QAbstractItemModel does for Qt’s views, and I am really curious to see that API: how easy is it to reimplement to adapt it to different data backends? How flexible is it? For me, this is probably one of the key parts of the API.

I am also aiming to be able to produce business-like charts (ie for use in dashboards, presentation etc.), production quality charts suitable for scientific publications, and high-performance charts for plotting of real-time data. This should be possible by simply using a suitable chart theme and a sensible choice of data series plot elements. For example it would not make sense to use spline-based curves for a high-performance real-time plotting application but it might for a business presentation/dashboard.

Data visualization is only becomming more important. Animation is a great feature to have, because it enables you to create time series in a simple way (I hope your API makes that possible?) But also try to considder some less frequently used chart types that can be useful. Think about spidergrams, for instance (the cobweb like diagrams), or bubble graphs. But also diagrams of the type where the diagram area is filled up with boxes, each of these representing a data point and sized to represent the relative value of that point (I don’t remember the name of this visualization) is helpful to gain insight sometimes. I guess it would make sense if it were doable for a user to exend the framework with new graph types, so I am curious to the API to implement for that too (it is the “other end” of the model API I asked for just above, I guess :-) )

March 7, 2011

ZapB ZapB
Ant Farmer
1427 posts

Hi André,

I’ll reply in a few posts to make it easier to digest…

Andre wrote:
What I am most interested in, is the API you came up for for your data interface. You said you came up with something that acts like the QAbstractItemModel does for Qt’s views, and I am really curious to see that API: how easy is it to reimplement to adapt it to different data backends? How flexible is it? For me, this is probably one of the key parts of the API.

Here is the API of my ZAbstractDataSet class which I suppose is the equivalent of QAbstractItemModel:

  1. class PLOTLIBAPI ZAbstractDataSet : public QObject
  2. {
  3.     Q_OBJECT
  4. public:
  5.     explicit ZAbstractDataSet( QObject* parent = 0 );
  6.  
  7.     virtual QVariant data( int index, const QString& variable ) const = 0;
  8.  
  9.     virtual int size() const = 0;
  10.  
  11.     virtual DataDescriptionFlags dataDescription() const = 0;
  12.  
  13.     virtual QRectF boundingRect() const;
  14.  
  15.     int dataType() const
  16.     {
  17.         if ( size() == 0 )
  18.             return QVariant::Invalid;
  19.         return data( 0 ).userType();
  20.     }
  21.  
  22.     void registerVariableMapper( int typeId, ZAbstractVariableMapperPtr mapper );
  23.     QHash<int, ZAbstractVariableMapperPtr> variableMappers() const;
  24.    
  25. public slots:
  26.     virtual void setData( int index, const QVariant& data );
  27.     virtual void insertData( int index, int count );
  28.     virtual void removeData( int index, int count );
  29.     void removeData( int index ) { removeData( index, 1 ); }
  30.  
  31. signals:
  32.     void dataReset();
  33.     void dataChanged( int start, int end );
  34.     void dataAboutToBeInserted( int start, int end );
  35.     void dataInserted( int start, int end );
  36.     void dataAboutToBeRemoved( int start, int end );
  37.     void dataRemoved( int start, int end );
  38.  
  39. protected:
  40.     void reset();
  41.  
  42.     void beginInsertData( int start, int count );
  43.     void endInsertData();
  44.  
  45.     void beginRemoveData( int start, int count );
  46.     void endRemoveData();
  47. };

So far I have subclassed two concrete classes from this interface:

  • ZDataSet which is a convenience implementation much like QStandardItemModel is for QAIM and
  • ZModelDataSet which acts as a bridge to existing QAIM based datasets

I am planning a 3rd concrete subclass implemented in terms of QCircularBuffer (If my merge request ever gets reviewed ;-)) which will allow the high performance plotting of real-time data series. With this class the data series will show up to the n most recent points (ie data for the last hour etc). Older points will be automatically overwritten by new incoming points. This should remove any new’s/delete’s of QGraphicsItems or memory allocation within the dataset. This would be useful in system monitor type apps too ie ksysguard.

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

March 7, 2011

ZapB ZapB
Ant Farmer
1427 posts

In addition to the obvious functions for inserting/removing data and accessing the data you may have noticed a couple of other aspects:

  1. virtual DataDescriptionFlags dataDescription() const = 0;

This is used to describe the type of data contained within the data set. Obviously not all types of data can be plotted in all ways. For example, a bubble plot needs 2 y values (one for the position and one for the value that determines the size of the point (more on this later). The descriptions that I support for far are:

  1. enum DataDescriptionFlag
  2. {
  3.     NoData                  = 0x00000000,
  4.     OneDimensional          = 0x00000001,
  5.     TwoDimensional          = 0x00000002,
  6.     ImplicitTwoDimensional  = 0x00000004,
  7.     ScalarField             = 0x00000008,
  8.     VectorField             = 0x00000010,
  9.     PlaneTensorField        = 0x00000020,
  10.     IndexedScalarField      = 0x00000080,
  11.     StockTimeSeries         = 0x00000100
  12. };
  13.  
  14. Q_DECLARE_FLAGS( DataDescriptionFlags, DataDescriptionFlag );
  15. Q_DECLARE_OPERATORS_FOR_FLAGS( DataDescriptionFlags );

I have not yet implemented any graphical forms for PlaneTensorField (think plane stress tensor) and StockTimeSeries as yet. Each of the above data description types can be plotted in one or more ways.

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

March 7, 2011

ZapB ZapB
Ant Farmer
1427 posts

The other aspect in the ZAbstractDataSet interface of interest is:

  1. void registerVariableMapper( int typeId, ZAbstractVariableMapperPtr mapper );
  2. QHash<int, ZAbstractVariableMapperPtr> variableMappers() const;

I’ll try to explain this a little. A data set may take many forms. Let us consider possible data sets for a simple 2d xy scatter plot. Some possible forms for each point in the data set are:

  • QPointF
  • QPoint
  • QPair<double, double>
  • QPair<int, int>
  • Eigen::Vector2d

I have tried to make it such that I can support any format of point so long as it is supported by QVariant. Obviously I do not really want to have to write a corresponding graphical class for each type of data that we support. After all the graphical representation should be the same no matter the details of where it’s position came from.

To this end I have introduced the concept of variable mappers. The graphical items need to know things like what position should I draw myself at, or what size should I be. To do this the data series asks the ZAbstractDataSet for pieces of data using the function:

  1. virtual QVariant data( int index, const QString& variable ) const = 0;

where the variable is “x”, “y”, “position”, “scalar”, “vector” etc depending upon what info it needs to be able to render the plot type.

NB I am planning on replacing these strings with an enum value at some point to eliminate string comparisons.

Anyway, since the data set classes that I ship cannot possibly know about all the data type that people may wish to use, I have delegated the details of these data requests to so-called variable mappers. My data set classes register a number of supplied variable mappers at creation time but a user can register their own for their custom data types. The implementation of a variable mapper is very simple. Here is an example mapper for an Eigen::Vector2d type:

  1. class Vector2dTypeMapper : public PlotLib::ZAbstractVariableMapper
  2. {
  3.     QVariant extractVariable( int index, const QVariant& v, const QString& variable ) const
  4.     {
  5.         Q_UNUSED( index );
  6.         if ( variable == "x" )
  7.         {
  8.             return QVariant( v.value<Vector2d>().x() );
  9.         }
  10.         else if ( variable == "y" )
  11.         {
  12.             return QVariant( v.value<Vector2d>().y() );
  13.         }
  14.         else if ( variable == "position" )
  15.         {
  16.             Vector2d vec = v.value<Vector2d>();
  17.             QPointF p( vec.x(), vec.y() );
  18.             return p;
  19.         }
  20.         return QVariant();
  21.     }
  22. };

Only this one function needs to be implemented. Each variable “x”, “y” etc has it’s own data type that it needs to be converted to. Some of these are “x”, “y”, “scalar”=>double; “position”=>QPointF etc.

I know that this sacrifices a little speed but it does make it very flexible.

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

Page  
1

  ‹‹ [Solved]Forbidden Declaration...      Apple release XCode 4 with LLVM ››

You must log in to post a reply. Not a member yet? Register here!