blob: d0820c3b7631f398351288ec35198ddc2f75f09e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
HelloGraphs Example
===================
The example shows how to make a simple 2D bar graph and line graph.
BarGraph
--------
The first graph in the example is a bar graph. Creating it starts with a GraphsView
component and setting the theme to one which is suitable on
dark backgrounds. This theme adjusts the graph background grid and axis lines and
labels.
To make this a bar graph, add a ``BarSeries.`` The X axis of the series is a
``BarCategoryAxis`` with 3 categories. We hide both the vertical grid and the
axis lines. The Y axis of the series is ``ValueAxis`` with visible range
between 20 and 100. Major ticks with labels will be shown on every 10 values
using the ``tickInterval`` property. Minor ticks will be shown on every 1
values setting the ``minorTickCount`` propertyt to 9, which means that between
every major ticks there will be 9 minor ones.
Then data is added into ``BarSeries`` using ``BarSet.`` There are 3 bars, and we define
custom bars color and border properties. These properties will override the possible
theme set for the ``AbstractSeries.``
LineGraph
---------
The second graph of the example is a line graph. It also starts by defining a
``GraphsView`` element. A custom ``GraphTheme`` is created to get a custom appearance.
``GraphTheme`` offers quite a wide range of customization possibilities for the background
grid and axis, which get applied after the ``colorTheme``.
A custom ``Marker`` component is used to visualize the data points.
The previous bar graph didn't define a separate ``SeriesTheme``, so it uses the
default theme. This line graph uses a custom theme with the desired line colors.
To make this a line graph, add a ``LineSeries.`` The first series defines
``axisX`` and ``axisY`` for this graph. It also sets the ``pointMarker`` to use
the custom ``Marker`` component that was created earlier. Data points are added
using ``XYPoint`` elements.
The second line series is similar to the first. The ``axisX`` and ``axisY``
don't need to be defined as the graph already contains them. As this is the
second ``LineSeries`` inside the ``GraphsView``, second color from the
``seriesTheme`` gets automatically picked.
.. image:: hellographs.webp
:width: 1293
:alt: HelloGraphs Screenshot
|
