QFlot a New QCubed Plugin to draw charts

Submitted by enzo on Mon, 11/16/2009 - 01:46

Hello folks

This is my weekly contribution to QCubed.

QFlot is a plugin that encapsulates a powerful Javascript-based graphing/plotting library called Flot (Flot homepage). Quoting the project's own goals, "The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking".

To use QFlot to render a chart for bars, we just create an object of type QFlotSeries for each of the bars. We pass the name of the series to the QFlotSeries constructor. We then set the value of the DataSet property of the QFlotSeries to be the key-value pair that we deliniated earlier (the one where the key is the x-position and the value is the y-axis value). The last step is registering the QFlotSeries with your QFlot object by calling AddSeries(). That's it! You can now render the QFlot object on your template file by calling Render() just like you would on any other QControl.

To use QFlot to render a chart fro time series, we just create an object of type QFlotSeries for each of the bars. We pass the name of the series to the QFlotSeries constructor. We then set the value of the DataSet property of the QFlotSeries to be the key-value pair that we deliniated earlier (the one where the key is the x-position and the value is the y-axis value). The last step is registering the QFlotSeries with your QFlot object by calling AddSeries(). That's it! You can now render the QFlot object on your template file by calling Render() just like you would on any other QControl.

Take a look at it in action: see how easy it is to create a bar chart or a time series chart.

Enjoy it.

enzo