New Common Graphics Chart Widget in 8.1

The Chart Widget is a versatile facility for creating two-dimensional line graphs and bar charts. The widget could be used to present static information or to dynamically monitor information as it changes. The widget will automatically lay out its axes and other parts (according to style properties that you can modify) and can also autocompute a rounded value range that encloses all of the data values. A long sequence of data items can be scrolled into view by dragging the mouse or using the usual scrolling keys.

The Chart Widget is described in an extended example found in cg/cg-chart-widget.htm. In this note, we show some of the charts from that example, with descriptions of the features available.

A first example

In this first example, we have bowling scores for three players in a monthly game. We display the sum of their scores, with individual scores color coded. The horizontal axis is labeled with month names, and the vertical axis with numbers. A legend associates colors with players:

Building a more complex example

We start with an empty Chart Widget. The code is quite short. (If you have 8.1 and want to try the code, we recommend that you take it from cg/cg-chart-widget.htm or from [Allegro directory]/examples/cg/chart-widget-tutorial.cl rather than copying and pasting from here as the code in this note is not complete.)

(let* ((width 500)
       (height 500)
       (chart-widget (make-instance 'chart-widget
                       :chart-view :bar
                       :right-attachment :right
                       :bottom-attachment :bottom
                       :left 0 :top 0
                       :width width :height height))
       (dialog (make-window :chart-tutorial
                 :class 'dialog
                 :title "Chart Tutorial"
                 :scrollbars nil
                 :interior (make-box-relative 0 40 width height)
                 :dialog-items (list chart-widget))))
  (setq *chart-widget* chart-widget)
  dialog)

We have made a chart-widget instance and placed it on a dialog window. We have not specified much beyond the fact we are making a bar chart. The window displayed looks like this:

Without specifying any further properties, we can immediately begin adding values to the chart and see what happens. We do this by calling the main chart-widget function, which is set-chart-value. Let's add an initial value of 12.

(set-chart-value *chart-widget* :value 12)

One bar appears. Note too the range of the Y (vertical) axis has increased (from 10 to 15) in order to accommodate the value 12.

We add more values (7, 14, 37, and -4). Each is displayed with a new bar and the Y range adjusts as necessary:

We evaluate the following to provide additional features:

(progn
  (setf (axis-label (value-axis *chart-widget*)) "Value")
  (setf (axis-label (item-axis *chart-widget*)) "Item")
  (setf (title *chart-widget*) "Chart Tutorial")
  (setf (subtitle *chart-widget*)
    "Building a chart one step at a time."))

Now we have a title (Chart Tutorial), a subtitle (Building a chart one step at a time), and axis labels (Item for the horizontal, Value for the vertical).

We reset the value of bar 3 (0-based, so the fourth one in, value currently 37) to 10. We also call update-chart-widget to recompute the vertical range. (Recomputation is automatic when it needs to be larger but not when it can be smaller.)

(set-chart-value *chart-widget* :item-index 3 :value 10)
(update-chart-widget *chart-widget*)

Here is the revised chart:

The tutorial continues modifying the chart to show other features, but we are going to skip ahead to show off some more complicated charts. Here we show average scores for 4 players (identified just as 1, 2, 3, and 4) over a series of months:

Now we switch from the bar view to a line view. Using different data (and five players), here are average scores shown with lines over a series of months:

Here is a similar chart with better labels and a legend with names:

These pictures just give an introduction of what the new Chart Widget can do. There are more examples in the tutorial.

Copyright © 2023 Franz Inc., All Rights Reserved | Privacy Statement Twitter