Bar Charts with QFlot
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".
Below, you'll find a simple example of a bar chart created using this library. First, initialize a
QFlot object. Set its visual parameters - size, dimensions (don't wait - look at the code! :)).
Then, get your dataset onto the graph. Here is the sample dataset we want to visualize here:
Array (
[Intro] => Array
(
[1] => 89.2
)
[Beginner] => Array
(
[2] => 45
)
[Intermediate] => Array
(
[3] => 32.12
)
[Advanced] => Array
(
[4] => 4.8
)
)
We want to take each element of this array (where element is "Intro", "Beginner", etc), and plot them
on the chart as a separate bar. To do so, we set the following values for each element: the key is the position
on the horizontal x-axis (for example, Beginner is to appear in position 2), and the value is the height of the
bar (for example, for the Beginner bar, it has to be equal to 45).
To do so, we 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.
