Time Series Charts with QFlot

In the previous tutorial, you saw how to create a basic bar chart with QFlot. This tutorial builds upon the knowledge from the last one - so if you want to build a time series graph, check it out first, still!

In this example, we'll create a graph of players' scores over time. Take a look at what we got below.. Pretty cute chart, right? It's really easy to create with QFlot. First, let's see how each line is constructed. Each line is really just a QFlotSeries; unlike the bar chart example where each series had only one datapoint, here we have multiple datapoints for each.

So we go ahead and create QFlotSeries objects, setting visual parameters on each. Note how one of the lines has tickmarks (little circles where the value points are) and the other one doesn't. Same with the line fill (the fill underneath the series line that covers the area under the curve). These are just settings like Points and LinesFill on the QFlotSeries object.

If you look at the code for this example, you'll also notice that the time series can be specified through a couple different data source formats. For example, $gonzaloData array specifies the x-axis values through formatted dates; $melissaData does so through timestamps.

Just like on the bar chart example, we can set the DataSet property on the QFlotSeries to pass in an entire formatted dataset as the list of values. If you don't have one created, it might save you time to use the AddDataPoint($time, $y) method instead.

Last couple tricks: you can easily add a linear regression trendline to you chart by calling MakeTrend on the QFlot object and passing in the series you want regressed. You can also create a QDataGrid out of the values in your chart easily - which might be useful to show a values table right under it, like in the example below. To do so, use the CreateDataGrid on the QFlot object.